52 lines
1.1 KiB
HTML
52 lines
1.1 KiB
HTML
{% extends "froide_govplan/base.html" %}
|
|
{% block title %}
|
|
About - VerwaltungsTracker
|
|
{% endblock title %}
|
|
{% block meta %}
|
|
{% include "snippets/meta.html" %}
|
|
{% endblock meta %}
|
|
{% block app_body %}
|
|
|
|
<h1>Hello World!</h1>
|
|
|
|
<div id="map" style="width: 100%; height: 500px;"></div>
|
|
<script>
|
|
const map = new maplibregl.Map({
|
|
container: 'map',
|
|
style: 'https://demotiles.maplibre.org/style.json',
|
|
center: [8.4037, 49.0069],
|
|
zoom: 12,
|
|
maxBounds: [
|
|
[8.30, 48.95],
|
|
[8.55, 49.07]
|
|
]
|
|
});
|
|
|
|
map.addControl(new maplibregl.NavigationControl());
|
|
|
|
const markers = [
|
|
{
|
|
coords: [8.4037, 49.0069],
|
|
text: "Karlsruhe Palace"
|
|
},
|
|
{
|
|
coords: [8.3857, 49.0132],
|
|
text: "ZKM | Center for Art and Media"
|
|
},
|
|
{
|
|
coords: [8.4087, 49.0008],
|
|
text: "Karlsruhe Zoo"
|
|
}
|
|
];
|
|
|
|
markers.forEach(({ coords, text }) => {
|
|
const popup = new maplibregl.Popup({ offset: 25 }).setText(text);
|
|
new maplibregl.Marker()
|
|
.setLngLat(coords)
|
|
.setPopup(popup)
|
|
.addTo(map);
|
|
});
|
|
</script>
|
|
|
|
|
|
{% endblock app_body %}
|