feat: Show position of shelter on the map

src/fellchensammlung/models.py

@@ -13,7 +13,7 @@ from django.contrib.auth.models import AbstractUser
 
 from .tools import misc, geo
 from notfellchen.settings import MEDIA_URL
-from .tools.geo import LocationProxy
+from .tools.geo import LocationProxy, Position
 from .tools.misc import age_as_hr_string, time_since_as_hr_string
 
 
@@ -134,6 +134,14 @@ class RescueOrganization(models.Model):
     def adoption_notices(self):
         return AdoptionNotice.objects.filter(organization=self)
 
+    @property
+    def position(self):
+        if self.location:
+            return Position(latitude=self.location.latitude, longitude=self.location.longitude)
+        else:
+            return None
+
+
 
 # Admins can perform all actions and have the highest trust associated with them
 # Moderators can make moderation decisions regarding the deletion of content

src/fellchensammlung/templates/fellchensammlung/details/detail-rescue-organization.html

@@ -5,7 +5,8 @@
 {% block title %}<title>{{ org.name }}</title>{% endblock %}
 
 {% block content %}
-    <div class="card">
+    <div class="container-cards">
+        <div class="card half">
             <h1>{{ org.name }}</h1>
 
             <b><i class="fa-solid fa-location-dot"></i></b>
@@ -49,6 +50,11 @@
                 </tr>
             </table>
         </div>
+        <div class="card half">
+            {% include "fellchensammlung/partials/partial-map.html" %}
+        </div>
+    </div>
+
 
     <h2>{% translate 'Vermittlungen der Organisation' %}</h2>
     <div class="container-cards">

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

@@ -15,7 +15,7 @@
 <!-- start map -->
 <script>
     {% if map_center %}
-        var center = [{{ map_center.longitude }}, {{ map_center.latitude }}];
+        var center = [parseFloat({{ map_center.longitude }}), parseFloat({{ map_center.latitude }})];
     {% else %}
         var center = [10.49, 50.68];
     {% endif %}
@@ -52,6 +52,37 @@
         {% endif %}
     {% endfor %}
 
+    {% for map_pin in map_pins %}
+        map.on('load', async () => {
+            image = await map.loadImage("{% static 'fellchensammlung/img/animal_shelter.png' %}");
+            map.addImage('cat', image.data);
+            map.addSource('point', {
+                'type': 'geojson',
+                'data': {
+                    'type': 'FeatureCollection',
+                    'features': [
+                        {
+                            'type': 'Feature',
+                            'geometry': {
+                                'type': 'Point',
+                                'coordinates': [parseFloat({{ map_pin.longitude }}), parseFloat({{ map_pin.latitude }})]
+                            }
+                        }
+                    ]
+                }
+            });
+            map.addLayer({
+                'id': 'points',
+                'type': 'symbol',
+                'source': 'point',
+                'layout': {
+                    'icon-image': 'cat',
+                    'icon-size': 0.25
+                }
+            });
+        });
+    {% endfor %}
+
     {% if search_radius  %}
         map.on('load', () => {
             const radius = {{ search_radius }}; // kilometer

src/fellchensammlung/views.py

@@ -608,7 +608,8 @@ def external_site_warning(request):
 
 def detail_view_rescue_organization(request, rescue_organization_id):
     org = RescueOrganization.objects.get(pk=rescue_organization_id)
-    return render(request, 'fellchensammlung/details/detail-rescue-organization.html', context={"org": org})
+    return render(request, 'fellchensammlung/details/detail-rescue-organization.html',
+                  context={"org": org, "map_center": org.position, "zoom_level": 6, "map_pins": [org.position]})
 
 
 def export_own_profile(request):