Merge pull request #66 from alanblack/master

add html/javascript to search addresses
mcastillof · Jan 21, 2024 · 024265a · 024265a
2 parents ad84438 + 34ff899
commit 024265a
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 3 deletions.
diff --git a/app/src/main/assets/map.html b/app/src/main/assets/map.html
@@ -9,6 +9,7 @@
 
     <link rel="stylesheet" href="leaflet.css">
     <script src="leaflet.js"></script>
+    <script src="search.js"></script>
     <style>
 		html, body {
 			height: 100%;
@@ -24,15 +25,35 @@
 </head>
 <body>
 
+<div id="search">
+    <input type="text" id="address_input" name="address_input" placeholder="Search a address" style="font-size:16pt;width:80%;">
+</div>
+
 <div id='map'></div>
 
 <script>
 	var map = L.map('map').fitWorld();
 	map.panTo(new L.LatLng(12, 15));
-	map.zoomIn(1);
+	map.zoomIn(10);
     var popup = L.popup();
     var alreadyRunning = false;
 
+    var searchInput = document.getElementById("address_input");
+        searchInput.addEventListener("keypress", async function(event) {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            var coords = await searchAddress(searchInput.value);
+            var lat = coords[0];
+            var long = coords[1];
+
+            var mapEvent = {
+                latlng: L.latLng(lat, long)
+            };
+            setOnMap(lat, long);
+            onMapClick(mapEvent);     
+          }
+        });
+
 
 	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
@@ -56,7 +77,8 @@
 		if (typeof marker != 'undefined')
 		    map.removeLayer(marker);
 		marker = L.marker(e.latlng, {icon: icon}).addTo(map);
-        Android.setPosition(e.latlng.wrap().toString());
+        var wrap = e.latlng.wrap().toString();
+        Android.setPosition(wrap);
 	}
 
     function setOnMap(aLat, aLng) {
@@ -80,7 +102,6 @@
         marker = L.marker([lat, lng], {icon: icon}).addTo(map);
     }
 
-
 </script>
 </body>
 </html>
diff --git a/app/src/main/assets/search.js b/app/src/main/assets/search.js
@@ -0,0 +1,40 @@
+async function searchAddress(query) {
+    // Define the Nominatim API endpoint
+    const api_url = "https://nominatim.openstreetmap.org/search";
+
+    var result = ["-1", "-1"];
+
+    // Parameters for the search
+    const params = {
+        q: query,
+        format: "json",
+        limit: "1"
+    };
+
+    // Construct the URL with query parameters
+    const url = new URL(api_url);
+    url.search = new URLSearchParams(params);
+
+    await fetch(url)
+        .then(response => response.json())
+        .then(data => {
+            result = getCoords(data);
+        })
+        .catch(error => {
+            console.error("Error:", error);
+        });
+
+        return result;
+}
+
+function getCoords(data)
+{
+    if(data.length > 0)
+    {
+        var firstResult = data[0];
+        var lat = firstResult.lat;
+        var long = firstResult.lon;
+
+        return [lat, long];
+    }
+}