Routing & UI improvment: first work on map menu

* add a map menu on the main interface
* add a new templatetag: map_menu
* add CHIMERE_ENABLE_ROUTING to settings
* add a routing settings (boolean) in jquery.chimere.js
* manage zoomin, zoomout, center in jquery.chimere.js

2 files changed, 70 insertions, 1 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index 71ca07b..66f2be5 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -413,6 +413,29 @@ ul#share li{
     padding-top:0;
 }
 
+#chimere_map_menu{
+    z-index:4;
+    display:none;
+    position:absolute;
+    padding:0.5em;
+    background-color:#fff;
+    border:1px solid #bbb;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+#chimere_map_menu ul, #chimere_map_menu li{
+    padding:0.2em;
+    margin:0;
+    list-style:none;
+}
+
+#chimere_map_menu li:hover{
+    cursor:pointer;
+    background-color:#ccc;
+}
+
 .simple #panel{
     top:5px;
 }
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 40f5ee2..1c2a973 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -81,6 +81,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             units: 'm',
             projection: new OpenLayers.Projection('EPSG:4326'),
             theme:null,
+            routing: false, // enable routing management
             current_feature: null, // To store the active POI
             current_control: null, // To store the current control
             current_popup: null, // To store the current POI popup displayed
@@ -119,6 +120,8 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                 map_options['restrictedExtent'] = settings.restricted_extent;
             }
 
+            settings.current_position = null;
+
             /* Create map object */
             settings.map = map = new OpenLayers.Map(map_element, map_options);
 
@@ -211,7 +214,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                 methods.loadGeoObjects();
                 // Hide popUp when clicking on map
                 settings.map.events.register('click', settings.map,
-                                             helpers.hidePopup);
+                                             methods.displayMapMenu);
             } else {
                 if (!settings.edition_type_is_route){
                     map.events.register('click', settings.map,
@@ -223,8 +226,50 @@ 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_center').bind("click", methods.mapCenter);
         }, // end of init
 
+        // zoom in from the map menu
+        zoomIn: function(){
+            methods.mapCenter();
+            settings.map.zoomIn();
+        },
+
+        // zoom out from the map menu
+        zoomOut: function(){
+            methods.mapCenter();
+            settings.map.zoomOut();
+        },
+
+        // center from the map menu
+        mapCenter: function(){
+            $('#chimere_map_menu').hide();
+            settings.map.setCenter(settings.current_position);
+        },
+
+        /*
+        * Display menu on the map
+        */
+        displayMapMenu: function(e) {
+            helpers.hidePopup();
+            if ($('#chimere_map_menu').is(":visible")){
+                $('#chimere_map_menu').hide();
+            } else{
+                settings.current_position =
+                                settings.map.getLonLatFromViewPortPx(e.xy);
+                var offsetX = e.pageX;
+                var offsetY = e.pageY;
+                $('#chimere_map_menu').show('fast');
+                $('#chimere_map_menu').css('display', 'block');
+                $('#chimere_map_menu').css('top', offsetY);
+                $('#chimere_map_menu').css('left', offsetX);
+            }
+        },
+
         /*
         * Load markers and route from DB
         */
@@ -383,6 +428,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                 }
                 else
                 {
+                    $('#chimere_map_menu').hide();
                     // Default popup
                     if (feature.popup && feature.popup.visible()) {
                         if (settings.current_popup == feature.popup) {