{% block empty_viewer %}
  <script src="https://d3js.org/d3-color.v2.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>

  <div id="map" style="width: 100%; height: calc(100vh - 140px);"></div>

  <style>
  .basemapTool {
    background-color: #DCDCDC;
    padding: 2px;
    border: 2px solid #000;
    text-align: left;
    border-radius: 10px;
  }
  </style>

  <div id="basemapTool" class="basemapTool">
    <label for="basemapDropdown">Choose a basemap:</label>
    <select id="basemapDropdown" onChange='changeBasemap();'>
      <option>-- none --</option>
    </select>
  </div>

  <script>
    // Fill select drop down
    var options = geo.osmLayer.tileSources;
    for(const option in options){
      var newOption = document.createElement('option');
      newOption.value = option;
      newOption.text = options[option].name ? options[option].name : option;
    document.getElementById('basemapDropdown').appendChild(newOption)
    }

    // Initialize the map
    let map = geo.map({
      node: '#map',
      clampBoundsX: true
    })
    var basemapLayer = map.createLayer('osm', {
      source: getCookie('basemapChoice', 'osm'),
      gcs: 'EPSG:3857' // web mercator
    });

    // Tile layer for showing rasters/images with large_image
    var tileLayer = map.createLayer('osm', {
      keepLower: false,
      attribution: '',
      autoshareRenderer: false,
    });
    tileLayer.visible(false)

    // Increase zoom range from default of 16
    map.zoomRange({
      min: 0,
      max: 20,
    })

    // Feature/data layer
    let layer = map.createLayer('feature', {
      features: ['polygon', 'marker']
    });

    // User Interface layer
    var ui = map.createLayer('ui');

    // Create a zoom slider widget
    ui.createWidget('slider', {position: {left: 40, top: 40}});
    var basemapTool = ui.createWidget('dom', {position: {right: 20, top: 20}});
    basemapTool.canvas().appendChild(document.getElementById("basemapTool"))

    var basemapDropdown = document.getElementById("basemapDropdown")
    basemapDropdown.value = basemapLayer.source()
    function changeBasemap() {
      if (basemapDropdown.value == '-- none --') {
        basemapLayer.visible(false)
      } else {
        basemapLayer.visible(true)
        setCookie('basemapChoice', basemapDropdown.value)
        basemapLayer.source(basemapDropdown.value)
      }
    }

    // Annotation layer
    var annotationLayer = map.createLayer('annotation', {clickToEdit: true, showLabels: false});

    // Position the map to show data extents. If none present, the position
    //   should have been set by the search parameters
    function setBounds(extent, setMax=false) {
      if (extent != undefined && extent.xmin != undefined) {
        let xc = (extent.xmax - extent.xmin) * 0.2
        let yc = (extent.ymax - extent.ymin) * 0.2
        if (xc === 0) {
          xc = 0.01
        }
        if (yc === 0) {
          yc = 0.01
        }
        var bounds = {
          left: Math.max(extent.xmin - xc, -180.0),
          right: Math.min(extent.xmax + xc, 180.0),
          top: Math.min(extent.ymax + yc, 89.9999),
          bottom: Math.max(extent.ymin - yc, -89.9999)
        }
        map.bounds(bounds);
        if (setMax) {
          map.maxBounds(bounds)
        } else {
          map.zoom(map.zoom() - 0.25);
        }
      }
    }

  </script>
{% endblock %}
