{% extends "layout.html" %}

{% block head_links %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js" integrity="sha512-rmZcZsyhe0/MAjquhTgiUcb4d9knaFc7b5xAfju483gbEXTkeJRUMIPk6s3ySZMYUHEcjKbjLjyddGWMrNEvZg==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
         integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
         crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
         integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
         crossorigin=""></script>
    <link rel="stylesheet" href="static/css/leaflet.awesome-markers.css">
    <script src="static/js/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
{% endblock %}


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