First working version of routing.

* add an utilitary Routing class to manage different routing system
* implement the routing with routino
* add a view to manage routes
* itinerary panel template
* JS management of routing:
  * manage flag markers on the map
  * request the route when start and finish flag are set
  * display the route and the itinerary description
* add of two flags images
* itinerary panel CSS
* french translation update

5 files changed, 144 insertions, 12 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index 66f2be5..61dcc4e 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -15,7 +15,8 @@ a, a:link, a:visited, legend,
 
 h2, h3, th, .action li, .action li a,
 .action li li a, #no-js-message,
-#footer a, #footer a:link, #footer a:visited, .ui-widget-header{
+#footer a, #footer a:link, #footer a:visited, .ui-widget-header,
+#chimere_itinerary td.l{
     color:#fff;
 }
 
@@ -29,7 +30,10 @@ h2, h3, th, .action li, .action li a,
 
 body, h2, h3, th,
 .ui-widget-header,
-.action li.selected, #no-js-message{
+.action li.selected, #no-js-message,
+#content .olControlLayerSwitcher .layersDiv,
+#content .olControlLayerSwitcher span,
+#chimere_itinerary td.l{
     background-color:#449506;
 }
 
@@ -38,7 +42,7 @@ body, h2, h3, th,
 }
 
 fieldset, .action li, #content,
-#map-footer, #panel, #areas,
+#map-footer, #panel, #chimere_itinerary_panel, #areas,
 #welcome, #detail, .detail_footer a,
 #content .olControlLayerSwitcher .layersDiv,
 #content .olControlLayerSwitcher span,
@@ -63,7 +67,7 @@ div.warning,
 #content,
 .action li.selected,
 #content .olControlLayerSwitcher .layersDiv,
-#panel, #map-footer,
+#panel, #map-footer, #chimere_itinerary_panel,
 #utils-div{
     border:1px solid #327e04;
 }
@@ -79,7 +83,7 @@ div.warning,
     opacity:0.9;
 }
 
-#panel, #areas, #detail, #category_detail{
+#panel, #areas, #detail, #category_detail, #chimere_itinerary_panel{
     opacity:0.8;
 }
 
@@ -413,6 +417,33 @@ ul#share li{
     padding-top:0;
 }
 
+#chimere_itinerary_panel{
+    position:absolute;
+    z-index:5;
+    top:50px;
+    left:50px;
+    width:300px;
+    padding:0.5em;
+    padding-top:0;
+    display:none;
+}
+
+#chimere_itinerary{
+    height:250px;
+    overflow:auto;
+    padding:0.2em 1em;
+    font-size:0.9em;
+}
+
+#chimere_itinerary td.l{
+    padding:6px;
+}
+
+#chimere_itinerary span.j{
+    font-style:italic;
+}
+
+
 #chimere_map_menu{
     z-index:4;
     display:none;
@@ -420,9 +451,9 @@ ul#share li{
     padding:0.5em;
     background-color:#fff;
     border:1px solid #bbb;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
+    -webkit-border-radius: 0 8px 8px 8px;
+    -moz-border-radius: 0 8px 8px 8px;
+    border-radius: 0 8px 8px 8px;
 }
 
 #chimere_map_menu ul, #chimere_map_menu li{
diff --git a/chimere/static/chimere/img/flag-finish.png b/chimere/static/chimere/img/flag-finish.png
new file mode 100644
index 0000000..04bfa1d
--- /dev/null
+++ b/chimere/static/chimere/img/flag-finish.png
diff --git a/chimere/static/chimere/img/flag-start.png b/chimere/static/chimere/img/flag-start.png
new file mode 100644
index 0000000..c93f2a3
--- /dev/null
+++ b/chimere/static/chimere/img/flag-start.png
diff --git a/chimere/static/chimere/img/images_licences b/chimere/static/chimere/img/images_licences
index 0e732fc..000fdf0 100644
--- a/chimere/static/chimere/img/images_licences
+++ b/chimere/static/chimere/img/images_licences
@@ -30,3 +30,10 @@ Url 2: http://commons.wikimedia.org/wiki/File:Internet-web-browser.svg
 Author: Sbrools
 Licence: Public domain
 Url: https://commons.wikimedia.org/wiki/File:8thNote.svg
+
+* Flags image credit (flag-start.png, flag-finish.png)
+
+Author: FatCow Web Hosting
+Licence: Creative Commons Attribution 3.0 United States license
+Url: https://upload.wikimedia.org/wikipedia/commons/6/64/Farm-Fresh_flag_finish.png
+     https://upload.wikimedia.org/wikipedia/commons/c/cb/Farm-Fresh_flag_1.png
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 1c2a973..3ffb1f9 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -226,11 +226,30 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                         settings.layerVectors, helpers.featureRouteCreated);
                 }
             }
