Location picker

lib/map.js

@@ -6,6 +6,45 @@ define(["map/clientlayer", "map/labelslayer",
                     zoomControl: false
                   }
 
+    var CoordsButton = L.Control.extend({
+      options: {
+        position: "bottomright"
+      },
+
+      active: false,
+      button: undefined,
+
+      initialize: function (f, options) {
+        L.Util.setOptions(this, options)
+        this.f = f
+      },
+
+      onAdd: function () {
+        var button = L.DomUtil.create("button", "show-coords")
+
+        L.DomEvent.disableClickPropagation(button)
+        L.DomEvent.addListener(button, "click", this.onClick, this)
+
+        this.button = button
+
+        return button
+      },
+
+      update: function() {
+        this.button.classList.toggle("active", this.active)
+      },
+
+      set: function(v) {
+        this.active = v
+        this.update()
+      },
+
+      onClick: function () {
+        this.f(!this.active)
+      }
+
+    })
+
     var LocateButton = L.Control.extend({
         options: {
           position: "bottomright"
@@ -113,6 +152,13 @@ define(["map/clientlayer", "map/labelslayer",
           disableTracking()
       })
 
+      var showCoordsButton = new CoordsButton(function (d) {
+        if (d)
+          enableCoords()
+        else
+          disableCoords()
+      })
+
       function saveView() {
         savedView = {center: map.getCenter(),
                      zoom: map.getZoom()}
@@ -132,6 +178,16 @@ define(["map/clientlayer", "map/labelslayer",
         locateUserButton.set(false)
       }
 
+      function enableCoords() {
+        map.on("click", showCoordinates)
+        showCoordsButton.set(true)
+      }
+
+      function disableCoords() {
+        map.off("click", showCoordinates)
+        showCoordsButton.set(false)
+      }
+
       function locationFound(e) {
         if (!userLocation)
           userLocation = new LocationMarker(e.latlng).addTo(map)
@@ -140,6 +196,11 @@ define(["map/clientlayer", "map/labelslayer",
         userLocation.setAccuracy(e.accuracy)
       }
 
+      function showCoordinates(e) {
+        window.alert("Koordinaten: " + e.latlng.lat.toFixed(6) + ", " + e.latlng.lng.toFixed(6))
+        disableCoords()
+      }
+
       function locationError() {
         if (userLocation) {
           map.removeLayer(userLocation)
@@ -186,6 +247,7 @@ define(["map/clientlayer", "map/labelslayer",
       map.on("dragend", saveView)
 
       map.addControl(locateUserButton)
+      map.addControl(showCoordsButton)
 
       layerControl = L.control.layers({"OpenStreetmap": baseLayer}, [], {position: "bottomright"})
 

scss/_map.scss

@@ -14,6 +14,10 @@
     content: '\f217';
   }
 
+  button.show-coords:after {
+    content: '\f2a6';
+  }
+
  .node-alert {
     -webkit-animation: blink 2s linear;
     -webkit-animation-iteration-count: infinite;