--- steps/step-4/index.html	2016-09-19 12:15:06.000000000 +0200
+++ steps/step-5/index.html	2016-09-19 12:15:07.000000000 +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>