{% load i18n %}
<div id="map"><div id="leaflet"></div></div>
<script>
    var map = new L.Map("leaflet");
    map.attributionControl.setPrefix('');
    var osm = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '{% trans 'Map © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' %}',
        maxZoom: 18
    });
    map.addLayer(osm);

    var mapit = mapit || {};
    mapit.area_loaded = function(data) {
        var area = new L.GeoJSON(data);
        area.on('dblclick', function(e){
            var z = map.getZoom() + (e.originalEvent.shiftKey ? -1 : 1);
            map.setZoomAround(e.containerPoint, z);
        });
        area.mapit_id = this.mapit.id;
        if (this.mapit.text) {
            area.on('mouseover', function(e) {
                e.target.setStyle({ color: '#f00' });
            });
            area.on('mouseout', function(e) {
                e.target.setStyle({ color: '#38f' });
            });
            area.bindPopup(this.mapit.text);
        }
        mapit.areas.addLayer(area);
        map.fitBounds(mapit.areas.getBounds());
    };
    mapit.areas = L.featureGroup().addTo(map);
</script>
