<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>TiPG 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%;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='map'></div>
  <script>
    var map = new maplibregl.Map({
      container: 'map',
      style: {
        version: 8,
        sources: {
          'toner-lite': {
            type: 'raster',
            tiles: [
              'https://stamen-tiles-a.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png',
              'https://stamen-tiles-b.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png',
              'https://stamen-tiles-c.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png',
              'https://stamen-tiles-d.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png'
            ],
            tileSize: 256,
            attribution:
              'Map tiles by <a href="https://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
          }
        },
        layers: [
          {
            'id': 'basemap',
            'type': 'raster',
            'source': 'toner-lite',
            'minzoom': 0,
            'maxzoom': 20
          }
        ]
      },
      center: [0, 0],
      zoom: 1
    })

    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)

          const layername = Object.values(data.vector_layers)[0].id;
          map.addSource('table', {
            type: 'vector',
            ...data
          })

          map.addLayer({
            id: 'view-polygon',
            source: 'table',
            'source-layer': layername,
            type: 'fill',
            filter: ["==", "$type", "Polygon"],
            paint: {
              'fill-color': 'rgba(200, 100, 240, 0.4)',
              'fill-outline-color': '#000'
            }
          })

          map.addLayer({
            id: 'view-polygon-outline',
            source: 'table',
            'source-layer': layername,
            type: 'line',
            filter: ["==", "$type", "Polygon"],
            paint: {
              'line-color': '#000',
              'line-width': 1,
              'line-opacity': 0.75
            }
          })

          map.addLayer({
            id: 'view-point',
            source: 'table',
            'source-layer': layername,
            filter: ["==", "$type", "Point"],
            type: 'circle',
            paint: {
              'circle-color': 'rgba(200, 100, 240, 1)',
              'circle-radius': 2.5,
              'circle-opacity': 1
            }
          })

          map.addLayer({
            id: 'view-line',
            source: 'table',
            'source-layer': layername,
            filter: ["==", "$type", "LineString"],
            type: 'line',
            paint: {
              'line-color': 'rgba(200, 100, 240, 0.4)',
              'line-width': 1,
              'line-opacity': 0.75
            }
          });

          // Change the cursor to a pointer when the mouse is over the places layer.
          map.on('mouseenter', 'view-polygon', function () {
            map.getCanvas().style.cursor = 'pointer'
          })

          // Change it back to a pointer when it leaves.
          map.on('mouseleave', 'view-polygon', function () {
            map.getCanvas().style.cursor = ''
          })

          map.on('click', 'view-polygon', function (e) {
            props = e.features[0].properties;
            t = '<table>';
            for (var key in props){
              t += "<tr><td>" + key + "</td><td>" + props[key] + "</td></tr>";
            }
            t += '</table>';
            new maplibregl.Popup()
              .setLngLat(e.lngLat)
              .setHTML(t)
              .addTo(map);
          })
        })
    })
  </script>
</body>
</html>
