{% set map = __SELF__.map %}

<div id="{{ map.fieldId }}" style="height: {{ map.height }}"></div>

{% put scripts %}
    <script>

        var {{ map.fieldId }} = L.map('{{ map.fieldId }}').setView([{{ map.latitude }}, {{ map.longitude }}], {{ map.zoom }});

        var defaultIcon = L.icon({
            iconUrl: '/plugins/timfoerster/leaflet/assets/leaflet/images/marker-icon.png',
            iconRetinaUrl: '/plugins/timfoerster/leaflet/assets/leaflet/images/marker-icon-2x.png',
            shadowUrl: '/plugins/timfoerster/leaflet/assets/leaflet/images/marker-shadow.png',

            iconSize:    [25, 41],
            shadowSize:  [41, 41],
            iconAnchor:  [12, 41],
            popupAnchor: [1, -34],
            tooltipAnchor: [16, -28]
        });

        {% if map.mapboxAccessToken %}
            L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={{ map.mapboxAccessToken }}', {
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
                maxZoom: {{ map.maxZoom }},
                id: '{{ map.mapboxId }}',
                accessToken: '{{ map.mapboxAccessToken }}'
            }).addTo({{ map.fieldId }});
        {% else %}
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
                maxZoom: {{ map.maxZoom }}
            }).addTo({{ map.fieldId }});
        {% endif %}
        var paramters = {};
        {% for object in map.objectsToDisplay %}
            parameters = {% if object.parameters %} {{ object.parameters|replace({"\n":'', "\r":''})|trim|raw }} {% else %} {} {% endif %};
            {% if object.type == 'marker' %}
                {% if object.icon is not empty %}
                    parameters['icon'] = icon{{ object.icon }};
                {% else %}
                    parameters['icon'] = defaultIcon;
                {% endif %}
            {% endif %}
            var mapObject{{ loop.index }} = L.{{ object.type }}([{{ object.position|trim }}], parameters).addTo({{ map.fieldId }});
            {% if object.popup %}
                mapObject{{ loop.index }}.bindPopup('{{ object.popup|replace({"\n":'', "\r":''})|trim|raw }}');
            {% endif %}
        {% endfor %}
    </script>
{% endput %}
