--- steps/step-4/index.html 2025-11-09 20:10:59.253275740 +0000
+++ steps/step-5/index.html 2025-11-04 20:55:40.321969293 +0000
@@ -5,13 +5,16 @@
* leaflet
* leaflet-providers
+ * leaflet-search
-->
<head>
- <title>Add an alternative tile layer</title>
+ <title>Add a search field</title>
<meta charset="utf-8" />
<script src="../../node_modules/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" href="../../node_modules/leaflet/dist/leaflet.css"/>
<script src="../../node_modules/leaflet-providers/leaflet-providers.js"></script>
+ <link rel="stylesheet" href="../../node_modules/leaflet-search/src/leaflet-search.css"/>
+ <script src="../../node_modules/leaflet-search/src/leaflet-search.js"></script>
<style>
body {
margin: 0;
@@ -40,7 +43,23 @@
'OSM': osmLayer,
'German': germanLayer
};
- L.control.layers(baseLayers, {}, {collapsed: false}).addTo(myMap);
+ L.control.layers(baseLayers).addTo(myMap);
+
+ var searchControl = new L.Control.Search({
+ url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}',
+ jsonpParam: 'json_callback',
+ propertyName: 'display_name',
+ propertyLoc: ['lat','lon'],
+ circleLocation: true,
+ markerLocation: false,
+ autoType: false,
+ autoCollapse: true,
+ minLength: 2,
+ zoom: 17
+ });
+
+ myMap.addControl(searchControl);
+
</script>
</body>
</html>