markus/lifomapserver
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Implement basic search

Browse Source
This commit is contained in:
Markus Koch 2020-04-19 12:56:02 +02:00
parent 255e81ce9f
commit 2e790adc90
2 changed files with 75 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
htdocs/index.html
View File

@ -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;

69
htdocs/mapscript.js
View File

@ -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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
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);