snapshot-viewer.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Snapshot {{SNAPSHOT}} – Field Papers Tiler</title>
    <script src="https://unpkg.com/maplibre-gl@^5.1.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@^5.1.0/dist/maplibre-gl.css" rel="stylesheet" />
  </head>
  <body>
    <div id="map" style="height:100vh;width:100vw;position:absolute;left:0;top:0;"></div>
    <script>
      window.addEventListener('load', function() {
        var map = new maplibregl.Map({
          container: 'map', // container id
          style: {
            "version": 8,
            "sources": {
              "snapshot": {
                "type": "raster",
                "url": window.location.origin + "/snapshots/{{SNAPSHOT}}/index.json"
              }
            },
            "layers": [
              {
                "id": "snapshot",
                "source": "snapshot",
                "type": "raster"
              }
            ]
          },
          center: [0, 0],
          zoom: 1,
          hash: true
        });
        // Add zoom and rotation controls to the map.
        map.addControl(new maplibregl.NavigationControl({
            visualizePitch: true,
            showZoom: true,
            showCompass: true
        }));
        map.fitBounds({{BOUNDS}});
      });
    </script>
  </body>
</html>