--- steps/step-4/index.html 2023-09-11 13:38:21.068648122 +0200
+++ steps/step-5/index.html 2023-09-11 13:38:21.656650988 +0200
@@ -1,11 +1,13 @@
<!DOCTYPE html>
<html>
<head>
- <title>Add an alternative tile layer</title>
+ <title>Add a search field</title>
<meta charset="utf-8" />
<script src="../../bower_components/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" href="../../bower_components/leaflet/dist/leaflet.css"/>
<script src="../../bower_components/leaflet-providers/leaflet-providers.js"></script>
+ <link rel="stylesheet" href="../../bower_components/leaflet-search/src/leaflet-search.css"/>
+ <script src="../../bower_components/leaflet-search/src/leaflet-search.js"></script>
<style>
body {
margin: 0;
@@ -35,6 +37,22 @@
'German': germanLayer
};
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>