--- steps/step-8/index.html 2023-09-11 11:38:22.588655529 +0000
+++ steps/step-9/index.html 2023-09-11 11:38:26.108672685 +0000
@@ -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}',