Avoid mousewheel/finger trap in the map

app/assets/javascripts/application.js

@@ -97,6 +97,7 @@
 //= require tag_autocomplete
 //= require polls_admin
 //= require leaflet
+//= require L.Control.Pan
 //= require map
 //= require polls
 //= require sortable

app/assets/javascripts/map.js

@@ -19,7 +19,7 @@
         getPopupContent, latitudeInputSelector, longitudeInputSelector, map, mapAttribution, mapCenterLatLng,
         mapCenterLatitude, mapCenterLongitude, mapTilesProvider, marker, markerIcon, markerLatitude,
         markerLongitude, moveOrPlaceMarker, openMarkerPopup, removeMarker, removeMarkerSelector,
-        updateFormfields, zoom, zoomInputSelector;
+        updateFormfields, zoom, zoomInputSelector, mapOptions;
       App.Map.cleanInvestmentCoordinates(element);
       mapTilesProvider = $(element).data("map-tiles-provider");
       mapAttribution = $(element).data("map-tiles-provider-attribution");
@@ -113,11 +113,20 @@
           }
         });
       };
+      mapOptions = function() {
+        var options;
+        if (L.Browser.mobile) {
+          options = { dragging: false, tap: false };
+        } else {
+          options = { scrollWheelZoom: false };
+        }
+        return { ...options, panControl: true }
+      };
       getPopupContent = function(data) {
         return "<a href='/budgets/" + data.budget_id + "/investments/" + data.investment_id + "'>" + data.investment_title + "</a>";
       };
       mapCenterLatLng = new L.LatLng(mapCenterLatitude, mapCenterLongitude);
