{% extends 'base_leaflet.html' %}
{% load leaflet_tags i18n %}
{% leaflet_js %}
{% leaflet_css %}
{% load geojson_tags %}
{% block content %}
    <h1><a href="{% url 'sights:place_create' %}" class="btn btn-primary pull-right"><i
            class="fa fa-fw fa-map-marker"></i>{% trans 'Créer une localité' %}</a>
        <i class="fa fa-fw fa-map"></i> Carte des localités</h1>
    <div id="progress">
        <div id="progress-bar"></div>
    </div>
    {% leaflet_map "main" %}
    <br/>
    <script type="text/javascript">
        var dataurl = '{% url "api:geodata_place" %}';
        window.addEventListener("map:init", function (event) {
            var markers = L.markerClusterGroup({chunkedLoading: true, spiderfyDistanceMultiplier: 3});

            var style_data = {
                radius: 8,
                fillColor: "#ff4c41",
                color: "#ddd",
                weight: 2,
                opacity: 1,
                fillOpacity: 0.8
            };


            var map = event.detail.map;

            map.spin(true);

            // Fonction plein écran
            map.addControl(new L.Control.Fullscreen());


            // Géolocalisation de l'utilisateur

            var locateOptions = {
                flyTo: true,
                title: 'Ma position',
                icon: 'fa fa-location-arrow',
            };

            L.control.locate(locateOptions).addTo(map);

            // Recherche par adresse
            map.addControl(new L.Control.Search({
                url: 'https://nominatim.openstreetmap.org/search?format=json&accept-language=de-DE&q={s}',
                jsonpParam: 'json_callback',
                propertyName: 'display_name',
                propertyLoc: ['lat', 'lon'],
                markerLocation: true,
                autoType: true,
                autoCollapse: true,
                minLength: 2,
                zoom: 13,
                text: 'Suchen...',
                textCancel: 'Annuler',
                textErr: 'Erreur'
            }));

            // Download GeoJSON data with Ajax
            fetch(dataurl, {
                credentials: "include"
            })
                .then(function (resp) {
                    return resp.json();
                })
                .then(function (data) {
                    var locationLayer = L.geoJson(data, {
                        onEachFeature: function onEachFeature(feature, layer) {
                            var props = feature.properties;
                            var content = `<a class="btn btn-primary btn-sm btn-block" align="center" style="color:white;" href="/place/${props.pk}/detail" target="_blank" style="font-color:white"><strong>${props.name}</strong></a>`;
                            layer.bindPopup(content);
                        }
                        ,
                        pointToLayer: function (feature, latlng) {
                            return L.circleMarker(latlng, style_data);
                        }
                    });
                    markers.addLayer(locationLayer).addTo(map);
                })
                .then(function () {
                    map.spin(false);
                });

        });
    </script>
{% endblock %}