-            $('#chimere_map_menu #map_menu_zoomin').bind("click",
-                                                         methods.zoomIn);
-            $('#chimere_map_menu #map_menu_zoomout').bind("click",
-                                                          methods.zoomOut);
+            $('#map_menu_zoomin').bind("click", methods.zoomIn);
+            $('#map_menu_zoomout').bind("click", methods.zoomOut);
             $('#map_menu_center').bind("click", methods.mapCenter);
+            if (settings.routing){
+                settings.routing_start = null;
+                settings.routing_end = null;
+                settings.icon_start = new OpenLayers.Icon(
+                    STATIC_URL + "chimere/img/flag-start.png",
+                    new OpenLayers.Size(32, 32),
+                    new OpenLayers.Pixel(0, -32));
+                settings.icon_end = new OpenLayers.Icon(
+                    STATIC_URL + "chimere/img/flag-finish.png",
+                    new OpenLayers.Size(32, 32),
+                    new OpenLayers.Pixel(0, -32));
+                $('#map_menu_from').bind("click", methods.routingFrom);
+                $('#map_menu_to').bind("click", methods.routingTo);
+                settings.layerRoute = new OpenLayers.Layer.Vector("Route Layer");
+                settings.map.addLayer(settings.layerRoute);
+                settings.layerRoute.setOpacity(0.8);
+                settings.layerRouteMarker = new OpenLayers.Layer.Markers(
+                                                               'Route markers');
+                settings.map.addLayer(settings.layerRouteMarker);
+                settings.layerRouteMarker.setOpacity(0.8);
+            }
         }, // end of init
 
         // zoom in from the map menu
@@ -494,6 +513,81 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             settings.current_feature.geometry = linestring;
             settings.layerVectors.addFeatures([settings.current_feature]);
         },
+        // set the start point for routing
+        routingFrom: function(){
+            $('#chimere_map_menu').hide();
+            $('#chimere_itinerary_panel').hide();
+            settings.routing_start = new OpenLayers.Marker(
+                                          settings.current_position.clone(),
+                                          settings.icon_start);
+            settings.layerRouteMarker.addMarker(settings.routing_start);
+            if (settings.routing_end) methods.route();
+        },
+
+        // set the finish point for routing
+        routingTo: function(){
+            $('#chimere_map_menu').hide();
+            $('#chimere_itinerary_panel').hide();
+            settings.routing_end = new OpenLayers.Marker(
+                                          settings.current_position.clone(),
+                                          settings.icon_end);
+            settings.layerRouteMarker.addMarker(settings.routing_end);
+            if (settings.routing_start) methods.route();
+        },
+
+        // display a route
+        route: function(){
+            if (!settings.routing_start || !settings.routing_end){
+                return;
+            }
+            var start = settings.routing_start.lonlat.clone().transform(
+                                            settings.map.getProjectionObject(),
+                                            EPSG_DISPLAY_PROJECTION);
+            var end = settings.routing_end.lonlat.clone().transform(
+                                            settings.map.getProjectionObject(),
+                                            EPSG_DISPLAY_PROJECTION);
+            var uri = extra_url + "route/"
+                                + start.lon + '_'
+                                + start.lat + '_'
+                                + end.lon + '_'
+                                + end.lat;
+            $.ajax({url: uri, 
+                    dataType: "json",
+                    success: function (data) {
+                        settings.layerRoute.removeAllFeatures();
+                        for (var i = 0; i < data.features.length; i++) {
+                            methods.putRoute(data.features[i]);
+                        }
+                        $('#chimere_itinerary').html(
+                                            data.properties.description);
+                        $('#chimere_itinerary_panel').show();
+                    },
+                    error: function (data) {
+                        settings.layerRoute.removeAllFeatures();
+                    }
+                });
+
+        },
+        /*
+        Put a route on the map
+        */
+        putRoute: function(polyline) {
+            var point_array = new Array();
+            for (i=0; i<polyline.coordinates.length; i++){
+                var point = new OpenLayers.Geometry.Point(polyline.coordinates[i][0],
+                                                          polyline.coordinates[i][1]);
+                point_array.push(point);
+            }
+            var linestring = new OpenLayers.Geometry.LineString(point_array);
+            linestring.transform(EPSG_DISPLAY_PROJECTION, settings.map.getProjectionObject());
+            current_route = new OpenLayers.Feature.Vector();
+            var style = OpenLayers.Util.extend({},
+                                     OpenLayers.Feature.Vector.style['default']);
+            style.strokeWidth = 3;
+            current_route.style = style;
+            current_route.geometry = linestring;
+            settings.layerRoute.addFeatures([current_route]);
+        },
         display_feature_detail: function (pk) {
             /*
             * update current detail panel with an AJAX request