diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css index a3873d0..df103f7 100644 --- a/src/fellchensammlung/static/fellchensammlung/css/styles.css +++ b/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; diff --git a/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html b/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html index 12739d4..728d17b 100644 --- a/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html +++ b/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html @@ -1,4 +1,6 @@ {% load static %} +{% load custom_tags %} + @@ -15,19 +17,22 @@ zoom: 5 }).addControl(new maplibregl.NavigationControl()); - // create the popup - const popup = new maplibregl.Popup({offset: 25}).setText( - 'A sweet rat waiting for adoption.' - ); + {% for an in adoption_notices %} + // create the popup + const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setText( + '{{ an.name }}' + ); - // create DOM element for the marker - const el = document.createElement('div'); - el.id = 'marker'; + // create DOM element for the marker + const el_{{ forloop.counter }} = document.createElement('div'); + el_{{ forloop.counter }}.id = 'marker_{{ forloop.counter }}'; + el_{{ forloop.counter }}.classList.add('marker'); - const monument = [10.7, 50.68]; - // create the marker - new maplibregl.Marker({element: el}) - .setLngLat(monument) - .setPopup(popup) // sets a popup on this marker - .addTo(map); + const location_popup_{{ forloop.counter }} = [{{ an.location.longitude | pointdecimal }}, {{ an.location.latitude | pointdecimal }}]; + // create the marker + new maplibregl.Marker({element: el_{{ forloop.counter }}}) + .setLngLat(location_popup_{{ forloop.counter }}) + .setPopup(popup_{{ forloop.counter }}) // sets a popup on this marker + .addTo(map); + {% endfor %} diff --git a/src/fellchensammlung/templatetags/custom_tags.py b/src/fellchensammlung/templatetags/custom_tags.py index 6e4b976..9ad1739 100644 --- a/src/fellchensammlung/templatetags/custom_tags.py +++ b/src/fellchensammlung/templatetags/custom_tags.py @@ -47,3 +47,8 @@ def get_oxitraffic_script_if_enabled(): return mark_safe(f'') else: return "" + +@register.filter +@stringfilter +def pointdecimal(value): + return f"{float(value):.9f}" diff --git a/src/fellchensammlung/views.py b/src/fellchensammlung/views.py index 452eb06..687130c 100644 --- a/src/fellchensammlung/views.py +++ b/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):