From ae8276697afa9863e8f4b04de7f4143080c4d6d3 Mon Sep 17 00:00:00 2001
From: csae8092 <p.andorfer@gmail.com>
Date: Tue, 10 Dec 2024 09:48:28 +0100
Subject: [PATCH] =?UTF-8?q?works,=20but=20there=20is=20some=20issue=20with?=
 =?UTF-8?q?=20e.g=20h=C3=A4lt=20sich=20auf=20relations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 network/templates/network/map.html | 70 +++++++++++++++++++++++++-----
 1 file changed, 60 insertions(+), 10 deletions(-)

diff --git a/network/templates/network/map.html b/network/templates/network/map.html
index 99eea1f..4f2e57d 100644
--- a/network/templates/network/map.html
+++ b/network/templates/network/map.html
@@ -10,11 +10,13 @@
         height: 700px;
     }
 </style>
-
-<div class="container-fluid">
-        <h1>Map</h1>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.heat/0.2.0/leaflet-heat.js"></script>
+<div class="container-fluid pt-3">
+    <h1 class="display-3 text-center">Beziehungen von und mit Orten</h1>
+    <div id="mapcontainer" class="p-4">
+        <div id="legend"></div>
         <div id="map"></div>
-    
+    </div>
 </div>
 <span id="url" class="visually-hidden" aria-hidden="true">{% url 'network:geojson' %}{% querystring %}</span>
 
@@ -24,27 +26,75 @@ <h1>Map</h1>
     fetch(url)
         .then(response => {
             if (!response.ok) {
-                throw new Error("Network response was not ok");
+                throw new Error("Geojson response was not ok");
             }
             return response.json();
         })
         .then(data => {
-            var map = L.map('map').setView([48.20 , 16.37], 6);
-            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            var map = L.map('map')
+            console.log(data["metadata"])
+            var OSMBaseLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                 maxZoom: 19,
                 attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
             }).addTo(map);
+
+            var CartoDB_PositronNoLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+                subdomains: 'abcd',
+                maxZoom: 20
+            });
+
+            var CartoDB_DarkMatterNoLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+                subdomains: 'abcd',
+                maxZoom: 20
+            });
+
             const markers = L.markerClusterGroup();
             const geojsonLayer = L.geoJSON(data, {
                 onEachFeature: function (feature, layer) {
                     layer.bindPopup(feature.properties.label);
                 },
                 pointToLayer: function (feature, latlng) {
-                    return L.marker(latlng); // Convert GeoJSON points to Leaflet markers
+                    return L.marker(latlng);
                 }
-                });
+            });
+            markers.addTo(map);
             geojsonLayer.eachLayer(layer => markers.addLayer(layer));
-            map.addLayer(markers);
+
+            var heatData = [];
+            L.geoJSON(data, {
+                onEachFeature: function (feature, layer) {
+                    if (feature.geometry.type === "Point") {
+                        var lat = feature.geometry.coordinates[1];
+                        var lng = feature.geometry.coordinates[0];
+                        heatData.push([lat, lng]);
+                    }
+                }
+            });
+
+            // Create the heatmap layer
+            var heatmapLayer = L.heatLayer(heatData, {
+                radius: 25,
+                blur: 10,
+                maxZoom: 17,
+                max: 0.7,
+                gradient: {0: 'white', 0.5: 'lime', 1: 'red'},
+
+            });
+
+            var baseMaps = {
+                "Base Layer": OSMBaseLayer,
+                "CartoDB hell": CartoDB_PositronNoLabels,
+                "CartoDB dunkel": CartoDB_DarkMatterNoLabels
+            };
+
+            const overlayMaps = {
+                "Marker Cluster": markers,
+                "Heatmap": heatmapLayer
+            };
+
+            L.control.layers(baseMaps, overlayMaps, { collapsed: false }).addTo(map);
             map.fitBounds(geojsonLayer.getBounds());
         })
         .catch(error => {