<!DOCTYPE html>
    <html>
    <head>
        <meta charset='utf-8' />
        <title>TiTiler Map Viewer</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
        <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />

        <style>
            body { margin:0; padding:0; width:100%; height:100%; background-color: #e5e5e5;}
            #map { position:absolute; top:0; bottom:0; width:100%; }
            .zoom-info {
                z-index: 10;
                position: absolute;
                bottom: 0;
                right: 0;
                padding: 5px;
                width: auto;
                height: auto;
                font-size: 12px;
                color: #000;
            }
            @media(max-width: 767px) {
              .maplibrectrl-attrib {
                  font-size: 10px;
              }
            }
        </style>
    </head>
    <body>

    <div id='map'>
      <div class="zoom-info">Zoom: <span id="zoom"></span></div>
    </div>

    <script>

var map = new maplibregl.Map({
  container: 'map',
  style: {
    version: 8,
    sources: {},
    layers: []
  },
  center: [0, 0],
  zoom: 1
})

map.on('zoom', function (e) {
  const z = (map.getZoom()).toString().slice(0, 4)
  document.getElementById('zoom').textContent = z
})

const bboxPolygon = (bounds) => {
    return {
        'type': 'Feature',
        'geometry': {
            'type': 'Polygon',
            'coordinates': [[
                [bounds[0], bounds[1]],
                [bounds[2], bounds[1]],
                [bounds[2], bounds[3]],
                [bounds[0], bounds[3]],
                [bounds[0], bounds[1]]
            ]]
        },
        'properties': {}
    }
}

const addAOI = (bounds) => {
  if (map.getLayer('aoi-polygon')) map.removeLayer('aoi-polygon')
  if (map.getSource('aoi')) map.removeSource('aoi')
  const geojson = {
      "type": "FeatureCollection",
      "features": [bboxPolygon(bounds)]
  }

  map.addSource('aoi', {
    'type': 'geojson',
    'data': geojson
  })

  map.addLayer({
    id: 'aoi-polygon',
    type: 'line',
    source: 'aoi',
    layout: {
      'line-cap': 'round',
      'line-join': 'round'
    },
    paint: {
      'line-color': '#3bb2d0',
      'line-width': 1
    }
  })
  return
}

map.on('load', () => {

  fetch('{{ tilejson_endpoint|safe }}')
    .then(res => {
      if (res.ok) return res.json()
      throw new Error('Network response was not ok.')
    })
    .then(data => {
      console.log(data)

      let bounds = [...data.bounds]
      // Bounds crossing dateline
      if (bounds[0] > bounds[2]) {
        bounds[0] = bounds[0] - 360
      }
      map.fitBounds(
        [[bounds[0], bounds[1]], [bounds[2], bounds[3]]]
      )
      addAOI(bounds)

      map.addSource(
        'raster',
        {
          type: 'raster',
          bounds: data.bounds,
          minzoom: data.minzoom,
          maxzoom: data.maxzoom,
          tiles: data.tiles,
        }
      )

      map.addLayer(
        {
          id: 'raster',
          type: 'raster',
          source: 'raster',
        }
      )

    })
    .catch(err => {
      console.warn(err)
    })
})
    </script>
    </body>
    </html>
