JS: manage routing

Conflicts:
	chimere/route.py

9 files changed, 325 insertions, 177 deletions

diff --git a/chimere/models.py b/chimere/models.py
index 9bf645d..057e808 100644
--- a/chimere/models.py
+++ b/chimere/models.py
@@ -604,9 +604,6 @@ class GeographicItem(models.Model):
 
     def _get_geom_item_fk_name(self):
         geom_attr = self.geom_attr
-        if self.geom_attr == 'route':
-            # # TODO v3 - backport routes
-            geom_attr = 'point'
         return GEOM_TO_GEOM_ITEM[geom_attr].lower()
 
     def getProperty(self, propertymodel, safe=None):
diff --git a/chimere/route.py b/chimere/route.py
index 31cf4f0..3c37a08 100644
--- a/chimere/route.py
+++ b/chimere/route.py
@@ -26,6 +26,7 @@ import os
 import re
 import shutil
 import tempfile
+import json
 from BeautifulSoup import BeautifulSoup
 from subprocess import Popen, PIPE
 from django.contrib.gis.gdal import DataSource
@@ -94,8 +95,14 @@ class RoutinoRouter(Router):
                 break
         multilines = trk_layer.get_geoms()
         res = []
+        jsonencoder = json.JSONEncoder()
+        jsondecoder = json.JSONDecoder()
         for multiline in multilines:
-            res += [geom.geojson for geom in multiline]
+            res += [
+                jsonencoder.encode(
+                    {"type": "Feature",
+                     "geometry": jsondecoder.decode(geom.geojson)})
+                for geom in multiline]
         desc = []
         # only keeping interessant lines of the desc
         for line in open(tmp_dir + 'shortest.html').readlines():
