diff options
| author | Markus Koch <markus@notsyncing.net> | 2020-04-19 12:56:02 +0200 |
|---|---|---|
| committer | Markus Koch <markus@notsyncing.net> | 2020-04-19 12:56:02 +0200 |
| commit | 2e790adc903f55294cfde30f576a62e756acbcae (patch) | |
| tree | e181707fccb12969b54bb2ab8907b8d36f68552c | |
| parent | 255e81ce9f0c333827f1a2977a0ece8a83cc3071 (diff) | |
| download | lifomapserver-2e790adc903f55294cfde30f576a62e756acbcae.tar.gz lifomapserver-2e790adc903f55294cfde30f576a62e756acbcae.tar.bz2 lifomapserver-2e790adc903f55294cfde30f576a62e756acbcae.zip | |
Implement basic search
| -rw-r--r-- | htdocs/index.html | 6 | ||||
| -rw-r--r-- | htdocs/mapscript.js | 71 |
2 files changed, 75 insertions, 2 deletions
diff --git a/htdocs/index.html b/htdocs/index.html index 93f501e..7716927 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -17,7 +17,11 @@ <script src='leafletjs/Leaflet.Editable.js'></script> </head> <body style="position: absolute; padding: 0px; margin: 0px; width:100%; height:100%;"> - <div id="mapid" style="width: 100%; height: 100%;"></div> + <table id="windowtable" style="border-spacing:0;border:0;height:100%;width:100%;"><tr id="windowtr"> + <td style="padding:0;margin:0"> + <div id="mapid" style="padding:0;margin:0;width: 100%; height: 100%;"></div> + </td> + </tr></table> <style> .leaflet-tooltip.city-names { background-color: transparent; diff --git a/htdocs/mapscript.js b/htdocs/mapscript.js index 89d32a9..14dde51 100644 --- a/htdocs/mapscript.js +++ b/htdocs/mapscript.js @@ -15,7 +15,7 @@ var streetLabelsRenderer = new L.StreetLabels({ strokeStyle: "white", }, }); - + // Projection fix from: https://gis.stackexchange.com/questions/200865/leaflet-crs-simple-custom-scale var factorx = 1 / 256 * 4; var factory = factorx; @@ -200,6 +200,65 @@ function prompt_location() { document.location.hash = "#" + str; } +var search_element; +function toggle_search() { + if (el = document.getElementById('searchbar')) { + el.parentNode.removeChild(el); + return; + } + + if (!search_element) { + search_element = document.createElement("div"); + search_element.style.overflow = "scroll"; + search_element.style.padding = "6px"; + search_element.style.height = "100%"; + search_element.innerHTML = '<input style="width:100%;" id="search_query" name="lifo_map_search" type="search" placeholder="Start typing to search..." onkeypress="search(event)"><div id="search_results"></div>' ; + } + + td = document.getElementById('windowtr').insertCell(0); + td.style.width = "400px"; + td.style.borderRight = "1px solid black"; + td.style.verticalAlign = "top"; + td.id = "searchbar"; + td.appendChild(search_element); + + document.getElementById('search_query').focus(); +} + +function htmlEntities(str) { + return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); +} +var regex; +function search(e) { + var query = htmlEntities(document.getElementById("search_query").value); + if (query.length > 0 || e.key == "Enter") { + results = document.createElement("ul"); + for (var i = 0; i < layers._layers.length; i++) { + if (!layers._layers[i].layer._layers) + continue; + + for (key in layers._layers[i].layer._layers) { + item = layers._layers[i].layer._layers[key]; + switch (item.feature.geometry.type) { + case "Point": + regex = new RegExp(query, 'i'); + if (item.feature.properties.name.match(regex)) { + el = document.createElement("li"); + el.innerHTML = "[" + layers._layers[i].name + "] " + '<a href="javascript:layers._layers[' + i + '].layer._layers[' + item._leaflet_id + '].fire(\'click\') ">' + item.feature.properties.name + "</a>"; + results.appendChild(el); + } + break; + default: + break; + } + } + } + document.getElementById('search_results').innerHTML = "Search results for " + query; + document.getElementById('search_results').appendChild(results); + return false; + } +} + L.MyControl = L.Control.extend({ options: { position: 'topleft', @@ -222,6 +281,14 @@ L.MyControl = L.Control.extend({ } }); +L.SearchControl = L.MyControl.extend({ + options: { + position: 'topleft', + callback: toggle_search, + title: 'Search', + html: '🔍' + } +}); L.GotoControl = L.MyControl.extend({ options: { position: 'topleft', @@ -230,6 +297,7 @@ L.GotoControl = L.MyControl.extend({ html: '⌖' } }); +mymap.addControl(new L.SearchControl()); mymap.addControl(new L.GotoControl()); var popup = L.popup(); @@ -277,5 +345,6 @@ function onHashChange(e) { var latlng = L.latLng(parseFloat(coordstr[0]), parseFloat(coordstr[1])); mymap.setView(latlng, parseInt(coordstr[2])); } + window.addEventListener("hashchange", onHashChange, false); onHashChange(null); |