{% extends 'base.html.j2' %}
{% set active_page = "map" %}

{% block content %}
<div class="flex-fill mt-3 mb-sm-3" id="osm-map"></div>
{% endblock %}

{% block js %}
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script type="text/javascript">
    var markerdata = {{ markers | tojson }};

    var map = L.map(document.getElementById('osm-map'));
    L.tileLayer('https://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png').addTo(map);

    markerdata.forEach(data => {
        marker = L.marker(L.latLng(data['lat'], data['lon'])).addTo(map);
        marker.bindTooltip(data['label'])
    });
    var target = L.latLng('51.8449', '5.8428');  // Nijmegen
    map.setView(target, 13);
</script>
{% endblock %}