diff --git a/chimere/static/chimere/img/icon_from.png b/chimere/static/chimere/img/icon_from.png
new file mode 100644
index 0000000..3623e50
--- /dev/null
+++ b/chimere/static/chimere/img/icon_from.png
diff --git a/chimere/static/chimere/img/icon_to.png b/chimere/static/chimere/img/icon_to.png
new file mode 100644
index 0000000..6a2bab2
--- /dev/null
+++ b/chimere/static/chimere/img/icon_to.png
diff --git a/chimere/static/chimere/img/routing_from.png b/chimere/static/chimere/img/routing_from.png
new file mode 100644
index 0000000..22641ca
--- /dev/null
+++ b/chimere/static/chimere/img/routing_from.png
diff --git a/chimere/static/chimere/img/routing_step.png b/chimere/static/chimere/img/routing_step.png
new file mode 100644
index 0000000..04d8004
--- /dev/null
+++ b/chimere/static/chimere/img/routing_step.png
diff --git a/chimere/static/chimere/img/routing_to.png b/chimere/static/chimere/img/routing_to.png
new file mode 100644
index 0000000..15386a0
--- /dev/null
+++ b/chimere/static/chimere/img/routing_to.png
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 0ffb14f..ef7c3d0 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -19,6 +19,9 @@ See the file COPYING for details.
 var extra_url;
 
 var labels = {
+    'routing_from': "From",
+    'routing_to': "To",
+    'routing_add_step': "Add step",
     'center_map': "Center map here",
     'zoom_in': "Zoom in",
     'zoom_out': "Zoom out"
@@ -27,6 +30,9 @@ var labels = {
 if (typeof language != 'undefined'){
     if (language == 'fr'){
         labels = {
+            'routing_from': "En partir",
+            'routing_to': "Y aller",
+            'routing_add_step': "Ajouter une étape",
             'center_map': "Centrer la carte ici",
             'zoom_in': "Zoom avant",
             'zoom_out': "Zoom arrière"
@@ -160,6 +166,10 @@ function transform(obj) {
   return obj.transform(EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION);
 }
 
+function transformCoordToLonLat(coord) {
+  return ol.proj.transform(coord, EPSG_PROJECTION, EPSG_DISPLAY_PROJECTION);
+}
+
 /*
 * Little hasattr helper
 */
@@ -247,9 +257,9 @@ function transform(obj) {
             marker_hover_id:'marker_hover',
             marker_hover_content_id:'marker_hover_content',
             marker_hover_offset: null,
-            icon_start: null,
-            icon_step: null,
-            icon_end: null,
+            icon_start_style: null,
+            icon_step_style: null,
+            icon_end_style: null,
             mobile: false,
             input_id: 'id_point',
             animation_duration: 250
@@ -375,11 +385,27 @@ function transform(obj) {
             });
 
             // manage context menu
-
-            var contextmenu = new ContextMenu({
-              width: 170,
-              default_items: false,
-              items: [
+            var contextmenu_items = [];
+            if (settings.routing){
+                contextmenu_items = [
+                    {
+                      text: labels['routing_from'],
+                      callback: methods.routingFrom,
+                      icon: STATIC_URL + 'chimere/img/icon_from.png'
+                    },
+                    {
+                      text: labels['routing_add_step'],
+                      callback: methods.routingAddStep,
+                      icon: STATIC_URL + 'chimere/img/icon_add_step.png'
+                    },
+                    {
+                      text: labels['routing_to'],
+                      callback: methods.routingTo,
+                      icon: STATIC_URL + 'chimere/img/icon_to.png'
+                    },
+                    '-'];
+            }
+            contextmenu_items = contextmenu_items.concat([
                 {
                   text: labels['center_map'],
                   callback: methods.mapCenter,
@@ -396,7 +422,12 @@ function transform(obj) {
                   classname: 'ol-ctx-menu-zoom-out ol-ctx-menu-icon',
                   callback: methods.zoomOut
                 }
-              ]
+            ]);
+
+            var contextmenu = new ContextMenu({
+              width: 170,
+              default_items: false,
+              items: contextmenu_items
             });
             settings.map.addControl(contextmenu);
 
@@ -481,21 +512,6 @@ function transform(obj) {
             $('#map_menu_center').bind("click", methods.mapCenter);
             */
             /* OL3-deprecated routing
-            // manage the routing
-            if (settings.routing){
-                settings.routing_start = null;
-                settings.routing_steps = new Array();
-                settings.routing_end = null;
-                $('#map_menu_from').bind("click", methods.routingFrom);
-                $('#map_menu_step').bind("click", methods.routingAddStep);
-                $('#map_menu_to').bind("click", methods.routingTo);
-                $('#map_menu_clear').bind("click", methods.routingClear);
-                settings.layerRoute = new OpenLayers.Layer.Vector("Route Layer");
-                settings.map.addLayer(settings.layerRoute);
-                settings.layerRouteMarker = new OpenLayers.Layer.Markers(
-                                                               'Route markers');
-                settings.map.addLayer(settings.layerRouteMarker);
-            }
             */
 
             settings.layerSwitcher = new LayerSwitcher({
@@ -547,6 +563,23 @@ function transform(obj) {
             settings.popup = new ol.Overlay(popup_options);
             settings.map.addOverlay(settings.popup);
 
+            // manage the routing
+            if (settings.routing){
+                settings.routing_start = null;
+                settings.routing_steps = new Array();
+                settings.routing_end = null;
+                settings.routingFeatures = new ol.Collection();
+
+                settings.sourceRoutingFeatures = new ol.source.Vector({
+                    features: settings.routingFeatures
+                });
+
+                settings.layerRoutingFeatures = new ol.layer.Vector({
+                    source: settings.sourceRoutingFeatures
+                });
+                settings.map.addLayer(settings.layerRoutingFeatures);
+            }
+
             // display marker on click
             settings.map.on('click', function(evt) {
                 var feature = settings.map.forEachFeatureAtPixel(
@@ -1087,11 +1120,11 @@ function transform(obj) {
                 if (geom.getType() == 'Point'){
                     settings.popup.setPosition(geom.getCoordinates());
                 } else if (geom.getType() == 'Polygon'){
-                        settings.popup.setPosition(geom.getInteriorPoint().getCoordinates());
+                    settings.popup.setPosition(geom.getInteriorPoint().getCoordinates());
                 } else if (geom.getType() == 'LineString'){
-                        settings.popup.setPosition(geom.getCoordinateAt(0.5));
+                    settings.popup.setPosition(geom.getCoordinateAt(0.5));
                 } else if (geom.getType() == 'MultipleLineString'){
-                        settings.popup.setPosition(geom.getLineString(0).getCoordinatesAt(0.5));
+                    settings.popup.setPosition(geom.getLineString(0).getCoordinatesAt(0.5));
                 }
             }
             settings.popup.setOffset([offset_x, offset_y]);
@@ -1582,6 +1615,30 @@ function transform(obj) {
                 settings.modify_activated = false;
             }
         },
+        _getIconStyle: function(properties){
+            for (var i in settings.iconStyles){
+                if (i == properties.icon_path){
+                    return settings.iconStyles[i];
+                }
+            }
+            if (!iconStyle){
+                var icon_url = MEDIA_URL + properties.icon_path;
+                var size = [properties.icon_width, properties.icon_height];
+                var anchor = [properties.icon_offset_x,
+                              properties.icon_offset_y];
+                var iconStyle = new ol.style.Style({
+                    image: new ol.style.Icon({
+                        anchor: anchor,
+                        anchorXUnits: 'pixels',
+                        anchorYUnits: 'pixels',
+                        src: icon_url,
+                        size: size
+                    })
+                });
+                settings.iconStyles[properties.icon_path] = iconStyle;
+                return iconStyle;
+            }
+        },
         /*
         * Put a marker on the map
         */
@@ -1603,28 +1660,7 @@ function transform(obj) {
                 popup_offset_y: mark.properties.icon_popup_offset_y
             });
 
-            var iconStyle;
-            for (var i in settings.iconStyles){
-                if (i == mark.properties.icon_path){
-                    iconStyle = settings.iconStyles[i];
-                }
-            }
-            if (!iconStyle){
-                var icon_url = MEDIA_URL + mark.properties.icon_path;
-                var size = [mark.properties.icon_width, mark.properties.icon_height];
-                var anchor = [mark.properties.icon_offset_x,
-                              mark.properties.icon_offset_y];
-                iconStyle = new ol.style.Style({
-                    image: new ol.style.Icon({
-                        anchor: anchor,
-                        anchorXUnits: 'pixels',
-                        anchorYUnits: 'pixels',
-                        src: icon_url,
-                        size: size
-                    })
-                });
-                settings.iconStyles[mark.properties.icon_path] = iconStyle;
-            }
+            var iconStyle = methods._getIconStyle(mark.properties, MEDIA_URL);
 
             iconFeature.setStyle(iconStyle);
             iconFeature.setId(mark.properties.key);
@@ -1967,31 +2003,46 @@ function transform(obj) {
         },
 
         redrawRoutingIcons: function(){
-            settings.layerRouteMarker.clearMarkers();
-            settings.layerRouteMarker.addMarker(settings.routing_start);
-            settings.layerRouteMarker.addMarker(settings.routing_end);
+            settings.routingFeatures.clear();
+            settings.routingFeatures.push(settings.routing_start);
+            settings.routingFeatures.push(settings.routing_end);
             for (var k=0;k<settings.routing_steps.length;k++){
-                settings.layerRouteMarker.addMarker(settings.routing_steps[k]);
+                settings.routingFeatures.push(settings.routing_steps[k]);
             }
         },
-
         // set the start point for routing
-        routingFrom: function(){
+        routingFrom: function(obj){
             $('#chimere_map_menu').hide();
             if (!settings.mobile){
                 settings.routing_panel_open();
-                $('#map_menu_clear').show();
+                $('.map_menu_clear').show();
             }
-            settings.routing_start = new OpenLayers.Marker(
-                                          settings.current_position.clone(),
-                                          settings.icon_start);
-            settings.layerRouteMarker.addMarker(settings.routing_start);
+
+            if (settings.routing_start){
+                settings.sourceRoutingFeatures.removeFeature(settings.routing_start);
+            }
+            settings.routing_start = new ol.Feature({
+                geometry: new ol.geom.Point(obj.coordinate)
+            });
+            if (!settings.icon_start_style){
+                settings.icon_start_style = new ol.style.Style({
+                        image: new ol.style.Icon({
+                            anchor: [18, 36],
+                            anchorXUnits: 'pixels',
+                            anchorYUnits: 'pixels',
+                            src: STATIC_URL + "chimere/img/routing_from.png",
+                            size: [36, 36]
+                        })
+                    });
+            }
+            settings.routing_start.setStyle(settings.icon_start_style);
+            settings.routingFeatures.push(settings.routing_start);
             if (nominatim_url){
-                helpers.updateNominatimName(settings.current_position.clone()
-                                 .transform(settings.map.getProjectionObject(),
-                                            EPSG_DISPLAY_PROJECTION),
-                                            'start_label');
+                helpers.updateNominatimName(
+                    transformCoordToLonLat(obj.coordinate),
+                    'start_label');
             }
+
             if (settings.routing_end) methods.route();
             // Added for mobile - START //
             //iOS
@@ -2007,7 +2058,7 @@ function transform(obj) {
                     bridge.send('openRouteFrom');
             });
             //android
-            window.JSInterface.openRouteFrom();
+            if (typeof window.JSInterface != 'undefined') window.JSInterface.openRouteFrom();
             // Added for mobile - END //
         },
         // Added for mobile - START //
@@ -2022,10 +2073,8 @@ function transform(obj) {
                                           settings.icon_start);
             settings.layerRouteMarker.addMarker(settings.routing_start);
             if (nominatim_url){
-                helpers.updateNominatimName(settings.current_position.clone()
-                                 .transform(settings.map.getProjectionObject(),
-                                            EPSG_DISPLAY_PROJECTION),
-                                            'start_label');
+                helpers.updateNominatimName(
+                    transform(obj).coordinate,'start_label');
             }
             if (settings.routing_end) methods.route();
 
@@ -2063,28 +2112,37 @@ function transform(obj) {
                                           settings.icon_current_position);
             settings.layerRouteMarker.addMarker(settings.current_position_marker);
         },
-
         // Added for mobile - END //
-
         // add a step point for routing
-        routingAddStep: function(){
-            $('#chimere_map_menu').hide();
+        routingAddStep: function(obj){
             if (!settings.mobile){
                 settings.routing_panel_open();
-                $('#map_menu_clear').show();
+                $('.map_menu_clear').show();
             }
-            settings.routing_steps.push(new OpenLayers.Marker(
-                                          settings.current_position.clone(),
-                                          settings.icon_step.clone()));
-            settings.layerRouteMarker.addMarker(
-                       settings.routing_steps[settings.routing_steps.length-1]);
+
+            var feat = new ol.Feature({
+                geometry: new ol.geom.Point(obj.coordinate)
+            });
+            if (!settings.icon_step_style){
+                settings.icon_step_style = new ol.style.Style({
+                        image: new ol.style.Icon({
+                            anchor: [18, 36],
+                            anchorXUnits: 'pixels',
+                            anchorYUnits: 'pixels',
+                            src: STATIC_URL + "chimere/img/routing_step.png",
+                            size: [36, 36]
+                        })
+                    });
+            }
+            feat.setStyle(settings.icon_step_style);
+            settings.routing_steps.push(feat);
+            settings.routingFeatures.push(feat);
 
             if (nominatim_url){
                 var current_itinerary_number = methods.add_step_fx();
-                helpers.updateNominatimName(settings.current_position.clone()
-                                 .transform(settings.map.getProjectionObject(),
-                                            EPSG_DISPLAY_PROJECTION),
-                                     'step_'+current_itinerary_number+'_label');
+                helpers.updateNominatimName(
+                    transformCoordToLonLat(obj.coordinate),
+                    'step_'+current_itinerary_number+'_label');
             }
             if (settings.routing_end && settings.routing_start) methods.route();
         },
@@ -2129,40 +2187,59 @@ function transform(obj) {
         },
 
         // set the finish point for routing
-        routingTo: function(){
-            $('#chimere_map_menu').hide();
+        routingTo: function(obj){
             if (!settings.mobile){
                 settings.routing_panel_open();
-                $('#map_menu_clear').show();
+                $('.map_menu_clear').show();
             }
-            settings.routing_end = new OpenLayers.Marker(
-                                          settings.current_position.clone(),
-                                          settings.icon_end);
-            settings.layerRouteMarker.addMarker(settings.routing_end);
+
+            if (settings.routing_end){
+                settings.sourceRoutingFeatures.removeFeature(settings.routing_end);
+            }
+            settings.routing_end = new ol.Feature({
+                geometry: new ol.geom.Point(obj.coordinate)
+            });
+            if (!settings.icon_end_style){
+                settings.icon_end_style = new ol.style.Style({
+                        image: new ol.style.Icon({
+                            anchor: [18, 36],
+                            anchorXUnits: 'pixels',
+                            anchorYUnits: 'pixels',
+                            src: STATIC_URL + "chimere/img/routing_to.png",
+                            size: [36, 36]
+                        })
+                    });
+            }
+            settings.routing_end.setStyle(settings.icon_end_style);
+            settings.routingFeatures.push(settings.routing_end);
+
             if (nominatim_url){
-                helpers.updateNominatimName(settings.current_position.clone()
-                                 .transform(settings.map.getProjectionObject(),
-                                            EPSG_DISPLAY_PROJECTION),
-                                            'end_label');
+                helpers.updateNominatimName(
+                    transformCoordToLonLat(obj.coordinate),
+                    'end_label');
             }
+
             if (settings.routing_start) methods.route();
 
             // Added for mobile - START //
-            //iOS
+            // iOS
             methods.connectWebViewJavascriptBridge(
                 function(bridge) {
-                        if(!bridge){
-                            bridge.init(function(message, responseCallback) {
-                                if (responseCallback) {
-                                    responseCallback("Right back atcha");
-                                }
-                               });
-                           }
+                    if(!bridge){
+                        bridge.init(function(message, responseCallback) {
+                            if (responseCallback) {
+                                responseCallback("Right back atcha");
+                            }
+                        });
+                    }
                     bridge.send('openRouteTo');
-            });
-            //Android
-            window.JSInterface.openRouteTo();
+                }
+            );
+            // Android
+            if (typeof window.JSInterface != 'undefined')
+                window.JSInterface.openRouteTo();
             // Added for mobile - END //
+
         },
         // set the finish point for current Position
         routingToPosition: function(options){
@@ -2236,11 +2313,19 @@ function transform(obj) {
             if (!settings.routing_start || !settings.routing_end){
                 return;
             }
-            var steps = [settings.routing_start.lonlat.clone()]
+            var steps = [
+                transformCoordToLonLat(
+                    settings.routing_start.getGeometry().getCoordinates())];
             for (var i = 0; i < settings.routing_steps.length; i++) {
-                steps.push(settings.routing_steps[i].lonlat.clone());
+                steps.push(
+                    transformCoordToLonLat(
+                        settings.routing_steps[i].getGeometry().getCoordinates()
+                    )
+                );
             }
-            steps.push(settings.routing_end.lonlat.clone());
+            steps.push(
+                transformCoordToLonLat(
+                    settings.routing_end.getGeometry().getCoordinates()));
             // create the appropriate URL
             var uri = extra_url + "route/"
             if(settings.routing_transport){
@@ -2250,19 +2335,17 @@ function transform(obj) {
                 uri += settings.routing_speed + "/"
             }
             for (var i = 0; i < steps.length; i++) {
-                var step = steps[i].transform(
-                                            settings.map.getProjectionObject(),
-                                            EPSG_DISPLAY_PROJECTION);
+                var step = steps[i];
                 if (i > 0){
                     uri += '_';
                 }
-                uri += step.lon + '_' + step.lat;
+                uri += step[0] + '_' + step[1];
             }
-            settings.permalink.updateLink();
+            // TODO ol3
+            // settings.permalink.updateLink();
             $.ajax({url: uri,
                     dataType: "json",
                     success: function (data) {
-                        settings.layerRoute.removeAllFeatures();
                         methods.redrawRoutingIcons();
                         methods.hideMessage();
                         if (!data.features.length){
@@ -2272,10 +2355,35 @@ function transform(obj) {
                         settings.current_routes_features = [];
                         for (var i = 0; i < data.features.length; i++) {
                             var feat = data.features[i];
-                            if(feat.type == 'LineString'){
+                            if(feat.geometry.type == 'LineString'){
                                 settings.current_routes_features.push(
-                                                        methods.putRoute(feat));
+                                                        methods.putRouting(feat));
                             } else {
+                                var point = new ol.geom.Point([
+                                          feat.geometry.coordinates[0],
+                                          feat.geometry.coordinates[1]
+                                    ]);
+                                point.transform(EPSG_DISPLAY_PROJECTION,
+                                                EPSG_PROJECTION);
+                                var feature = new ol.Feature({
+                                    geometry: point
+                                });
+
+                                feature.setStyle(
+                                    new ol.style.Style({
+                                        image: new ol.style.Circle({
+                                            fill:new ol.style.Fill(
+                                                {color: 'rgba(200, 0, 0, 0.9)'}),
+                                            stroke: new ol.style.Stroke({
+                                                color: 'rgba(255, 255, 255, 0.5)',
+                                                width: 4}),
+                                            radius: 6
+                                        })
+                                    })
+                                );
+
+                                settings.routingFeatures.push(feature);
+                                /*
                                 var lonlat = new OpenLayers.LonLat(
                                                   feat.geometry.coordinates[0],
                                                   feat.geometry.coordinates[1]);
@@ -2293,12 +2401,25 @@ function transform(obj) {
                                                                -icon_height))
                                              );
                                 settings.layerRouteMarker.addMarker(marker);
+                                */
                             }
                         }
                         if (data.message) methods.displayMessage(data.message);
-                        settings.map.zoomToExtent(
-                                settings.layerRoute.getDataExtent());
-                        settings.map.zoomOut();
+                        var v = settings.map.getView();
+                        // animation
+                        var pan = ol.animation.pan(
+                            {duration: settings.animation_duration,
+                             source: v.getCenter()})
+                        var zoom = ol.animation.zoom(
+                            {duration: settings.animation_duration,
+                             resolution: v.getResolution()})
+                        settings.map.beforeRender(pan, zoom);
+                        options = {};
+                        if ($("#panel").is(":visible")){
+                            options = {"padding": [0, 0, 0, $("#panel").width()]};
+                        }
+                        v.fit(settings.sourceRoutingFeatures.getExtent(),
+                              settings.map.getSize(), options);
                         $('#id_transport_it').find('span'
                                                     ).removeClass('selected');
                         $('#id_transport_it_'+data.properties.transport
@@ -2317,21 +2438,25 @@ function transform(obj) {
                             methods.updateRoutingInput();
                         }
                         // Added for mobile - START //
-                        //iOS
+                        // iOS
                         methods.connectWebViewJavascriptBridge(
                             function(bridge) {
-                                    if(!bridge){
-                                        bridge.init(function(message, responseCallback) {
-                                        if (responseCallback) {
-                                            responseCallback("Right back atcha");
-                                        }
-                                       });
-                                   }
-                            bridge.send('routeCalculated:'+data.properties.total);
-                            bridge.send('routeCalculatedDetail:'+data.properties.description);
-                        }); 
-                        //android
-                        window.JSInterface.routeCalculated(data.properties.total, data.properties.description);
+                                if(!bridge){
+                                    bridge.init(
+                                        function(message, responseCallback) {
+                                            if (responseCallback) {
+                                                responseCallback("Right back atcha");
+                                            }
+                                        });
+                                    }
+                                bridge.send('routeCalculated:'+data.properties.total);
+                                bridge.send('routeCalculatedDetail:'+data.properties.description);
+                            }
+                        );
+                        // Android
+                        if (typeof window.JSInterface != 'undefined')
+                            window.JSInterface.routeCalculated(
+                                data.properties.total, data.properties.description);
                         // Added for mobile - START //
                     },
                     error: function (jqXHR, textStatus, errorThrown) {
@@ -2339,7 +2464,6 @@ function transform(obj) {
                         methods.hideMessage();
                         console.log(errorThrown);
                         console.log(textStatus);
-                        settings.layerRoute.removeAllFeatures();
                         methods.displayMessage(routing_fail_message);
                     }
                 });
@@ -2348,7 +2472,25 @@ function transform(obj) {
         /*
         Put a route on the map
         */
-        putRoute: function(polyline) {
+        putRouting: function(polyline) {
+            var feat = new ol.format.GeoJSON().readFeature(polyline);
+            feat.setGeometry(transform(feat.getGeometry()));
+            feat.setStyle([
+                new ol.style.Style({
+                    stroke: new ol.style.Stroke({
+                      width: 5,
+                      color: 'rgba(203, 194, 185, 0.8)'
+                    })}),
+                new ol.style.Style({
+                    stroke: new ol.style.Stroke({
+                        width: 5, color: 'rgba(100, 100, 100, 1)',
+                        lineDash: [.9, 10]
+                    })})
+            ]);
+            settings.routingFeatures.push(feat);
+            return feat;
+
+            /*
             var point_array = new Array();
             for (i=0; i<polyline.coordinates.length; i++){
                 var point = new OpenLayers.Geometry.Point(polyline.coordinates[i][0],
@@ -2364,7 +2506,7 @@ function transform(obj) {
             current_route.style = style;
             current_route.geometry = linestring;
             settings.layerRoute.addFeatures([current_route]);
-            return current_route;
+            */
         },
         display_feature_detail: function (key, name) {
             /*
@@ -2597,22 +2739,16 @@ function transform(obj) {
             if (!settings.current_routes_features) {
                 return;
             }
-            var wkt = new OpenLayers.Format.WKT();
+            var wkt = new ol.format.WKT();
             var point_array = [];
             // not very effective...
             for (idx in settings.current_routes_features){
-                var c_geo = settings.current_routes_features[idx].geometry.clone();
-                c_geo = c_geo.transform(EPSG_PROJECTION,
-                                        EPSG_DISPLAY_PROJECTION);
-                var vertices = c_geo.getVertices();
-                for (idx_pt in vertices){
-                    var point = vertices[idx_pt];
-                    point = wkt.read(String(point));
-                    point_array.push(point.geometry);
+                var coords = settings.current_routes_features[idx].getGeometry().getCoordinates();
+                for (j in coords){
+                    point_array.push(transformCoordToLonLat(coords[j]));
                 }
             }
-            var linestring = new OpenLayers.Geometry.LineString(point_array);
-            jQuery('#id_route').val(String(linestring));
+            jQuery('#id_route').val(String(point_array));
         },
         updateGenInput: function(){
             var features = settings.editionSource.getFeatures();
@@ -2853,12 +2989,13 @@ function transform(obj) {
             }
         },
         updateNominatimName:function(lonlat, response_id){
+            var url = nominatim_url.substring(0, nominatim_url.length-6) + 'reverse/';
             $.ajax({
-                url: nominatim_url.substring(0, nominatim_url.length-6) + 'reverse',
+                url: url,
                 data: {
                     format: "json",
-                    lat:lonlat.lat,
-                    lon:lonlat.lon
+                    lat:lonlat[1],
+                    lon:lonlat[0]
                 },
                 dataType:'json',
                 success: function (vals) {
@@ -2867,37 +3004,42 @@ function transform(obj) {
                     $('#chimere_'+response_id).html(vals.display_name);
                     // Added for mobile - START //
                     if (response_id === 'start_label') {
-                        //iOS
+                        // iOS
                         methods.connectWebViewJavascriptBridge(
                             function(bridge) {
                                 if(!bridge){
-                                        bridge.init(function(message, responseCallback) {
-                                            if (responseCallback) {
-                                                responseCallback("Right back atcha");
-                                            }
-                                           });
-                                       }
-                                   bridge.send('updateFrom:'+vals.display_name);
-                           });
-                        //android
-                        window.JSInterface.updateFrom(vals.display_name);
+                                    bridge.init(function(message, responseCallback) {
+                                        if (responseCallback) {
+                                            responseCallback("Right back atcha");
+                                        }
+                                    });
+                                }
+                                bridge.send('updateFrom:'+vals.display_name);
+                            });
+                        // Android
+                        if (typeof window.JSInterface != 'undefined')
+                            window.JSInterface.updateFrom(vals.display_name);
                     } else if (response_id === 'end_label') {
-                        //iOS
+                        // iOS
                         methods.connectWebViewJavascriptBridge(
                             function(bridge) {
                                 if(!bridge){
-                                        bridge.init(function(message, responseCallback) {
-                                            if (responseCallback) {
-                                                responseCallback("Right back atcha");
-                                            }
-                                           });
-                                       }
-                                       bridge.send('updateTo:'+vals.display_name);
-                           }); 
-                           //android
-                              window.JSInterface.updateTo(vals.display_name);
+                                    bridge.init(function(message, responseCallback) {
+                                        if (responseCallback) {
+                                            responseCallback("Right back atcha");
+                                        }
+                                    });
+                                }
+                                bridge.send('updateTo:'+vals.display_name);
+                           });
+                        // Android
+                        if (typeof window.JSInterface != 'undefined')
+                           window.JSInterface.updateTo(vals.display_name);
                     }
                     // Added for mobile - END //
+                },
+                error: function(xhr, status, error) {
+                    console.log(url + ": " + error);
                 }
             });
         }
diff --git a/chimere/views.py b/chimere/views.py
index 8d32270..d4fa0bb 100644
--- a/chimere/views.py
+++ b/chimere/views.py
@@ -1025,7 +1025,7 @@ def route(request, area_name, lon1, lat1, lonlat_steps, lon2, lat2,
         steps = [float(lonlat) for lonlat in lonlat_steps.split('_') if lonlat]
         # regroup by 2
         steps = [(steps[i * 2], steps[i * 2 + 1])
-                 for i in range(len(steps) / 2)]
+                 for i in range(int(len(steps) / 2))]
     except ValueError:
         return HttpResponse('no results')
 
@@ -1050,9 +1050,11 @@ def route(request, area_name, lon1, lat1, lonlat_steps, lon2, lat2,
     total = jsonencoder.encode(total)
     desc = jsonencoder.encode(desc)
 
+    jsondecoder = json.JSONDecoder()
     # get associated POIs
     try:
-        route = GEOSGeometry(jsons[0])
+        route = GEOSGeometry(jsonencoder.encode(
+            jsondecoder.decode(jsons[0])['geometry']))
     except OGRException:
         return HttpResponse(_(u"Bad geometry"), status=500)
     cats = SubCategory.objects.filter(routing_warn=True)