From 8e7cdafee03a21a7a03d200bb295ae339e3ff2f5 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Thu, 2 Jan 2025 11:14:34 +0100
Subject: [PATCH] fix: deal with undefined

---
 .../partials/partial-map.html                 | 74 ++++++++++---------
 1 file changed, 41 insertions(+), 33 deletions(-)

diff --git a/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html b/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
index 2f4993d..d9381c8 100644
--- a/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
+++ b/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
@@ -20,11 +20,17 @@
         var center = [10.49, 50.68];
     {% endif %}
 
+    {% if zoom_level %}
+        var zoom_level = {{ zoom_level }};
+    {% else %}
+        var zoom_level = 4;
+    {% endif %}
+
     let map = new maplibregl.Map({
         container: 'map',
         style: '{% static "fellchensammlung/map/styles/colorful.json" %}',
         center: center,
-        zoom: {{ zoom_level }}
+        zoom: zoom_level
     }).addControl(new maplibregl.NavigationControl());
 
     {% for adoption_notice in adoption_notices_map %}
@@ -46,41 +52,43 @@
         {% endif %}
     {% endfor %}
 
-    map.on('load', () => {
-        const radius = {{ search_radius }}; // kilometer
-        const options = {
-            steps: 64,
-            units: 'kilometers'
-        };
-        const circle = turf.circle(center, radius, options);
+    {% if search_radius  %}
+        map.on('load', () => {
+            const radius = {{ search_radius }}; // kilometer
+            const options = {
+                steps: 64,
+                units: 'kilometers'
+            };
+            const circle = turf.circle(center, radius, options);
 
-        // Add the circle as a GeoJSON source
-        map.addSource('location-radius', {
-            type: 'geojson',
-            data: circle
-        });
+            // Add the circle as a GeoJSON source
+            map.addSource('location-radius', {
+                type: 'geojson',
+                data: circle
+            });
 
-        // Add a fill layer with some transparency
-        map.addLayer({
-            id: 'location-radius',
-            type: 'fill',
-            source: 'location-radius',
-            paint: {
-                'fill-color': '#8CCFFF',
-                'fill-opacity': 0.5
-            }
-        });
+            // Add a fill layer with some transparency
+            map.addLayer({
+                id: 'location-radius',
+                type: 'fill',
+                source: 'location-radius',
+                paint: {
+                    'fill-color': '#8CCFFF',
+                    'fill-opacity': 0.5
+                }
+            });
 
-        // Add a line layer to draw the circle outline
-        map.addLayer({
-            id: 'location-radius-outline',
-            type: 'line',
-            source: 'location-radius',
-            paint: {
-                'line-color': '#0094ff',
-                'line-width': 3
-            }
+            // Add a line layer to draw the circle outline
+            map.addLayer({
+                id: 'location-radius-outline',
+                type: 'line',
+                source: 'location-radius',
+                paint: {
+                    'line-color': '#0094ff',
+                    'line-width': 3
+                }
+            });
         });
-    });
+    {% endif %}
 
 </script>