{% load leaflet_tags %}

{% leaflet_js %}
{% leaflet_css %}

{% leaflet_map "preview_map" creatediv=False %}
<style>
  .leaflet-container {  /* all maps */
    height: 400px;
  }
</style>
<script type="text/javascript">
    window.addEventListener("map:init", function (e) {
        var map = e.detail.map;
        {% if resource.bbox_string %}
        zoom_to_box(map, [{{ resource.bbox_string }}]);
        {% endif %}

        {% if resource.get_tiles_url %}
        tile_layer = L.tileLayer("{{ resource.get_tiles_url|safe }}",
        {
         'opacity':0.8
        });
        {%  elif resource.ptype == "gxp_wmscsource"  %}
            tile_layer = L.tileLayer.wms('{{ resource.ows_url|safe }}', {
                layers: '{{ resource.typename }}',
                format: 'image/png',
                transparent: true,
                'opacity':0.8
            });
        {%  elif resource.ptype == "gxp_arcrestsource" %}
            tile_layer = L.esri.dynamicMapLayer('{{ resource.ows_url|safe }}', {
                layers: '{{ resource.typename }}',
                format: 'png',
                transparent: true,
                'opacity':0.8
            });

        {% endif %}
        if (tile_layer != null) {
            map.layerscontrol.addOverlay(tile_layer,"{{ resource.title }}");
            map.addLayer(tile_layer);
        }

        if (L.control.hasOwnProperty('fullscreen')) {
            L.control.fullscreen().addTo(map);
        }

    });
    function zoom_to_box(map, bbox){
        var bounds = [
            [bbox[1], bbox[0]],
            [bbox[3], bbox[2]]
        ];
        map.fitBounds(bounds);
    }
</script>
