add a raster view for inspecting raster sources

ramSeraph · Dec 15, 2024 · 6afd49b · 6afd49b
1 parent 003dffe
commit 6afd49b
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 10 deletions.
diff --git a/server/mosaic_handler.js b/server/mosaic_handler.js
@@ -64,9 +64,10 @@ function _merge(config) {
 }
 
 class MosaicHandler {
-  constructor(url, tileSuffix, logger, datameetAttribution) {
+  constructor(url, type, tileSuffix, logger, datameetAttribution) {
     this.url = url;
     this.tileSuffix = tileSuffix;
+    this.type = type;
     this.logger = logger;
     this.pmtilesDict = null;
     this.mimeTypes = null;

diff --git a/server/pmtiles_handler.js b/server/pmtiles_handler.js
@@ -2,9 +2,10 @@ const pmtiles = require('pmtiles');
 const common = require('./common');
 
 class PMTilesHandler {
-  constructor(url, tileSuffix, logger, datameetAttribution) {
+  constructor(url, type, tileSuffix, logger, datameetAttribution) {
     this.source = new pmtiles.PMTiles(url);
     this.tileSuffix = tileSuffix;
+    this.type = type;
     this.header = null;
     this.metadata = null;
     this.mimeType = null;

diff --git a/server/server.js b/server/server.js
@@ -80,19 +80,28 @@ function addRoutes() {
   fastify.get('/view.js', async (request, reply) => {
     return reply.sendFile("view.js");
   });
+  fastify.get('/raster_view.css', async (request, reply) => {
+    return reply.sendFile("raster_view.css");
+  });
+  fastify.get('/static_view.js', async (request, reply) => {
+    return reply.sendFile("raster_view.js");
+  });
 
   Object.keys(handlerMap).forEach((rPrefix, _) => {
     const handler = handlerMap[rPrefix];
     const tileSuffix = handler.tileSuffix;
     fastify.get(`${rPrefix}:z/:x/:y.${tileSuffix}`, getTile.bind(null, handler));
     fastify.get(`${rPrefix}tiles.json`, getTileJson.bind(null, handler));
-    if (tileSuffix == 'webp') {
-      return;
-    }
     fastify.get(`${rPrefix}title`, getTitle.bind(null, handler));
-    fastify.get(`${rPrefix}view`, async (request, reply) => {
-      return reply.sendFile("view.html");
-    });
+    if (handler.type == 'raster') {
+      fastify.get(`${rPrefix}rasterview`, async (request, reply) => {
+        return reply.sendFile("raster_view.html");
+      });
+    } else {
+      fastify.get(`${rPrefix}view`, async (request, reply) => {
+        return reply.sendFile("view.html");
+      });
+    }
   });
   addSOIAncillaryRoutes(fastify);
   logger.info('done adding routes');
@@ -114,9 +123,9 @@ function createHandlers() {
       tilesuffix = 'webp';
     }
     if (rInfo['handlertype'] === 'mosaic') {
-      handlerMap[rPrefix] = new MosaicHandler(rInfo['url'], tilesuffix, logger, datameetAttribution);
+      handlerMap[rPrefix] = new MosaicHandler(rInfo['url'], type, tilesuffix, logger, datameetAttribution);
     } else {
-      handlerMap[rPrefix] = new PMTilesHandler(rInfo['url'], tilesuffix, logger, datameetAttribution);
+      handlerMap[rPrefix] = new PMTilesHandler(rInfo['url'], type, tilesuffix, logger, datameetAttribution);
     }
     handlerMap[rPrefix].setTitle(rInfo['name']);
   });

diff --git a/static/raster_view.css b/static/raster_view.css
@@ -0,0 +1,14 @@
+body {
+    margin:0;
+}
+div#map-wrapper {
+    display: flex;
+    width:100vw;
+    height:100vh;
+}
+div#map-wrapper div {
+    flex-basis: 100%;
+}
+div#map-left {
+    border-right:1px solid #000;
+}
diff --git a/static/raster_view.html b/static/raster_view.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8' />
+  <title>Inspect</title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+  <script src='https://unpkg.com/leaflet@latest/dist/leaflet.js'></script>
+  <!-- <script src='https://unpkg.com/pmtiles@latest/dist/pmtiles.js'></script> -->
+  <script src="https://cdn.rawgit.com/turban/Leaflet.Sync/master/L.Map.Sync.js"></script>
+  <link href='https://unpkg.com/leaflet@latest/dist/leaflet.css' rel='stylesheet'/>
+  <link href='/raster_view.css' rel='stylesheet'/>
+</head>
+
+<body>
+<script src='/raster_view.js'></script>
+<div id="map-wrapper">
+    <div id="map-left"></div>
+    <div id="map-right"></div>
+</div>
+</body>
+</html>
diff --git a/static/raster_view.js b/static/raster_view.js
@@ -0,0 +1,119 @@
+// Default options we'll use for both maps. Se the center of the map,
+// default zoom levels, and other Leaflet map options here.
+// some of this html/js was copied from https://kokoalberti.com/articles/georeferencing-and-digitizing-old-maps-with-gdal/ and https://server.nikhilvj.co.in/pmgsy
+
+const currUrl = window.location.href;
+
+function setTitle() {
+  const titleUrl = new URL('./title', currUrl).href;
+  fetch(titleUrl)
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then(data => {
+    document.title = data['title'];
+  })
+  .catch(error => {
+    console.error('Title fetch error:', error);
+  });
+}
+
+function getTileJSON(cb) {
+  const tileJsonUrl = new URL('./tiles.json', currUrl).href;
+  fetch(tileJsonUrl)
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then(data => {
+    console.log(data);
+    cb(data);
+  })
+  .catch(error => {
+    console.error('Title fetch error:', error);
+  });
+
+}
+setTitle();
+getTileJSON(addLayers);
+
+function addLayers(tileJSON) {
+  var OSM =  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors'
+  });
+  var OTM = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
+    maxZoom: 17,
+    attribution: 'Map data: {attribution.OpenStreetMap}, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
+  });
+  var gStreets = L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
+    maxZoom: 20,
+    subdomains: ['mt0','mt1','mt2','mt3'],
+    attribution: 'Map data &copy; 2022 Google'
+  });
+  var gHybrid = L.tileLayer('https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
+    maxZoom: 20,
+    subdomains:['mt0','mt1','mt2','mt3'],
+    attribution: 'Map data &copy; 2022 Google, Imagery &copy; 2022 TerraMetrics'
+  });
+  var esriWorld = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
+    maxNativeZoom:18,
+    maxZoom: 20
+  });
+
+  var layerOptions = {
+    maxZoom: tileJSON['maxzoom'],
+    minZoom: tileJSON['minzoom'],
+    attribution: tileJSON['attribution'],
+  };
+
+  var tileUrl = tileJSON['tiles'][0];
+
+
+  var main1 = L.tileLayer(tileUrl, layerOptions);
+  var main2 = L.tileLayer(tileUrl, layerOptions);
+
+  var baseLayers = {
+    "OpenStreetMap.org" : OSM,
+    "OpenTopoMap" : OTM,
+    "ESRI Satellite": esriWorld,
+    "gStreets": gStreets,
+    "gHybrid": gHybrid,
+    "main": main2
+  };
+
+  var options = {
+    center: [21.5, 78.5],
+    zoom: 5,
+    minZoom: 5,
+    maxZoom: 20,
+    attributionControl: false
+  };
+  options['zoomControl'] = false;
+
+  // Create the left and the right map in their respective containers
+  var map1 = L.map('map-left', options);
+  L.control.attribution({prefix: '', position: 'bottomleft'}).addTo(map1)
+  main1.addTo(map1);
+
+  options['layers'] = [OSM];
+  var map2 = L.map('map-right', options);
+  L.control.layers(baseLayers, {}, {collapsed: true, autoZIndex:false}).addTo(map2);
+  L.control.attribution({prefix: '', position: 'bottomright'}).addTo(map2)
+  L.control.scale({metric:true, imperial:false, position: "bottomright"}).addTo(map2);
+  L.control.zoom({ position: 'bottomright' }).addTo(map2);
+
+  // Use the Leaflet Sync extension to sync the right bottom corner
+  // of the left map to the left bottom corner of the right map, and
+  // vice versa.
+  map1.sync(map2, {offsetFn: L.Sync.offsetHelper([1, 1], [0, 1])});
+  map2.sync(map1, {offsetFn: L.Sync.offsetHelper([0, 1], [1, 1])});
+
+}
+