From 2e790adc903f55294cfde30f576a62e756acbcae Mon Sep 17 00:00:00 2001
From: Markus Koch <markus@notsyncing.net>
Date: Sun, 19 Apr 2020 12:56:02 +0200
Subject: [PATCH] Implement basic search

---
 htdocs/index.html   |  6 +++-
 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, '&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);
