{% load leaflet_tags %}
{% load staticfiles %}

{% leaflet_js %}
{% leaflet_css %}

<link rel="stylesheet" href="{% static 'geonode/css/leaflet.draw.css' %}"/>
<script src="{% static 'geonode/js/draw/leaflet.draw.js' %}"></script>

<style>
    .leaflet-container { /* all maps */
        height: 400px;
    }
</style>
<script type="text/javascript">
    var layerMap = null;
    var editableLayers = new L.FeatureGroup();

    document.addEventListener("DOMContentLoaded", function (event) {
        var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        });

        var OpenMapSurfer_Roads = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}', {
            maxZoom: 20,
            attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        });

        var base_maps = {
            "OpenMapSurfer_Roads": OpenMapSurfer_Roads,
            'OpenStreetMap': osm
        };

        var overlay_layer = {};

        var map = L.map('preview_map', {measureControl: true});
        layerMap = map;
        map.addLayer(OpenMapSurfer_Roads);

        {% if resource.bbox_string %}
            zoom_to_box(map, [{{ resource.bbox_string }}]);
        {% endif %}

        {% if resource.get_tiles_url %}
            var tiles_url = "{{ resource.get_tiles_url|safe }}";
            var last_letter_url =  tiles_url.charAt(tiles_url.length - 1);
            if(parseInt(last_letter_url)) {
                tiles_url = tiles_url.substring(0, tiles_url.length - 1);
            }
            tile_layer = L.tileLayer(tiles_url,
                    {
                        '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) {
            overlay_layer["{{ resource.title }}"] = tile_layer;
            map.addLayer(tile_layer);
        }
        layerControl = L.control.layers(
                base_maps, overlay_layer
        ).addTo(map);

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

        // add draw control
        map.addLayer(editableLayers);
        var drawControlOptions = {
            position: 'topleft',
            draw: {
                polyline: false,
                circle: false,
                rectangle: false,
                marker: false,
                polygon: {
                    allowIntersection: false,
                    drawError: {
                        color: '#e1e100',
                        message: '<strong>You can\'t draw that!</strong>'
                    },
                    shapeOptions: {
                        color: '#bada55'
                    }
                }
            },
            edit: {
                featureGroup: editableLayers,
                remove: true
            }
        };

        var drawControl = new L.Control.Draw(drawControlOptions);
        map.addControl(drawControl);

        map.on(L.Draw.Event.CREATED, function (e) {
            var type = e.layerType,
                layer= e.layer;

            editableLayers.addLayer(layer);
        })
    });

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