diff --git a/src/index.js b/src/index.js index 57aa2e2a..4ddd7ce0 100644 --- a/src/index.js +++ b/src/index.js @@ -34,7 +34,8 @@ require('./wikipedia') require('./image') require('./addCategories') require('./permalink') -require('./leaflet-geo-search') +//require('./leaflet-geo-search') +require('./nominatim-search') let exportAll = require('./exportAll') window.onload = function () { diff --git a/src/nominatim-search.css b/src/nominatim-search.css new file mode 100644 index 00000000..4eeb24c7 --- /dev/null +++ b/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; +} diff --git a/src/nominatim-search.js b/src/nominatim-search.js new file mode 100644 index 00000000..6b986ab3 --- /dev/null +++ b/src/nominatim-search.js @@ -0,0 +1,84 @@ +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' + }) + tab.content.classList.add('nominatim-search') + global.tabs.add(tab) + + tab.header.innerHTML = '' + 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()) +})