{% extends "main.html" %}

{% block javascript %}

    mapboxgl.accessToken = '{{ accessToken }}';

    var transformRequest = function(url, resourceType) {
        const isMapboxRequest = url.slice(8, 22) === 'api.mapbox.com' ||
          url.slice(10, 26) === 'tiles.mapbox.com';
      
        return {
          url: isMapboxRequest ? url.replace('?', '?pluginName=PythonMapboxgl&') : url
        }
    };

    var map = new mapboxgl.Map({
        container: 'map',
        attributionControl: false,
        style: {{ style }},
        center: {{ center }},
        zoom: {{ zoom }},
        pitch: {{ pitch }},
        bearing: {{ bearing }},
        scrollZoom: {{ scrollZoomOn|safe }},
        touchZoom: {{ touchZoomOn|safe }},
        doubleClickZoom: {{ doubleClickZoomOn|safe }},
        boxZoom: {{ boxZoomOn|safe }},
        preserveDrawingBuffer: {{ preserveDrawingBuffer|safe }},
        transformRequest: transformRequest
    });

    {% block attribution %}
    
        map.addControl(new mapboxgl.AttributionControl({ compact: true }));

    {% endblock attribution %}

    {% block navigation %}

        map.addControl(new mapboxgl.NavigationControl());

    {% endblock navigation %}

    {% block legend %}{% endblock legend %}

    {% block scale %}
        
        {% if showScale %}
        
            map.addControl(new mapboxgl.ScaleControl({ unit: '{{ scaleUnits }}' }), '{{ scalePosition }}');
        
        {% endif %}

    {% endblock scale %}

    {% block map %}{% endblock map %}

{% endblock %}