Add a measurement control

index.php

@@ -42,10 +42,12 @@ html_export_var(array(
   <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
   <link rel="stylesheet" href="node_modules/leaflet-geosearch/assets/css/leaflet.css" />
   <link rel="stylesheet" href="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
+  <link rel="stylesheet" href="node_modules/leaflet.polylinemeasure/Leaflet.PolylineMeasure.css" />
   <script src="node_modules/leaflet/dist/leaflet.js"></script>
   <script src="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.js"></script>
   <script src="node_modules/leaflet-textpath/leaflet.textpath.js"></script>
   <script src="node_modules/leaflet-polylineoffset/leaflet.polylineoffset.js"></script>
+  <script src="node_modules/leaflet.polylinemeasure/Leaflet.PolylineMeasure.js"></script>
   <?php print modulekit_to_javascript(); /* pass modulekit configuration to JavaScript */ ?>
   <?php print modulekit_include_js(); /* prints all js-includes */ ?>
   <?php print modulekit_include_css(); /* prints all css-includes */ ?>

package.json

@@ -20,6 +20,7 @@
     "leaflet-polylineoffset": "^1.1.0",
     "leaflet-textpath": "https://github.com/makinacorpus/Leaflet.TextPath#leaflet0.8-dev",
     "leaflet.locatecontrol": "^0.61.0",
+    "leaflet.polylinemeasure": "https://github.com/ppete2/Leaflet.PolylineMeasure.git",
     "modulekit-tabs": "^0.1.0",
     "moment": "^2.18.1",
     "opening_hours": "^3.5.0",

src/index.js

@@ -52,6 +52,12 @@ window.onload = function () {
 }
 
 function onload2 (initState) {
+  // Measurement plugin
+  if (L.control.polylineMeasure) {
+    L.control.polylineMeasure({
+    }).addTo(map);
+  }
+
   // Add Geo Search
   var provider = new LeafletGeoSearch.OpenStreetMapProvider()
   var searchControl = new LeafletGeoSearch.GeoSearchControl({