feat: Use actual adoption notices for markers

src/fellchensammlung/static/fellchensammlung/css/styles.css

@@ -570,7 +570,7 @@ textarea {
 
 }
 
-#marker {
+.marker {
     background-image: url('../img/logo_transparent.png');
     background-size: cover;
     width: 50px;

src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html

@@ -1,4 +1,6 @@
 {% load static %}
+{% load custom_tags %}
+
 <!-- add MapLibre JavaScript and CSS -->
 <script src="https://tiles.versatiles.org/assets/maplibre-gl/maplibre-gl.js"></script>
 <link href="https://tiles.versatiles.org/assets/maplibre-gl/maplibre-gl.css" rel="stylesheet"/>
@@ -15,19 +17,22 @@
         zoom: 5
     }).addControl(new maplibregl.NavigationControl());
 
+    {% for an in adoption_notices %}
         // create the popup
-    const popup = new maplibregl.Popup({offset: 25}).setText(
+        const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setText(
-        'A sweet rat waiting for adoption.'
+            '{{ an.name }}'
         );
 
         // create DOM element for the marker
-    const el = document.createElement('div');
+        const el_{{ forloop.counter }} = document.createElement('div');
-    el.id = 'marker';
+        el_{{ forloop.counter }}.id = 'marker_{{ forloop.counter }}';
+        el_{{ forloop.counter }}.classList.add('marker');
 
-    const monument = [10.7, 50.68];
+        const location_popup_{{ forloop.counter }} = [{{ an.location.longitude | pointdecimal }}, {{ an.location.latitude | pointdecimal }}];
         // create the marker
-    new maplibregl.Marker({element: el})
+        new maplibregl.Marker({element: el_{{ forloop.counter }}})
-        .setLngLat(monument)
+            .setLngLat(location_popup_{{ forloop.counter }})
-        .setPopup(popup) // sets a popup on this marker
+            .setPopup(popup_{{ forloop.counter }}) // sets a popup on this marker
             .addTo(map);
+    {% endfor %}
 </script>

src/fellchensammlung/templatetags/custom_tags.py

@@ -47,3 +47,8 @@ def get_oxitraffic_script_if_enabled():
         return mark_safe(f'<script type="module" src="https://{settings.OXITRAFFIC_BASE_URL}/count.js"></script>')
     else:
         return ""
+
+@register.filter
+@stringfilter
+def pointdecimal(value):
+    return f"{float(value):.9f}"

src/fellchensammlung/views.py

@@ -397,7 +397,9 @@ def modqueue(request):
 
 
 def map(request):
-    return render(request, 'fellchensammlung/map.html')
+    adoption_notices = AdoptionNotice.objects.all() #TODO: Filter to active
+    context = {"adoption_notices": adoption_notices}
+    return render(request, 'fellchensammlung/map.html', context=context)
 
 
 def metrics(request):