nach-und-nach/templates/map.html

{% extends "layout.html" %}

{% block content %}
<div id="map"></div>

<script type="text/javascript">

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
});

var tileUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
var mapAttribution = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';

var map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [osm]
});

var baseMaps = {"OpenStreetMap": osm};
var overlayMaps = {};


{% for type, group in marker_groups.items() %}
    var grmarkers = [];

    var iconSettings = L.AwesomeMarkers.icon({
      icon: "{{ group['icon'] }}",
      markerColor: "{{ group['color'] }}",
      prefix: "fa"
    });

    {% for marker in group["liste"] %}
        var marker = L.marker(
            [{{ marker['long'] }}, {{ marker['lat'] }}],
            {icon: iconSettings}
        ).addTo(map)
        .bindPopup("<span class='fw-bold'>{{ marker['name'] }}</span></br> {{marker['shortdescription']}} </br><a href='{{marker['url']}}'>{{marker['url']}}</a>")
        .openPopup();

        grmarkers.push(marker);

    {% endfor %}

    var grLayerGr = L.layerGroup(grmarkers);
    overlayMaps["<i class='fa fa-{{group['icon']}} me-1' style='color: {{group['color']}}'></i>{{ type }}"] = grLayerGr;

{% endfor %}
var layerControl = L.control.layers(baseMaps, overlayMaps, {collapsed:false, hideSingleBase:true}).addTo(map);

var checkboxes = document.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].type == "checkbox") {
        checkboxes[i].checked = true;
    }
}
</script>
{% endblock %}