Geo Search: add a search field for locations

index.html

@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
   <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
   <link rel="stylesheet" href='style.css' />
+  <link rel="stylesheet" href="node_modules/leaflet-geosearch/assets/css/leaflet.css" />
   <script src="node_modules/leaflet/dist/leaflet.js"></script>
   <script src="dist/openstreetbrowser.js"></script>
 </head>

package.json

@@ -10,6 +10,7 @@
     "font-awesome": "^4.7.0",
     "ip-location": "^1.0.1",
     "leaflet": "^1.0.3",
+    "leaflet-geosearch": "^2.4.0",
     "openstreetmap-tag-translations": "^1.0.0",
     "overpass-layer": "https://github.com/plepe/overpass-layer#marker",
     "sheet-router": "^4.2.3"

src/index.js

@@ -1,19 +1,5 @@
 var ipLocation = require('./ip-location')
-ipLocation.httpGet = function (url, callback) {
-  var xhr = new XMLHttpRequest()
-  xhr.open('get', url, true)
-  xhr.responseType = 'text'
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState === 4) {
-      if (xhr.status === 200) {
-        callback(null, { body: xhr.responseText })
-      } else {
-        callback(xhr.responseText)
-      }
-    }
-  }
-  xhr.send()
-}
+var LeafletGeoSearch = require('leaflet-geosearch')
 
 var OverpassLayer = require('overpass-layer')
 var OverpassLayerList = require('overpass-layer').List
@@ -39,6 +25,15 @@ window.onload = function() {
     }
   })
 
+  // Add Geo Search
+  var provider = new LeafletGeoSearch.OpenStreetMapProvider()
+  var searchControl = new LeafletGeoSearch.GeoSearchControl({
+    provider: provider,
+    showMarker: false,
+    retainZoomLevel: true
+  })
+  map.addControl(searchControl)
+
   overpassFrontend = new OverpassFrontend('//overpass-api.de/api/interpreter', {
     timeGap: 10,
     effortPerRequest: 100