--- steps/step-8/index.html	2016-09-19 12:15:06.000000000 +0200
+++ steps/step-9/index.html	2016-09-19 12:15:07.000000000 +0200
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Add Buttons</title>
+    <title>Heatmap</title>
     <meta charset="utf-8" />
     <script src="../../bower_components/leaflet/dist/leaflet.js"></script>
     <link rel="stylesheet" href="../../bower_components/leaflet/dist/leaflet.css"/>
@@ -13,6 +13,7 @@
     <script src="../../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
     <link rel="stylesheet" href="../../bower_components/Leaflet.EasyButton/src/easy-button.css"/>
     <script src="../../bower_components/Leaflet.EasyButton/src/easy-button.js"></script>
+    <script src="../../bower_components/leaflet.heat/dist/leaflet-heat.js"></script>
     <style>
       body {
         margin: 0;
@@ -35,13 +36,25 @@
       var osmLayer = L.tileLayer.provider('OpenStreetMap.Mapnik');
       var germanLayer = L.tileLayer.provider('OpenStreetMap.DE');
 
-      var myMap = L.map('mapDiv', {layers: osmLayer}).setView(latLon, zoom);
+      var heatLayer = L.heatLayer([
+        [53.56200, 9.95999, 1], // lat, lng, intensity
+        [53.56200, 9.95998, 1],
+        [53.56200, 9.95970, 0.5],
+        [53.56190, 9.95970, 0.5],
+      ], {radius: 25});
+
+      var myMap = L.map('mapDiv', {layers: [osmLayer, heatLayer]}).setView(latLon, zoom);
 
       var baseLayers = {
                          'OSM': osmLayer, 
                          'German': germanLayer
                        };
-      L.control.layers(baseLayers).addTo(myMap);
+
+      var overlayLayers = {
+                             'heatmap': heatLayer
+                          };
+      
+      L.control.layers(baseLayers, overlayLayers).addTo(myMap);
 
       var searchControl = new L.Control.Search({
         url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}',