{% extends 'base_leaflet.html' %}
{% load leaflet_tags %}
{% load geojson_tags %}
{% block content %}
    <h1><i class="fa fa-fw fa-map"></i> Carte des localités</h1>
    {% leaflet_map "main" %}
    <br/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-tilelayer-geojson/1.0.4/TileLayer.GeoJSON.min.js"></script>
    <script src="js/leaflet/leaflet.ajax.min.js"></script>
    <script type="text/javascript">
        function popUp(f, l) {
            var out = [];
            if (f.properties) {
                for (key in f.properties) {
                    out.push("<b>" + key + "</b>: " + f.properties[key]);
                }
                l.bindPopup(out.join("<br />"));
            }
        }

        var territory_style = {
            "color": "#1779ba",
            "weight": 2,
            "opacity": 0.5
        };
        var location_style = {
            "clickable": true,
            "color": "#00D",
            "fillColor": "#00D",
            "weight": 1.0,
            "opacity": 0.3,
            "fillOpacity": 0.2
        };
        var location_hoverstyle = {
            "fillOpacity": 0.5
        };
        var data_territory = new L.GeoJSON.AJAX(["{% url "data_territory" %}"], {
            onEachFeature: popUp,
            style: territory_style
        }).addTo(map);
        var geojsonTileLayer = new L.TileLayer.GeoJSON('{% url "data_place_tile" %}', {
                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(location_hoverstyle);
                        });
                        layer.on('mouseout', function () {
                            layer.setStyle(location_style);
                        });
                    }
                }
            }
        );
        map.addLayer(geojsonTileLayer);

    </script>
{% endblock %}