From fcaea36c692866450660f35317a06dacb9a20923 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Fri, 25 Jan 2019 14:12:44 +0100 Subject: [PATCH] New module 'nominatim-search' --- src/index.js | 3 +- src/nominatim-search.css | 13 +++++++ src/nominatim-search.js | 84 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 src/nominatim-search.css create mode 100644 src/nominatim-search.js 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()) +})