feat: add ruler to measure distances (#279)

Author: maurerle

assets/fonts/meshviewer.ttf

@@ -26,7 +26,6 @@ $cache-breaker: string.unique-id();
     font-variant: normal;
     font-weight: normal;
     line-height: 1;
-    speak: none;
     text-rendering: auto;
     text-transform: none;
     vertical-align: 0;
@@ -56,3 +55,4 @@ $cache-breaker: string.unique-id();
 @include icon.icon("arrow-right-c", "\f10b");
 @include icon.icon("full-enter", "\e901");
 @include icon.icon("full-exit", "\e900");
+@include icon.icon("ruler", "\f333");

assets/fonts/meshviewer.woff

@@ -63,6 +63,24 @@ let CoordsPickerButton = ButtonBase.extend({
   },
 });
 
+let RulerButton = ButtonBase.extend({
+  onAdd: function () {
+    let button = L.DomUtil.create("button", "ion-ruler");
+    button.setAttribute("aria-label", _.t("button.ruler"));
+    L.DomEvent.disableClickPropagation(button);
+    L.DomEvent.addListener(button, "click", this.onClick, this);
+
+    this.button = button;
+
+    return button;
+  },
+
+  onClick: function (e) {
+    L.DomEvent.stopPropagation(e);
+    this.f(!this.active);
+  },
+});
+
 export const Button = function (map, buttons) {
   let userLocation;
   const self = {
@@ -103,6 +121,99 @@ export const Button = function (map, buttons) {
     }
   });
 
+  // Ruler / measure distances button
+  let rulerButton = new RulerButton(function (activate) {
+    if (activate) {
+      enableRuler();
+    } else {
+      disableRuler();
+    }
+  });
+
+  let rulerLayerGroup = null;
+  let rulerMarkers = [];
+  let rulerLines = null;
+  let rulerLinesBg = null;
+  let rulerDistancePopups = [];
+
+  function formatDistance(m) {
+    if (m >= 1000) {
+      return (m / 1000).toFixed(2) + " km";
+    }
+    return Math.round(m) + " m";
+  }
+
+  function enableRuler() {
+    // create layer group for ruler markers/lines
+    rulerLayerGroup = L.layerGroup().addTo(map);
+    rulerLinesBg = L.polyline([], {
+      color: "#fff",
+      weight: 3,
+    }).addTo(rulerLayerGroup);
+    rulerLines = L.polyline([], { color: "#000", weight: 2, dashArray: "4" }).addTo(rulerLayerGroup);
+    rulerMarkers = [];
+    rulerDistancePopups = [];
+
+    map.getContainer().classList.add("measure-active");
+    map.on("click", onRulerClick);
+    rulerButton.set(true);
+  }
+
+  function disableRuler() {
+    map.getContainer().classList.remove("measure-active");
+    map.off("click", onRulerClick);
+
+    if (rulerLayerGroup) {
+      map.removeLayer(rulerLayerGroup);
+      rulerLayerGroup = null;
+    }
+    rulerMarkers = [];
+    rulerLines = null;
+    rulerLinesBg = null;
+    rulerDistancePopups = [];
+
+    rulerButton.set(false);
+  }
+
+  function onRulerClick(e) {
+    let latlng = e.latlng;
+    let config = window.config;
+    let marker = L.circleMarker(latlng, {
+      radius: 5,
+      color: config.map && config.map.labelNewColor ? config.map.labelNewColor : "#333",
+    }).addTo(rulerLayerGroup);
+    rulerMarkers.push(marker);
+
+    // add to polyline
+    let latlngs = rulerLines.getLatLngs();
+    latlngs.push(latlng);
+    rulerLines.setLatLngs(latlngs);
+    rulerLinesBg.setLatLngs(latlngs);
+
+    // compute segment distance and total distance
+    let last = null;
+    if (latlngs.length >= 2) {
+      last = latlngs[latlngs.length - 2];
+      let segDist = latlng.distanceTo(latlngs[latlngs.length - 2]);
+      // show popup at midpoint for segment
+      let midLat = (latlng.lat + last.lat) / 2;
+      let midLng = (latlng.lng + last.lng) / 2;
+
+      // compute total
+      let total = 0;
+      for (let i = 1; i < latlngs.length; i++) {
+        total += latlngs[i].distanceTo(latlngs[i - 1]);
+      }
+
+      let popup = L.popup({ closeButton: false, autoClose: false, className: "ruler-popup" })
+        .setLatLng([midLat, midLng])
+        .setContent("<strong>" + formatDistance(segDist) + "</strong><br/>" + formatDistance(total))
+        .addTo(rulerLayerGroup);
+
+      rulerDistancePopups.push(popup);
+    }
+  }
+
   function enableTracking() {
     map.locate({
       watch: true,
@@ -154,6 +265,7 @@ export const Button = function (map, buttons) {
   self.init = function init() {
     addButton(locateUserButton);
     addButton(showCoordsPickerButton);
+    addButton(rulerButton);
   };
 
   return self;

assets/fonts/meshviewer.woff2

@@ -63,9 +63,10 @@
   },
   "button": {
     "switchView": "Ansicht wechseln",
-    "location": "Koordinaten wählen",
+    "fullscreen": "Vollbildmodus wechseln",
     "tracking": "Lokalisierung",
-    "fullscreen": "Vollbildmodus wechseln"
+    "location": "Koordinaten wählen",
+    "ruler": "Lineal"
   },
   "momentjs": {
     "calendar": {

assets/icons/icon.scss

@@ -63,9 +63,10 @@
   },
   "button": {
     "switchView": "Switch view",
-    "location": "Pick coordinates",
+    "fullscreen": "Toggle fullscreen",
     "tracking": "Localisation",
-    "fullscreen": "Toggle fullscreen"
+    "location": "Pick coordinates",
+    "ruler": "Ruler"
   },
   "momentjs": {
     "calendar": {

lib/map/button.js

@@ -62,8 +62,10 @@
   },
   "button": {
     "switchView": "Basculer l’affichage",
+    "fullscreen": "Vollbildmodus wechseln",
+    "tracking": "Localisation",
     "location": "Choisir les coordonnées",
-    "tracking": "Localisation"
+    "ruler": "Règle"
   },
   "momentjs": {
     "calendar": {

public/locale/de.json

@@ -535,3 +535,9 @@
     }
   }
 }
+
+.leaflet-popup-content-wrapper {
+  background: variables.$color-white;
+  border-radius: 5px;
+  text-align: center;
+}

public/locale/en.json

@@ -62,6 +62,12 @@ variables.$color-online: color.adjust(variables.$color-online, $lightness: 25%);
     }
   }
 
+  .leaflet-popup-content-wrapper {
+    background: color.adjust(variables.$color-white, $lightness: 10%);
+    border-radius: 5px;
+    text-align: center;
+  }
+
   .leaflet-control-layers {
     &.leaflet-control {
       opacity: 0.9;