{% extends "base.html" %}
{% load leaflet_tags %}

{% block head %}
    {% leaflet_js %}
    {% leaflet_css %}
    <style>
        .leaflet-container {  /* all maps */
            width:  100%;
            height: 800px;
        }
    </style>
    <script>
        var dataurl = '{% url "maps:data" %}';

        window.addEventListener("map:init", function (event) {
            var map = event.detail.map;
            // Download GeoJSON data with Ajax
            fetch(dataurl)
            .then(function(resp) {
                return resp.json();
            })
            .then(function(data) {
                L.geoJson(data, {
                onEachFeature: function onEachFeature(feature, layer) {
                    var props = feature.properties;
                    var content = `<img width="300" src="${props.picture_url}"/><h3>${props.title}</h3><p>${props.description}</p>`;
                    layer.bindPopup(content);
                }
            }).addTo(map);
            });
        });
    </script>
{% endblock head %}

{% block content %}

<div>
    <h1>
        Map:
    </h1>
</div>

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Maps (Mushroom Sports</h4>

        {% leaflet_map "main" %}

    </div>
</div>

{% endblock content %}