moanos/Notfellchen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Use card design for map

Browse Source
This commit is contained in:
moanos [he/him] 2024-09-27 15:42:40 +02:00
parent 4d22702e2d
commit 7d1a07227d
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/fellchensammlung/static/fellchensammlung/css/styles.css
View File

@ -581,3 +581,8 @@ textarea {
.maplibregl-popup { .maplibregl-popup {
max-width: 200px; max-width: 200px;
} }
.maplibregl-popup-content {
background-color: var(--background-three) !important;
border-radius: 8px !important;
}

10
src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
View File

@ -1,5 +1,6 @@
{% load static %} {% load static %}
{% load custom_tags %} {% load custom_tags %}
{% load i18n %}
<!-- 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>
@ -17,19 +18,16 @@
zoom: 5 zoom: 5
}).addControl(new maplibregl.NavigationControl()); }).addControl(new maplibregl.NavigationControl());
{% for an in adoption_notices %} {% for adoption_notice in adoption_notices %}
// create the popup // create the popup
const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setHTML(` const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setHTML(`{% include "fellchensammlung/partials/partial-adoption-notice.html" %}`);
<h1>{{ an.name }}</h1><p>{{ an.description }}</p>
`
);
// create DOM element for the marker // create DOM element for the marker
const el_{{ forloop.counter }} = document.createElement('div'); const el_{{ forloop.counter }} = document.createElement('div');
el_{{ forloop.counter }}.id = 'marker_{{ forloop.counter }}'; el_{{ forloop.counter }}.id = 'marker_{{ forloop.counter }}';
el_{{ forloop.counter }}.classList.add('marker'); el_{{ forloop.counter }}.classList.add('marker');
const location_popup_{{ forloop.counter }} = [{{ an.location.longitude | pointdecimal }}, {{ an.location.latitude | pointdecimal }}]; const location_popup_{{ forloop.counter }} = [{{ adoption_notice.location.longitude | pointdecimal }}, {{ adoption_notice.location.latitude | pointdecimal }}];
// create the marker // create the marker
new maplibregl.Marker({element: el_{{ forloop.counter }}}) new maplibregl.Marker({element: el_{{ forloop.counter }}})
.setLngLat(location_popup_{{ forloop.counter }}) .setLngLat(location_popup_{{ forloop.counter }})