Implemented right-click context menu

Vendorfile

@@ -20,6 +20,11 @@ folder 'vendor/assets' do
       file "images/#{image}", "http://cdn.leafletjs.com/leaflet-0.7.3/images/#{image}"
     end
 
+    from 'git://github.com/aratcliffe/Leaflet.contextmenu.git' do
+      file 'leaflet.contextmenu.js', 'dist/leaflet.contextmenu.js'
+      file 'leaflet.contextmenu.css', 'dist/leaflet.contextmenu.css'
+    end
+
     from 'git://github.com/kajic/leaflet-locationfilter.git' do
       file 'leaflet.locationfilter.css', 'src/locationfilter.css'
       file 'leaflet.locationfilter.js', 'src/locationfilter.js'

app/assets/javascripts/index.js

@@ -7,6 +7,8 @@
 //= require leaflet.share
 //= require leaflet.polyline
 //= require leaflet.query
+//= require leaflet.contextmenu
+//= require index/contextmenu
 //= require index/search
 //= require index/browse
 //= require index/export
@@ -75,9 +77,42 @@ $(document).ready(function () {
 
   var params = OSM.mapParams();
 
+  // TODO internationalisation of the context menu strings
   var map = new L.OSM.Map("map", {
     zoomControl: false,
-    layerControl: false
+    layerControl: false,
+    contextmenu: true,
+    contextmenuWidth: 140,
+    contextmenuItems: [{
+        text: 'Directions from here',
+        callback: function(e){ context_directionsfrom(e, map); }
+    }, {
+        text: 'Directions to here',
+        callback: function(e){ context_directionsto(e, map); }
+    }, '-', {
+        text: 'Add a note here',
+        callback: function(e){ context_addnote(e, map); }
+    }, {
+        text: 'Show address',
+        callback: function(e){ context_describe(e, map); }
+    }, {
+        text: 'Query features',
+        callback: function(e){ context_queryhere(e, map); }
+    }, {
+        text: 'Centre map here',
+        callback: function(e){ context_centrehere(e, map); }
+    }]
+  });
+
+  $(document).on('mousedown', function(e){
+    if(e.shiftKey){
+      map.contextmenu.disable(); // on firefox, shift disables our contextmenu. we explicitly do this for all browsers.
+    }else{
+      map.contextmenu.enable();
+      // we also decide whether to disable some options that only like high zoom
+      map.contextmenu.setDisabled(3, map.getZoom() < 12);
+      map.contextmenu.setDisabled(5, map.getZoom() < 14);
+    }
   });
 
   map.attributionControl.setPrefix('');

app/assets/javascripts/index/contextmenu.js

@@ -0,0 +1,46 @@
+  var context_describe = function(e, map){
+    var precision = OSM.zoomPrecision(map.getZoom()),
+      latlng = e.latlng.wrap(),
+      lat = latlng.lat.toFixed(precision),
+      lng = latlng.lng.toFixed(precision);
+    OSM.router.route("/search?query=" + encodeURIComponent(lat + "," + lng));
+  };
+
+  var context_directionsfrom = function(e, map){
+    var precision = OSM.zoomPrecision(map.getZoom()),
+      latlng = e.latlng.wrap(),
+      lat = latlng.lat.toFixed(precision),
+      lng = latlng.lng.toFixed(precision);
+    OSM.router.route("/directions?" + querystring.stringify({
+      route: lat + ',' + lng + ';' + $('#route_to').val()
+    }));
+  };
+
+  var context_directionsto = function(e, map){
+    var precision = OSM.zoomPrecision(map.getZoom()),
+      latlng = e.latlng.wrap(),
+      lat = latlng.lat.toFixed(precision),
+      lng = latlng.lng.toFixed(precision);
+    OSM.router.route("/directions?" + querystring.stringify({
+      route: $('#route_from').val() + ';' + lat + ',' + lng
+    }));
+  };
+
+  var context_addnote = function(e, map){
+    // I'd like this, instead of panning, to pass a query parameter about where to place the marker
+    map.panTo(e.latlng.wrap(), {animate: false});
+    OSM.router.route('/note/new');
+  };
+
+  var context_centrehere = function(e, map){
+    map.panTo(e.latlng);
+  };
+
+  var context_queryhere = function(e, map) {
+    var precision = OSM.zoomPrecision(map.getZoom()),
+      latlng = e.latlng.wrap(),
+      lat = latlng.lat.toFixed(precision),
+      lng = latlng.lng.toFixed(precision);
+    OSM.router.route("/query?lat=" + lat + "&lon=" + lng);
+  };
+

app/assets/stylesheets/leaflet-all.scss

@@ -1,6 +1,7 @@
 /*
  *= require leaflet
  *= require leaflet.locationfilter
+ *= require leaflet.contextmenu
  */
 
 /* Override to serve images through the asset pipeline. */

vendor/assets/leaflet/leaflet.contextmenu.css

@@ -0,0 +1,54 @@
+.leaflet-contextmenu {
+    display: none;
+	box-shadow: 0 1px 7px rgba(0,0,0,0.4);
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+    padding: 4px 0;
+    background-color: #fff;
+    cursor: default;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.leaflet-contextmenu a.leaflet-contextmenu-item {
+    display: block;
+    color: #222;
+    font-size: 12px;
+    line-height: 20px;
+    text-decoration: none;
+    padding: 0 12px;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+    cursor: default;
+    outline: none;
+}
+
+.leaflet-contextmenu a.leaflet-contextmenu-item-disabled {
+    opacity: 0.5;
+}
+
+.leaflet-contextmenu a.leaflet-contextmenu-item.over {
+    background-color: #f4f4f4;
+    border-top: 1px solid #f0f0f0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.leaflet-contextmenu a.leaflet-contextmenu-item-disabled.over {
+    background-color: inherit;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+}
+
+.leaflet-contextmenu-icon {
+    margin: 2px 8px 0 0;
+    width: 16px;
+    height: 16px;
+    float: left;
+    border: 0;
+}
+
+.leaflet-contextmenu-separator {
+    border-bottom: 1px solid #ccc;
+    margin: 5px 0;
+}