{% load leaflet_tags %}

{% leaflet_js %}
{% leaflet_css %}

<style>
    .leaflet-container { /* all maps */
        height: 400px;
    }
    
    .leaflet-control-zoom, .leaflet-control-zoomslider {  /* all controls */
        position: relative;
        left: 0px !important;
    }
</style>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function (event) {
      L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({

        onAdd: function (map) {
          // Triggered when the layer is added to a map.
          // Register a click listener, then do all the upstream WMS things
          L.TileLayer.WMS.prototype.onAdd.call(this, map);
          map.on('click', this.getFeatureInfo, this);
        },

        onRemove: function (map) {
          // Triggered when the layer is removed from a map.
          // Unregister a click listener, then do all the upstream WMS things
          L.TileLayer.WMS.prototype.onRemove.call(this, map);
          map.off('click', this.getFeatureInfo, this);
        },

        getFeatureInfo: function (evt) {
          // Make an AJAX request to the server and hope for the best
          var url = this.getFeatureInfoUrl(evt.containerPoint),
              showResults = L.Util.bind(this.showGetFeatureInfo, this);
          // console.log(url);
          $.ajax({
            url: url,
            success: function (data, status, xhr) {
              var err = typeof data === 'string' ? null : data;
              showResults(err, evt.latlng, data);
            },
            error: function (xhr, status, error) {
              showResults(error);
            }
          });
        },

        getFeatureInfoUrl: function (layerPoint) {
          // Construct a GetFeatureInfo request URL given a point
          if (!map) {
              map = this._map;
          }
          // Compute WMS options
          var bounds = map.getBounds();
          var size = map.getSize();
          var wmsVersion = parseFloat(this.wmsParams.version);
          var crs = this.options.crs || map.options.crs;
          var projectionKey = wmsVersion >= 1.3 ? 'crs' : 'srs';
          var nw = crs.project(bounds.getNorthWest());
          var se = crs.project(bounds.getSouthEast());

          // Assemble WMS parameter string

          var size = this._map.getSize(),
              params = {
                request: 'GetFeatureInfo',
                service: 'WMS',
                srs: 'EPSG:4326',
                styles: this.wmsParams.styles,
                transparent: this.wmsParams.transparent,
                version: this.wmsParams.version,
                format: this.wmsParams.format,
                // bbox: this._map.getBounds().toBBoxString(),
                height: size.y,
                width: size.x,
                layers: this.wmsParams.layers,
                query_layers: this.wmsParams.layers,
                info_format: 'text/html'
              };
          params[projectionKey] = crs.code;
          params.bbox = (
              wmsVersion >= 1.3 && crs === L.CRS.EPSG4326 ?
              [se.y, nw.x, nw.y, se.x] :
              [nw.x, se.y, se.x, nw.y]
          ).join(',');

          params[params.version === '1.3.0' ? 'i' : 'x'] = Math.floor(layerPoint.x);
          params[params.version === '1.3.0' ? 'j' : 'y'] = Math.floor(layerPoint.y);

          return this._url + L.Util.getParamString(params, this._url, true);
        },

        showGetFeatureInfo: function (err, latlng, content) {
          if (err) { console.log(err); return; } // do nothing if there's an error

          // Otherwise show the content in a popup, or something.
          L.popup({ maxWidth: 900, maxHeight: 200})
            .setLatLng(latlng)
            .setContent(content)
            .openOn(this._map);
        }
      });

        L.tileLayer.betterWms = function (url, options) {
          return new L.TileLayer.BetterWMS(url, options);
        };
        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 unesco = L.tileLayer(
            'http://en.unesco.org/tiles/{z}/{x}/{y}.png', {
            attribution: '&copy; unesco'
        });

        var unesco_geodata = L.tileLayer(
            'http://en.unesco.org/tiles/geodata/{z}/{x}/{y}.png', {
            attribution: '&copy; unesco'
        });
		
        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>'
        });

        // not yet available
        // var unesco_white = L.tileLayer(
        //     'http://en.unesco.org/tiles/white/{z}/{x}/{y}.png', {
        //     attribution: '&copy; unesco'
        // });

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

        var overlay_layer = {};

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

      	//add elements to maps page
        var scale_bar = L.control.scale().addTo(map);
       	//var attribution = L.control.attribution({prefix: 'UNESCO-IHP-Wins'}).addTo(map);
      	//on surcharge attribution
      	map.attributionControl.addAttribution('<a href="http://en.unesco.org/themes/water-security/hydrology", class="your_class">UNESCO-IHP-Wins</a>');

        L.Control.Watermark = L.Control.extend({
          onAdd: function(map) {
          var img = L.DomUtil.create('img');

          // Default to Geonode logo
          img.src = '{{ STATIC_URL }}/geonode/img/logo.png';
          img.style.width = '120px';

          return img;
          },

          onRemove: function(map) {
          // Nothing to do here
          }
        });

        L.control.watermark = function(opts) {
          return new L.Control.Watermark(opts);
        }

        L.control.watermark({ position: 'bottomright' }).addTo(map);

        // L.control.measureControl.addTo(map);
        map.addLayer(OpenMapSurfer_Roads);

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

        var tile_layer;
        {% 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.betterWms('{{ resource.ows_url|safe }}', {
                layers: '{{ resource.alternate }}',
                format: 'image/png',
                transparent: true,
                'opacity': 0.8
            });
        {%  elif resource.ptype == "gxp_arcrestsource" %}
            tile_layer = L.esri.dynamicMapLayer('{{ resource.ows_url|safe }}', {
                layers: '{{ resource.alternate }}',
                format: 'png',
                transparent: true,
                'opacity': 0.8
            });
        {% elif resource.ows_url %}
            tile_layer = L.tileLayer.betterWms('{{ resource.ows_url|safe }}', {
              layers: '{{ resource.alternate }}',
              transparent: true,
              format: 'image/png'
            });
        {% endif %}

        if (tile_layer != null) {
            overlay_layer["{{ resource.title }}"] = tile_layer;
            map.addLayer(tile_layer);
        }
        var layerControl = L.control.layers(
                base_maps, overlay_layer
        ).addTo(map);

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

        if(L.Control.hasOwnProperty('opacitySlider')) {
            //adjust opacity
            var opacitySlider = new L.Control.opacitySlider();
            map.addControl(opacitySlider);

            opacitySlider.setOpacityLayer(tile_layer);
        }

        if(L.control.hasOwnProperty('navbar')){
            //adjust info
            L.control.navbar().addTo(map);
        }
  });
  function zoom_to_box(map, bbox) {
          var bounds = [
              [bbox[1], bbox[0]],
              [bbox[3], bbox[2]]
          ];
          map.fitBounds(bounds);
      }

</script>
