Add graphic scale (fixes #23)

frontend/app/map/map/map.js

@@ -5,6 +5,7 @@ import 'leaflet-almostover';
 import 'leaflet.locatecontrol';
 import 'leaflet.markercluster';
 import 'leaflet-mouse-position';
+import 'leaflet-graphicscale';
 
 
 fm.app.directive("facilmap", function(fmUtils, fmMapMessages, fmMapMarkers, $compile, fmMapLines, fmMapTypes, fmMapViews, $rootScope, fmMapPad, $timeout, $sce, fmMapHistory, $q, fmClient, fmInfoBox, fmMapRoute) {
@@ -136,6 +137,8 @@ fm.app.directive("facilmap", function(fmUtils, fmMapMessages, fmMapMarkers, $com
 			this.map.createPane("fmHighlightShadowPane");
 			this.map.createPane("fmHighlightPane");
 
+			this.map._controlCorners.bottomcenter = L.DomUtil.create("div", "leaflet-bottom fm-leaflet-center", this.map._controlContainer);
+
 			$scope.$watch("client.padData.clusterMarkers", (clusterMarkers) => {
 				var currentMarkers = this.markerCluster ? this.markerCluster.getLayers() : [ ];
 
@@ -170,6 +173,11 @@ fm.app.directive("facilmap", function(fmUtils, fmMapMessages, fmMapMarkers, $com
 				position: "bottomright"
 			}).addTo(this.map);
 
+			L.control.graphicScale({
+				fill: "hollow",
+				position: "bottomcenter"
+			}).addTo(this.map);
+
 			this.map.on('almost:over', (e) => {
 				e.layer.fire('fm-almostover', e);
 				$(this.map.getContainer()).addClass("fm-almostover");

frontend/app/map/map/map.scss

@@ -74,6 +74,18 @@
 	font-size: inherit;
 }
 
+.fm-leaflet-center {
+	left: 50%;
+	transform: translateX(-50%);
+	text-align: center;
+
+	.leaflet-control {
+		display: inline-block;
+		float: none;
+		clear: none;
+	}
+}
+
 .leaflet-control.leaflet-control-mouseposition {
 	float: left;
 	pointer-events: none;
@@ -88,6 +100,16 @@
 	}
 }
 
+.leaflet-control.leaflet-control-graphicscale {
+	margin-bottom: 0;
+	pointer-events: none;
+
+	.label {
+		color: #000;
+		text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 10px #fff;
+	}
+}
+
 .leaflet-fmHighlightMarker-pane {
 	z-index: 621;
 }

frontend/package.json

@@ -42,6 +42,7 @@
     "leaflet": "^1.0.3",
     "leaflet-almostover": "git+https://github.com/makinacorpus/Leaflet.AlmostOver.git#gh-pages",
     "leaflet-geometryutil": "^0.8.0",
+    "leaflet-graphicscale": "^0.0.2",
     "leaflet-hash": "^0.2.1",
     "leaflet-mouse-position": "^1.0.1",
     "leaflet-simple-graticule": "^1.0.2",

frontend/webpack.config.js

@@ -27,7 +27,8 @@ const addDeps = {
 	"leaflet.locatecontrol": [ "leaflet.locatecontrol/dist/L.Control.Locate.css" ],
 	"leaflet.markercluster": [ "leaflet.markercluster/dist/MarkerCluster.css", "leaflet.markercluster/dist/MarkerCluster.Default.css" ],
 	"leaflet.elevation": [ require.resolve("leaflet.elevation/dist/Leaflet.Elevation-0.0.2.css") ],
-	"leaflet-mouse-position": [ "leaflet-mouse-position/src/L.Control.MousePosition.css" ]
+	"leaflet-mouse-position": [ "leaflet-mouse-position/src/L.Control.MousePosition.css" ],
+	"leaflet-graphicscale": [ "leaflet-graphicscale/src/Leaflet.GraphicScale.scss" ]
 };
 
 for(let i in addDeps) {

frontend/yarn.lock

@@ -2739,6 +2739,10 @@ leaflet-geometryutil@^0.8.0:
   dependencies:
     leaflet ">=0.7.0"
 
+leaflet-graphicscale@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/leaflet-graphicscale/-/leaflet-graphicscale-0.0.2.tgz#ab620d289e9a7044c2f5107c83be17843aec5303"
+
 leaflet-hash@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/leaflet-hash/-/leaflet-hash-0.2.1.tgz#c36c718347c5243033b57cb4baea26119d82c701"