-      map = L.map(element.id).setView(mapCenterLatLng, zoom);
+      map = L.map(element.id, mapOptions()).setView(mapCenterLatLng, zoom);
       App.Map.maps.push(map);
       L.tileLayer(mapTilesProvider, {
         attribution: mapAttribution

app/assets/stylesheets/application.scss

@@ -11,6 +11,8 @@
 @import "jquery-ui/datepicker";
 @import "jquery-ui/sortable";
 @import "leaflet";
+@import "L.Control.Pan";
+@import "L.Control.Pan.ie";
 
 @import "foundation_and_overrides";
 @import "fonts";

spec/shared/system/mappable.rb

@@ -290,6 +290,18 @@
 
       expect(page).not_to have_css(".map_location")
     end
+
+    scenario "Should display controls to move the map" do
+      arguments[:id] = mappable.id
+
+      do_login_for(user) if management
+      visit send(mappable_show_path, arguments)
+
+      expect(page).to have_css(".leaflet-control-pan-up")
+      expect(page).to have_css(".leaflet-control-pan-down")
+      expect(page).to have_css(".leaflet-control-pan-left")
+      expect(page).to have_css(".leaflet-control-pan-right")
+    end
   end
 end
 

vendor/assets/javascripts/L.Control.Pan.js

@@ -0,0 +1,96 @@
+(function (factory) {
+	// Packaging/modules magic dance
+	var L;
+	if (typeof define === 'function' && define.amd) {
+		// AMD
+		define(['leaflet'], factory);
+	} else if (typeof module !== 'undefined') {
+		// Node/CommonJS
+		L = require('leaflet');
+		module.exports = factory(L);
+	} else {
+		// Browser globals
+		if (typeof window.L === 'undefined')
+			throw 'Leaflet must be loaded first';
+		factory(window.L);
+	}
+}(function (L) {
+	'use strict';
+	L.Control.Pan = L.Control.extend({
+		options: {
+			position: 'topleft',
+			panOffset: 500
+		},
+
+		onAdd: function (map) {
+			var className = 'leaflet-control-pan',
+				container = L.DomUtil.create('div', className),
+				verticalOffset = map.getContainer().offsetHeight / 2,
+				horizontalOffset = map.getContainer().offsetWidth / 3;
+
+			this._panButton('Up'   , className + '-up',
+							container, map, new L.Point(    0 , -verticalOffset));
+			this._panButton('Left' , className + '-left',
+							container, map, new L.Point( -horizontalOffset ,  0));
+			this._panButton('Right', className + '-right',
+							container, map, new L.Point(  horizontalOffset ,  0));
+			this._panButton('Down' , className + '-down',
+							container, map, new L.Point(    0 ,  verticalOffset));
+
+			// Add pan control class to the control container
+			if (this.options.position === 'topleft') {
+				var controlContainer = L.DomUtil.get(map._controlCorners.topleft);
+			} else if (this.options.position === 'topright') {
+				var controlContainer = L.DomUtil.get(map._controlCorners.topright);
+			} else if (this.options.position === 'bottomleft') {
+				var controlContainer = L.DomUtil.get(map._controlCorners.bottomleft);
+			} else {
+				var controlContainer = L.DomUtil.get(map._controlCorners.bottomright);
+			}
+			if(!L.DomUtil.hasClass(controlContainer, 'has-leaflet-pan-control')) {
+				L.DomUtil.addClass(controlContainer, 'has-leaflet-pan-control');
+			}
+
+			return container;
+		},
+
+		onRemove: function (map) {
+			// Remove pan control class to the control container
+			var controlContainer = L.DomUtil.get(map._controlCorners.topleft);
+			if(L.DomUtil.hasClass(controlContainer, 'has-leaflet-pan-control')) {
+				L.DomUtil.removeClass(controlContainer, 'has-leaflet-pan-control');
+			}
+		},
+
+		_panButton: function (title, className, container, map, offset) {
+			var wrapper = L.DomUtil.create('div', className + '-wrap', container);
+			var link = L.DomUtil.create('a', className, wrapper);
+			link.href = '#';
+			link.title = title;
+			L.DomEvent
+				.on(link, 'click', L.DomEvent.stopPropagation)
+				.on(link, 'click', L.DomEvent.preventDefault)
+				.on(link, 'click', function(){ map.panBy(offset); }, map)
+				.on(link, 'dblclick', L.DomEvent.stopPropagation);
+
+			return link;
+		}
+	});
+
+	L.Map.mergeOptions({
+		panControl: false
+	});
+
+	L.Map.addInitHook(function () {
+		if (this.options.panControl) {
+			this.panControl = new L.Control.Pan();
+			this.addControl(this.panControl);
+		}
+	});
+
+	L.control.pan = function (options) {
+		return new L.Control.Pan(options);
+	};
+
+	return L.Control.Pan;
+}));

vendor/assets/stylesheets/L.Control.Pan.css

@@ -0,0 +1,147 @@
+/* Make the default zoom control align with the pan control.
+
+   This is ugly.
+   The parent box (class="leaflet-top leaflet-left")
+   should make all the child boxes be center-aligned instead.
+   Not sure if that is possible though.
+*/
+.leaflet-left.has-leaflet-pan-control .leaflet-control-zoom {
+	position: relative;
+	left: 24px;
+}
+.leaflet-right.has-leaflet-pan-control .leaflet-control-zoom {
+	position: relative;
+	right: 24px;
+}
+
+/*
+   Make the zoomSlider control
+   (https://github.com/mattiasbengtsson/Leaflet.zoomslider)
+   align with the pan control.
+*/
+.leaflet-left.has-leaflet-pan-control .leaflet-control-zoomslider {
+	position: relative;
+	left: 22px;
+}
+.leaflet-right.has-leaflet-pan-control .leaflet-control-zoomslider {
+	position: relative;
+	right: 22px;
+}
+
+.leaflet-control-pan  {
+	   /*
+	     .leaflet-control-pan-right-wrap: right
+	   + .leaflet-control-pan a: width
+	   = 52 + 24 = 76
+	   */
+	width: 76px;
+	   /*
+	     .leaflet-control-pan-down-wrap: top
+	   + .leaflet-control-pan a: height
+	   = 52 + 24 = 76
+	   */
+	height: 76px;
+}
+
+.leaflet-control-pan > div {
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+}
+.leaflet-control-pan > div {
+  box-shadow: 0 1px 7px rgba(0,0,0,0.65);
+}
+.leaflet-control-pan a {
+    background-color: #fff;
+}
+.leaflet-control-pan a{
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    display: block;
+}
+.leaflet-control-pan a {
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    width: 23px;
+    height: 23px;
+}
+.leaflet-control-pan a:hover {
+    background-color: #f4f4f4;
+}
+
+.leaflet-control-pan-up-wrap {
+	position:absolute;
+	left:26px;
+}
+.leaflet-control-pan-left-wrap {
+	position:absolute;
+	top:26px;
+}
+.leaflet-control-pan-right-wrap {
+	position:absolute;
+	left:52px;
+	top:26px;
+}
+.leaflet-control-pan-down-wrap {
+	position:absolute;
+	left:26px;
+	top:52px;
+}
+
+.leaflet-control-pan-up {
+	background-image: image-url("L.Control.Pan/pan-up.png");
+}
+.leaflet-control-pan-left {
+	background-image: image-url("L.Control.Pan/pan-left.png");
+}
+.leaflet-control-pan-right {
+	background-image: image-url("L.Control.Pan/pan-right.png");
+}
+.leaflet-control-pan-down {
+	background-image: image-url("L.Control.Pan/pan-down.png");
+}
+
+/****** Touch Alterations ******/
+.leaflet-touch .leaflet-control-pan div {
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  box-shadow: none;
+
+  border-radius: 4px;
+}
+
+.leaflet-touch .leaflet-control-pan {
+  width: 89px;
+  height: 119px;
+  margin-left: 8px;
+}
+
+.leaflet-touch .leaflet-right .leaflet-control-pan {
+  margin-left: 0;
+  margin-right: 5px;
+}
+
+.leaflet-touch .leaflet-control-pan a {
+  width: 30px;
+  height: 30px;
+
+  border-radius: 4px;
+}
+
+.leaflet-touch .leaflet-control-pan-up-wrap {
+  left:26px;
+}
+
+.leaflet-touch .leaflet-control-pan-left-wrap {
+  top:40px;
+}
+
+.leaflet-touch .leaflet-control-pan-right-wrap {
+  left:52px;
+  top:40px;
+}
+
+.leaflet-touch .leaflet-control-pan-down-wrap {
+  left:26px;
+  top:80px;
+}

vendor/assets/stylesheets/L.Control.Pan.ie.css

@@ -0,0 +1,40 @@
+
+.leaflet-control-pan > div {
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3F000000',EndColorStr='#3F000000');
+  border: 3px solid #999;
+}
+.leaflet-control-pan a {
+	background-color: #fff;
+  width: 17px;
+  height: 17px;
+}
+.leaflet-control-pan a:hover {
+  background-color: #f4f4f4;
+}
+
+.leaflet-control-pan-up-wrap {
+	position:absolute;
+	left:27px;
+}
+.leaflet-control-pan-left-wrap {
+	position:absolute;
+	top:27px;
+}
+.leaflet-control-pan-right-wrap {
+	position:absolute;
+	left:54px;
+	top:27px;
+}
+.leaflet-control-pan-down-wrap {
+	position:absolute;
+	left:27px;
+	top:54px;
+}
+
+.leaflet-control-zoom {
+	left:23px;
+}
+.leaflet-control-zoomslider {
+	position: relative;
+	left:23px;
+}