{% load i18n %}
{% load static %}
{% load teramap %}

{% block extra_head %}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js"></script>

    <style>
        .teramap {
            width: 100%;
            height: 400px;
            isolation: isolate;
        }
        .leaflet-top, .leaflet-bottom {
            z-index: 499;
        }
    </style>

    <link rel="stylesheet" href="{% static "teramap/maps.css" %}?version={% teramap_version %}"/>
    <script src="{% static "teramap/maps.js" %}?version={% teramap_version %}"></script>
{% endblock %}

{% block extra_body %}
    {% block layers %}
    <script>
        var baselayers = {
            'Streets': L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }),
            'Topo': L.tileLayer('//server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
                attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
            }),
            'Satellite': L.tileLayer('//server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
            })
        };
        var overlays = {};
    </script>
    {% endblock layers %}
    {% block teramap_init %}
        {% if not prevent_instantiation %}
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                var map = teramap.map_with_geojson('{{ teramap_id|default:"teramap" }}', {
                    layersControlOptions: { collapsed: true },
                    baselayers: baselayers,
                    overlays: overlays,
                    center: [{{ teramap_center|default:'51, -0.09' }}],
                    zoom: {{ teramap_zoom|default:'13' }},
                    fullscreenControl: true,
                    searchControl: true,
                    preventAccidentalScroll: {{ preventAccidentalScroll|default:'true'}},
                    geojson: {{ geojson | safe }}
                });
                window.map = map;
                map.geojson_layer.on('ready', function () { map.reload(); });
            });
        </script>
        {% endif %}
    {% endblock %}
{% endblock %}