Merge branch 'search'

src/exportAll.js

@@ -84,7 +84,8 @@ function formDef () {
 
 register_hook('init', function () {
   tab = new tabs.Tab({
-    id: 'export'
+    id: 'export',
+    weight: 10
   })
   global.tabs.add(tab)
 

src/index.js

@@ -1,6 +1,5 @@
 /* globals map:true, overpassFrontend:true, currentPath:true, options:true, baseCategory:true, overpassUrl:true showDetails */
 
-var LeafletGeoSearch = require('leaflet-geosearch')
 const tabs = require('modulekit-tabs')
 
 var OverpassFrontend = require('overpass-frontend')
@@ -35,6 +34,8 @@ require('./wikipedia')
 require('./image')
 require('./addCategories')
 require('./permalink')
+//require('./leaflet-geo-search')
+require('./nominatim-search')
 let exportAll = require('./exportAll')
 
 window.onload = function () {
@@ -63,15 +64,6 @@ function onload2 (initState) {
     }).addTo(map)
   }
 
-  // Add Geo Search
-  var provider = new LeafletGeoSearch.OpenStreetMapProvider()
-  var searchControl = new LeafletGeoSearch.GeoSearchControl({
-    provider: provider,
-    showMarker: false,
-    retainZoomLevel: true
-  })
-  map.addControl(searchControl)
-
   // Geo location
   L.control.locate({
     keepCurrentZoomLevel: true,

src/leaflet-geo-search.js

@@ -0,0 +1,12 @@
+const LeafletGeoSearch = require('leaflet-geosearch')
+
+register_hook('init', function () {
+  // Add Geo Search
+  var provider = new LeafletGeoSearch.OpenStreetMapProvider()
+  var searchControl = new LeafletGeoSearch.GeoSearchControl({
+    provider: provider,
+    showMarker: false,
+    retainZoomLevel: true
+  })
+  global.map.addControl(searchControl)
+})

src/nominatim-search.css

@@ -0,0 +1,13 @@
+.nominatim-search input {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+.nominatim-search ul {
+  margin: 0 0.5em;
+  padding-left: 0;
+}
+.nominatim-search ul li {
+  margin: 0.5em 0;
+  list-style: none;
+}

src/nominatim-search.js

@@ -0,0 +1,85 @@
+const tabs = require('modulekit-tabs')
+const httpGet = require('./httpGet')
+require('./nominatim-search.css')
+
+let tab
+let input
+let domResults
+
+function show (data) {
+  while(domResults.lastChild) {
+    domResults.removeChild(domResults.lastChild)
+  }
+
+  data.forEach(
+    entry => {
+      let a = document.createElement('a')
+      a.appendChild(document.createTextNode(entry.display_name))
+
+      a.href = '#'
+      a.onclick = () => {
+        let bounds = new L.LatLngBounds(
+          L.latLng(entry.boundingbox[0], entry.boundingbox[2]),
+          L.latLng(entry.boundingbox[1], entry.boundingbox[3])
+        )
+
+        global.map.fitBounds(bounds, { animate: true })
+
+        return false
+      }
+
+      let li = document.createElement('li')
+      li.appendChild(a)
+      
+      domResults.appendChild(li)
+    }
+  )
+}
+
+function search (str) {
+  httpGet(
+    'https://nominatim.openstreetmap.org/search?format=json&q=' + encodeURIComponent(str),
+    {},
+    (err, result) => {
+      if (err) {
+        return alert(err)
+      }
+
+      let data = JSON.parse(result.body)
+      show(data)
+    }
+  )
+}
+
+register_hook('init', function () {
+  tab = new tabs.Tab({
+    id: 'search',
+    weight: -1
+  })
+  tab.content.classList.add('nominatim-search')
+  global.tabs.add(tab)
+
+  tab.header.innerHTML = '<i class="fa fa-search" aria-hidden="true"></i>'
+  tab.header.title = lang('search')
+
+  let input = document.createElement('input')
+  let inputTimer
+  input.type = 'text'
+  input.addEventListener('input', () => {
+    if (inputTimer) {
+      global.clearTimeout(inputTimer)
+    }
+
+    inputTimer = global.setTimeout(
+      () => search(input.value),
+      300
+    )
+  })
+
+  tab.content.appendChild(input)
+
+  domResults = document.createElement('ul')
+  tab.content.appendChild(domResults)
+
+  tab.on('select', () => input.focus())
+})