add geocoding capacity

This commit is contained in:
lukas fricke 2025-02-25 18:13:23 +01:00
parent 65c0081c33
commit a2ce58b18f

View file

@ -3,9 +3,14 @@
<html> <html>
<head> <head>
<link href="bootstrap-5.0.2-dist/css/bootstrap.min.css" rel="stylesheet" ></link> <link href="bootstrap-5.0.2-dist/css/bootstrap.min.css" rel="stylesheet" ></link>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"></link>
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.0.0/dist/geosearch.css"></link>
<script src="bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js" ></script> <script src="bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js" ></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"</link> <script src="https://unpkg.com/leaflet-geosearch@latest/dist/bundle.min.js"></script>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
#map { #map {
@ -142,6 +147,16 @@
marker = L.marker([latlng.lat,latlng.lng]).addTo(map); marker = L.marker([latlng.lat,latlng.lng]).addTo(map);
}); });
map.setView([53.518203, 9.983701], 16); map.setView([53.518203, 9.983701], 16);
const provider = new window.GeoSearch.OpenStreetMapProvider();
const search = new GeoSearch.GeoSearchControl({
provider: provider,
style : 'bar',
updateMap: true,
resetButton: '🔍'
}); // Include the search box with usefull params. Autoclose and updateMap in my case. Provider is a compulsory parameter.
map.addControl(search);
</script> </script>
<script> <script>
@ -184,4 +199,6 @@
} }
</script> </script>
</body>
</html> </html>