{% extends "main.html" %}

{% block javascript %}

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

    var map = new mapboxgl.Map({
        container: 'map',
        style: {{ style }},
        center: {{ center }},
        zoom: {{ zoom }},
        pitch: {{ pitch }},
        bearing: {{ bearing }},
        transformRequest: (url, resourceType) => {
                    if ( url.slice(0,22) == 'https://api.mapbox.com' || 
                        url.slice(0,26) == 'https://a.tiles.mapbox.com' || 
                        url.slice(0,26) == 'https://b.tiles.mapbox.com' ||
                        url.slice(0,26) == 'https://c.tiles.mapbox.com' ||
                        url.slice(0,26) == 'https://d.tiles.mapbox.com') {
                        //Add Mapboxgl-Jupyter Plugin identifier for Mapbox API traffic
                        return {
                           url: [url.slice(0, url.indexOf("?")+1), "pluginName=PythonMapboxgl&", url.slice(url.indexOf("?")+1)].join('')
                         }
                     }
                     else {
                         //Do not transform URL for non Mapbox GET requests
                         return {url: url}
                     }
                }
    });

    {% block navigation %}

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

    {% endblock navigation %}

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

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

{% endblock %}