{% 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 %}
