{% extends 'base_leaflet.html' %}
{% load leaflet_tags %}
{% leaflet_js %}
{% leaflet_css %}
{% load geojson_tags %}
{% block content %}
    <h1><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 src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-tilelayer-geojson/1.0.4/TileLayer.GeoJSON.min.js"></script>
    <script type="text/javascript">
        {#var dataurl = '{% url "api:geodata_place" %}';#}
        window.addEventListener("map:init", function (event) {
            var style = {
                "clickable": true,
                "color": "#00D",
                "fillColor": "#00D",
                "weight": 1.0,
                "opacity": 0.3,
                "fillOpacity": 0.2
            };
            var hoverStyle = {
                "fillOpacity": 0.5
            };

            var geojsonURL = '/place/api/{z}/{x}/{y}.geojson';
            var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, {
                    credentials: true,
                    clipTiles: true,
                    unique: function (feature) {
                        return feature.id;
                    }
                }, {
                    style: style,
                    onEachFeature: function (feature, layer) {
                        if (feature.properties) {
                            var popupString = '<div class="popup">';
                            for (var k in feature.properties) {
                                var v = feature.properties[k];
                                popupString += k + ': ' + v + '<br />';
                            }
                            popupString += '</div>';
                            layer.bindPopup(popupString);
                        }
                        if (!(layer instanceof L.Point)) {
                            layer.on('mouseover', function () {
                                layer.setStyle(hoverStyle);
                            });
                            layer.on('mouseout', function () {
                                layer.setStyle(style);
                            });
                        }
                    }
                }
            );
            var credentialGeojsonTileLayer = geojsonTileLayer.credentials;
            credentialGeojsonTileLayer.addTo(map);
            {#map.addLayer(geojsonTileLayer);#}
        });
    </script>
{% endblock %}