{% extends "tileserver/baseTileViewer.html" %}

{% block tileViewer %}

<div class="geojsControls">
  {% include 'tileserver/_include/geojs.html' %}
  {% include 'tileserver/_include/geojsControls.html' %}
</div>


<script>
  let extents = JSON.parse('{{ bounds|tojson }}');
  setBounds(extents, false)

  // Make sure regions outside the extent of the raster do not load null tiles
  //   this relieves strain on the tile server
  tileLayer.isValid = (index) => {
    const tileBounds = tileLayer.gcsTileBounds(index);
    return tileBounds.left <= extents.xmax &&
      tileBounds.right >= extents.xmin &&
      tileBounds.top >= extents.ymin &&
      tileBounds.bottom <= extents.ymax;
  }
  tileLayer.idleAfter = 'all';
  tileLayer.visible(true);
  tileLayer.url(tileUrl)

  function updateTileLayer() {
    tileLayer.url(tileUrl)
  }

  function updateTilesOpacity(e, value) {
    value = Number(value) / 100.0;
    tileLayer.opacity(value);
  }


  var boxjson = {
    "type": "Polygon",
    "coordinates": [
      [
        [extents.xmin, extents.ymin],
        [extents.xmin, extents.ymax],
        [extents.xmax, extents.ymax],
        [extents.xmax, extents.ymin],
        [extents.xmin, extents.ymin]
      ]
    ]
  };
  reader.read(boxjson, (features) => {
    features[0].style({
        strokeColor: 'red',
        fill: false
      })
      .draw();
  });
</script>

{% endblock %}
