feat: Use actual adoption notices for markers

This commit is contained in:
moanos [he/him] 2024-09-27 14:29:12 +02:00
parent c8c9782a36
commit cd64495851
4 changed files with 27 additions and 15 deletions

View File

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

View File

@ -1,4 +1,6 @@
{% load static %} {% load static %}
{% load custom_tags %}
<!-- add MapLibre JavaScript and CSS --> <!-- add MapLibre JavaScript and CSS -->
<script src="https://tiles.versatiles.org/assets/maplibre-gl/maplibre-gl.js"></script> <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"/> <link href="https://tiles.versatiles.org/assets/maplibre-gl/maplibre-gl.css" rel="stylesheet"/>
@ -15,19 +17,22 @@
zoom: 5 zoom: 5
}).addControl(new maplibregl.NavigationControl()); }).addControl(new maplibregl.NavigationControl());
// create the popup {% for an in adoption_notices %}
const popup = new maplibregl.Popup({offset: 25}).setText( // create the popup
'A sweet rat waiting for adoption.' const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setText(
); '{{ an.name }}'
);
// create DOM element for the marker // 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 // 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); .addTo(map);
{% endfor %}
</script> </script>

View File

@ -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>') return mark_safe(f'<script type="module" src="https://{settings.OXITRAFFIC_BASE_URL}/count.js"></script>')
else: else:
return "" return ""
@register.filter
@stringfilter
def pointdecimal(value):
return f"{float(value):.9f}"

View File

@ -397,7 +397,9 @@ def modqueue(request):
def map(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): def metrics(request):