Location Picker

Both
Rightclick and Button
with higher precision

lib/infobox/location.js

+define(function () {
+  return function (config, el, router, d) {
+    var h2 = document.createElement("h2")
+    h2.textContent = "Location: " + d.toString()
+    el.appendChild(h2)
+
+    getJSON("https://nominatim.openstreetmap.org/reverse?format=json&lat=" + d.lat + "&lon=" + d.lng + "&zoom=18&addressdetail=0")
+    .then(function(result) {
+      h2.textContent = result.display_name
+    })
+
+    var h3lat = document.createElement("h3")
+    h3lat.textContent = "Breitengrad"
+    el.appendChild(h3lat)
+    var txt1 = document.createElement("textarea")
+    txt1.id = "location-latitude"
+    txt1.value = d.lat.toFixed(9)
+    var p = document.createElement("p")
+    p.appendChild(txt1)
+    p.appendChild(createCopyButton(txt1.id))
+    el.appendChild(p)
+
+    var h3lng = document.createElement("h3")
+    h3lng.textContent = "Längengrad"
+    el.appendChild(h3lng)
+    var txt2 = document.createElement("textarea")
+    txt2.id = "location-longitude"
+    txt2.value = d.lng.toFixed(9)
+    var p2 = document.createElement("p")
+    p2.appendChild(txt2)
+    p2.appendChild(createCopyButton(txt2.id))
+    el.appendChild(p2)
+
+    var a1 = document.createElement("a")
+    a1.textContent = "plain"
+    a1.onclick = function() {
+        switch2plain()
+        return false
+    }
+    a1.href = config.siteURL
+    var a2 = document.createElement("a")
+    a2.textContent = "uci"
+    a2.onclick = function() {
+        switch2uci()
+        return false
+    }
+    a2.href = config.siteURL
+
+    var p3 = document.createElement("p")
+    p3.textContent = "Du kannst zwischen "
+    p3.appendChild(a1)
+    var t1 = document.createTextNode(" und ")
+    p3.appendChild(t1)
+    p3.appendChild(a2)
+    var t2 = document.createTextNode(" wechseln.")
+    p3.appendChild(t2)
+    el.appendChild(p3)
+
+    function createCopyButton(id) {
+        var btn = document.createElement("button")
+        btn.className = "ion-ios-copy"
+        btn.title = "Kopiere"
+        btn.onclick = function() {
+            copy2clip(id)
+        }
+        return btn
+    }
+    function copy2clip(id) {
+        var copyTextarea = document.querySelector("#" + id)
+        copyTextarea.select()
+        try {
+            var successful = document.execCommand("copy")
+            var msg = successful ? "successful" : "unsuccessful"
+            console.log("Copying text command was " + msg)
+        } catch (err) {
+            console.log("Oops, unable to copy")
+        }
+    }
+    function switch2plain() {
+    var box1 = document.getElementById("location-latitude")
+    box1.value = d.lat.toFixed(9)
+    var box2 = document.getElementById("location-longitude")
+    box2.value = d.lng.toFixed(9)
+    }
+    function switch2uci() {
+        var box1 = document.getElementById("location-latitude")
+    box1.value = "uci set gluon-node-info.@location[0].latitude='" + d.lat.toFixed(9) + "'"
+    var box2 = document.getElementById("location-longitude")
+    box2.value = "uci set gluon-node-info.@location[0].longitude='" + d.lng.toFixed(9) + "'"
+    }
+  }
+})

lib/infobox/main.js

-define(["infobox/link", "infobox/node"], function (Link, Node) {
+define(["infobox/link", "infobox/node", "infobox/location"], function (Link, Node, Location) {
   return function (config, sidebar, router) {
     var self = this
     var el
@@ -41,6 +41,12 @@ define(["infobox/link", "infobox/node"], function (Link, Node) {
       new Link(config, el, router, d)
     }
 
+    self.gotoLocation = function (d) {
+       console.log("goto location called with ", d)
+       create()
+       new Location(config, el, router, d)
+     }
+
     return self
   }
 })

lib/map.js

@@ -20,7 +20,9 @@ define(["map/clientlayer", "map/labelslayer",
           var button = L.DomUtil.create("button", "add-layer")
           button.textContent = ""
 
-          L.DomEvent.disableClickPropagation(button)
+          // L.DomEvent.disableClickPropagation(button)
+          // Click propagation isn't disabled as this causes problems with the
+          // location picking mode; instead propagation is stopped in onClick().
           L.DomEvent.addListener(button, "click", this.f, this)
 
           this.button = button
@@ -233,7 +235,7 @@ define(["map/clientlayer", "map/labelslayer",
       }
 
       function showCoordinates(e) {
-        window.prompt("Koordinaten (Lat, Lng)", e.latlng.lat.toFixed(6) + ", " + e.latlng.lng.toFixed(6))
+        window.prompt("Koordinaten (Lat, Lng)", e.latlng.lat.toFixed(9) + ", " + e.latlng.lng.toFixed(9))
         disableCoords()
       }
 
@@ -271,6 +273,11 @@ define(["map/clientlayer", "map/labelslayer",
         }
       }
 
+      function contextMenuGotoLocation(e) {
+        console.log("context menu called at ", e)
+        router.gotoLocation(e.latlng)
+      }
+
       var el = document.createElement("div")
       el.classList.add("map")
 
@@ -292,6 +299,7 @@ define(["map/clientlayer", "map/labelslayer",
       map.on("locationfound", locationFound)
       map.on("locationerror", locationError)
       map.on("dragend", saveView)
+      map.on("contextmenu", contextMenuGotoLocation)
 
       addButton(locateUserButton)
       addButton(showCoordsPickerButton)
@@ -498,6 +506,10 @@ define(["map/clientlayer", "map/labelslayer",
         updateView()
       }
 
+      self.gotoLocation = function () {
+        //ignore
+      }
+
       self.destroy = function () {
         clearButtons()
         map.remove()

lib/router.js

@@ -62,6 +62,18 @@ define(function () {
       return true
     }
 
+    function gotoLocation(d) {
+      if (!d)
+        return false
+
+      targets.forEach( function (t) {
+        if(!t.gotoLocation)console.warn("has no gotoLocation", t)
+        t.gotoLocation(d)
+      })
+
+      return true
+    }
+
     function loadState(s) {
       if (!s)
         return false
@@ -162,6 +174,8 @@ define(function () {
       }
     }
 
+    self.gotoLocation = gotoLocation
+
     self.reset = function () {
       resetView()
     }

lib/title.js

@@ -23,6 +23,10 @@ define(function () {
         setTitle(d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname)
     }
 
+    this.gotoLocation = function() {
+      //ignore
+    }
+
     this.destroy = function () {
     }