--- steps/step-8/index.html 2025-11-04 20:55:42.737984444 +0000
+++ steps/step-9/index.html 2025-11-04 20:55:43.697990468 +0000
@@ -9,9 +9,10 @@
* font-awesome
* leaflet.awesome-markers
* leaflet-easybutton
+ * leaflet.heat
-->
<head>
- <title>Add Buttons</title>
+ <title>Heatmap</title>
<meta charset="utf-8" />
<script src="../../node_modules/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" href="../../node_modules/leaflet/dist/leaflet.css"/>
@@ -23,6 +24,7 @@
<script src="../../node_modules/leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="../../node_modules/leaflet-easybutton/src/easy-button.css"/>
<script src="../../node_modules/leaflet-easybutton/src/easy-button.js"></script>
+ <script src="../../node_modules/leaflet.heat/dist/leaflet-heat.js"></script>
<style>
body {
margin: 0;
@@ -45,13 +47,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}',