@basemaps/lambda-tiler 6.43.0 → 6.44.0

package/src/routes/preview.ts

@@ -0,0 +1,234 @@
+import { ConfigTileSetRaster } from '@basemaps/config';
+import { Bounds, ImageFormat, LatLon, Projection, TileMatrixSet } from '@basemaps/geo';
+import { CompositionTiff, Tiler } from '@basemaps/tiler';
+import { SharpOverlay, TileMakerSharp } from '@basemaps/tiler-sharp';
+import { HttpHeader, LambdaHttpRequest, LambdaHttpResponse } from '@linzjs/lambda';
+import { ConfigLoader } from '../util/config.loader.js';
+import { Etag } from '../util/etag.js';
+import { NotModified } from '../util/response.js';
+import { Validate } from '../util/validate.js';
+import { DefaultResizeKernel, TileXyzRaster, isArchiveTiff } from './tile.xyz.raster.js';
+import sharp from 'sharp';
+
+export interface PreviewGet {
+  Params: {
+    tileSet: string;
+    tileMatrix: string;
+    lat: string;
+    lon: string;
+    z: string;
+  };
+}
+
+const PreviewSize = { width: 1200, height: 630 };
+const TilerSharp = new TileMakerSharp(PreviewSize.width, PreviewSize.height);
+
+const OutputFormat = ImageFormat.Webp;
+/** Slightly grey color for the checker background */
+const PreviewBackgroundFillColor = 0xef;
+/** Make th e checkered background 30x30px */
+const PreviewBackgroundSizePx = 30;
+
+/**
+ * Serve a preview of a imagery set
+ *
+ * /v1/preview/:tileSet/:tileMatrixSet/:z/:lon/:lat
+ *
+ * @example
+ * Raster Tile `/v1/preview/aerial/WebMercatorQuad/12/177.3998405/-39.0852555`
+ *
+ */
+export async function tilePreviewGet(req: LambdaHttpRequest<PreviewGet>): Promise<LambdaHttpResponse> {
+  const tileMatrix = Validate.getTileMatrixSet(req.params.tileMatrix);
+  if (tileMatrix == null) return new LambdaHttpResponse(404, 'Tile Matrix not found');
+
+  req.set('tileMatrix', tileMatrix.identifier);
+  req.set('projection', tileMatrix.projection.code);
+
+  // TODO we should detect the format based off the "Accept" header and maybe default back to webp
+  req.set('extension', OutputFormat);
+
+  const location = Validate.getLocation(req.params.lon, req.params.lat);
+  if (location == null) return new LambdaHttpResponse(404, 'Preview location not found');
+  req.set('location', location);
+
+  const z = Math.ceil(parseFloat(req.params.z));
+  if (isNaN(z) || z < 0 || z > tileMatrix.maxZoom) return new LambdaHttpResponse(404, 'Preview zoom invalid');
+
+  const config = await ConfigLoader.load(req);
+
+  req.timer.start('tileset:load');
+  const tileSet = await config.TileSet.get(config.TileSet.id(req.params.tileSet));
+  req.timer.end('tileset:load');
+  if (tileSet == null) return new LambdaHttpResponse(404, 'Tileset not found');
+  // Only raster previews are supported
+  if (tileSet.type !== 'raster') return new LambdaHttpResponse(404, 'Preview invalid tile set type');
+
+  return renderPreview(req, { tileSet, tileMatrix, location, outputFormat: OutputFormat, z });
+}
+
+interface PreviewRenderContext {
+  /** Imagery to use */
+  tileSet: ConfigTileSetRaster;
+  /** output tilematrix to use */
+  tileMatrix: TileMatrixSet;
+  /** Center point of the preview */
+  location: LatLon;
+  /** Iamge format to render the preview as */
+  outputFormat: ImageFormat;
+  /** Zom level to be use, must be a integer */
+  z: number;
+}
+/**
+ * Render the preview!
+ *
+ * All the parameter validation is done in {@link tilePreviewGet} this function expects everything to align
+ *
+ * @returns 304 not modified if the ETag matches or 200 ok with the content of the image
+ */
+export async function renderPreview(req: LambdaHttpRequest, ctx: PreviewRenderContext): Promise<LambdaHttpResponse> {
+  const tileMatrix = ctx.tileMatrix;
+  // Convert the input lat/lon into the projected coordinates to make it easier to do math with
+  const coords = Projection.get(tileMatrix).fromWgs84([ctx.location.lon, ctx.location.lat]);
+
+  // use the input as the center point, but round it to the closest pixel to make it easier to do math
+  const point = tileMatrix.sourceToPixels(coords[0], coords[1], ctx.z);
+  const pointCenter = { x: Math.round(point.x), y: Math.round(point.y) };
+
+  // position of the preview in relation to the output screen
+  const screenBounds = new Bounds(
+    pointCenter.x - PreviewSize.width / 2,
+    pointCenter.y - PreviewSize.height / 2,
+    PreviewSize.width,
+    PreviewSize.height,
+  );
+
+  // Convert the screen bounds back into the source to find the assets we need to render the preview
+  const topLeft = tileMatrix.pixelsToSource(screenBounds.x, screenBounds.y, ctx.z);
+  const bottomRight = tileMatrix.pixelsToSource(screenBounds.right, screenBounds.bottom, ctx.z);
+  const sourceBounds = Bounds.fromBbox([topLeft.x, topLeft.y, bottomRight.x, bottomRight.y]);
+
+  const assetLocations = await TileXyzRaster.getAssetsForBounds(
+    req,
+    ctx.tileSet,
+    tileMatrix,
+    sourceBounds,
+    ctx.z,
+    true,
+  );
+
+  const cacheKey = Etag.key(assetLocations);
+  if (Etag.isNotModified(req, cacheKey)) return NotModified();
+
+  const assets = await TileXyzRaster.loadAssets(req, assetLocations);
+  const tiler = new Tiler(tileMatrix);
+
+  // Figure out what tiffs and tiles need to be read and where they are placed on the output image
+  const compositions: CompositionTiff[] = [];
+  for (const asset of assets) {
+    // there shouldn't be any Cotar archives in previews but ignore them to be safe
+    if (!isArchiveTiff(asset)) continue;
+    const result = tiler.getTiles(asset, screenBounds, ctx.z);
+    if (result == null) continue;
+    compositions.push(...result);
+  }
+
+  // Load all the tiff tiles and resize/them into the correct locations
+  req.timer.start('compose:overlay');
+  const overlays = (await Promise.all(
+    compositions.map((comp) => TilerSharp.composeTileTiff(comp, DefaultResizeKernel)),
+  ).then((items) => items.filter((f) => f != null))) as SharpOverlay[];
+  req.timer.end('compose:overlay');
+
+  // Create the output image and render all the individual pieces into them
+  const img = getBaseImage(ctx.tileSet.background);
+  img.composite(overlays);
+
+  req.timer.start('compose:compress');
+  const buf = await TilerSharp.toImage(ctx.outputFormat, img);
+  req.timer.end('compose:compress');
+
+  req.set('layersUsed', overlays.length);
+  req.set('bytes', buf.byteLength);
+  const response = new LambdaHttpResponse(200, 'ok');
+  response.header(HttpHeader.ETag, cacheKey);
+  response.header(HttpHeader.CacheControl, 'public, max-age=604800, stale-while-revalidate=86400');
+  response.buffer(buf, 'image/' + ctx.outputFormat);
+
+  const shortLocation = [ctx.location.lon.toFixed(7), ctx.location.lat.toFixed(7)].join('_');
+  const suggestedFileName = `preview_${ctx.tileSet.name}_z${ctx.z}_${shortLocation}.${ctx.outputFormat}`;
+  response.header('Content-Disposition', `inline; filename=\"${suggestedFileName}\"`);
+
+  return response;
+}
+
+function getBaseImage(bg?: { r: number; g: number; b: number; alpha: number }): sharp.Sharp {
+  if (bg == null || bg.alpha === 0) {
+    const buf = createCheckerBoard({
+      width: PreviewSize.width,
+      height: PreviewSize.height,
+      colors: { fill: PreviewBackgroundFillColor, background: 0xff },
+      size: PreviewBackgroundSizePx,
+    });
+    return sharp(buf.buffer, { raw: buf.raw });
+  }
+  return TilerSharp.createImage(bg);
+}
+
+export interface CheckerBoard {
+  /** Output image width in pixels */
+  width: number;
+  /** Output image height in pixels */
+  height: number;
+  colors: {
+    /** Color of the checker board eg 0xef */
+    fill: number;
+    /** Color of the background eg 0xff */
+    background: number;
+  };
+  /** Size of the checkers */
+  size: number;
+}
+
+/** Create a chess/checkerboard background alternating between two colors */
+function createCheckerBoard(ctx: CheckerBoard): {
+  buffer: Buffer;
+  raw: { width: number; height: number; channels: 1 };
+} {
+  const { width, height, size } = ctx;
+  const fillColor = ctx.colors.fill;
+  // Create a one band image, which starts off as full white
+  const buf = Buffer.alloc(height * width, ctx.colors.background); // 1 band grey buffer;
+
+  // Number of squares to make in x/y directions
+  const tileY = height / size;
+  const tileX = width / size;
+
+  // Fill in a square at the x/y pixel offsets
+  function fillSquare(xOffset: number, yOffset: number): void {
+    for (let y = 0; y < size; y++) {
+      const yPx = (yOffset + y) * width;
+      for (let x = 0; x < size; x++) {
+        const px = yPx + xOffset + x;
+        // Actually set the color
+        buf[px] = fillColor;
+      }
+    }
+  }
+  for (let tX = 0; tX < tileX; tX++) {
+    for (let tY = 0; tY < tileY; tY++) {
+      const yOffset = tY * size;
+      const y2 = tY % 2;
+
+      // Draw every second tile alternating on rows
+      const x2 = tX % 2;
+      if (x2 === 0 && y2 === 1) continue;
+      if (x2 === 1 && y2 === 0) continue;
+
+      const xOffset = tX * size;
+      fillSquare(xOffset, yOffset);
+    }
+  }
+
+  return { buffer: buf, raw: { width, height, channels: 1 } };
+}

package/src/routes/tile.xyz.raster.ts

@@ -24,46 +24,62 @@ export function getTiffName(name: string): string {
 
 export type CloudArchive = CogTiff | Cotar;
 
+/** Check to see if a cloud archive is a Tiff or a Cotar */
+export function isArchiveTiff(x: CloudArchive): x is CogTiff {
+  if (x instanceof CogTiff) return true;
+  if (x.source.uri.endsWith('.tiff')) return true;
+  if (x.source.uri.endsWith('.tif')) return true;
+  return false;
+}
+
 export const TileComposer = new TileMakerSharp(256);
 
-const DefaultResizeKernel = { in: 'lanczos3', out: 'lanczos3' } as const;
-const DefaultBackground = { r: 0, g: 0, b: 0, alpha: 0 };
+export const DefaultResizeKernel = { in: 'lanczos3', out: 'lanczos3' } as const;
+export const DefaultBackground = { r: 0, g: 0, b: 0, alpha: 0 };
 
 export const TileXyzRaster = {
-  async getAssetsForTile(req: LambdaHttpRequest, tileSet: ConfigTileSetRaster, xyz: TileXyz): Promise<string[]> {
+  async getAssetsForBounds(
+    req: LambdaHttpRequest,
+    tileSet: ConfigTileSetRaster,
+    tileMatrix: TileMatrixSet,
+    bounds: Bounds,
+    zoom: number,
+    ignoreOverview = false,
+  ): Promise<string[]> {
     const config = await ConfigLoader.load(req);
-    const imagery = await getAllImagery(config, tileSet.layers, [xyz.tileMatrix.projection]);
+    const imagery = await getAllImagery(config, tileSet.layers, [tileMatrix.projection]);
     const filteredLayers = filterLayers(req, tileSet.layers);
 
     const output: string[] = [];
-    const tileBounds = xyz.tileMatrix.tileToSourceBounds(xyz.tile);
 
     // All zoom level config is stored as Google zoom levels
-    const filterZoom = TileMatrixSet.convertZoomLevel(xyz.tile.z, xyz.tileMatrix, TileMatrixSets.get(Epsg.Google));
+    const filterZoom = TileMatrixSet.convertZoomLevel(zoom, tileMatrix, TileMatrixSets.get(Epsg.Google));
     for (const layer of filteredLayers) {
       if (layer.maxZoom != null && filterZoom > layer.maxZoom) continue;
       if (layer.minZoom != null && filterZoom < layer.minZoom) continue;
 
-      const imgId = layer[xyz.tileMatrix.projection.code];
-      if (imgId == null) {
-        req.log.warn({ layer: layer.name, projection: xyz.tileMatrix.projection.code }, 'Failed to lookup imagery');
-        continue;
-      }
+      const imgId = layer[tileMatrix.projection.code];
+      // Imagery does not exist for this projection
+      if (imgId == null) continue;
 
       const img = imagery.get(imgId);
       if (img == null) {
-        req.log.warn(
-          { layer: layer.name, projection: xyz.tileMatrix.projection.code, imgId },
-          'Failed to lookup imagery',
-        );
+        req.log.warn({ layer: layer.name, projection: tileMatrix.projection.code, imgId }, 'Failed to lookup imagery');
         continue;
       }
-      if (!tileBounds.intersects(Bounds.fromJson(img.bounds))) continue;
+      if (!bounds.intersects(Bounds.fromJson(img.bounds))) continue;
 
       for (const c of img.files) {
-        if (!tileBounds.intersects(Bounds.fromJson(c))) continue;
-
-        if (img.overviews && img.overviews.maxZoom >= filterZoom && img.overviews.minZoom <= filterZoom) {
+        if (!bounds.intersects(Bounds.fromJson(c))) continue;
+
+        // If there are overviews and they exist for this zoom range and we are not ignoring them
+        // lets use the overviews instead!
+        if (
+          img.overviews &&
+          img.overviews.maxZoom >= filterZoom &&
+          img.overviews.minZoom <= filterZoom &&
+          ignoreOverview !== true
+        ) {
           output.push(fsa.join(img.uri, img.overviews.path));
           break;
         }
@@ -75,15 +91,9 @@ export const TileXyzRaster = {
     return output;
   },
 
-  async tile(req: LambdaHttpRequest, tileSet: ConfigTileSetRaster, xyz: TileXyz): Promise<LambdaHttpResponse> {
-    if (xyz.tileType === VectorFormat.MapboxVectorTiles) return NotFound();
-
-    const assetPaths = await this.getAssetsForTile(req, tileSet, xyz);
-    const cacheKey = Etag.key(assetPaths);
-    if (Etag.isNotModified(req, cacheKey)) return NotModified();
-
+  async loadAssets(req: LambdaHttpRequest, assets: string[]): Promise<CloudArchive[]> {
     const toLoad: Promise<CloudArchive | null>[] = [];
-    for (const assetPath of assetPaths) {
+    for (const assetPath of assets) {
       toLoad.push(
         LoadingQueue((): Promise<CloudArchive | null> => {
           if (assetPath.endsWith('.tar.co')) {
@@ -100,7 +110,22 @@ export const TileXyzRaster = {
       );
     }
 
-    const assets = (await Promise.all(toLoad)).filter((f) => f != null) as CloudArchive[];
+    return (await Promise.all(toLoad)).filter((f) => f != null) as CloudArchive[];
+  },
+
+  async getAssetsForTile(req: LambdaHttpRequest, tileSet: ConfigTileSetRaster, xyz: TileXyz): Promise<string[]> {
+    const tileBounds = xyz.tileMatrix.tileToSourceBounds(xyz.tile);
+    return TileXyzRaster.getAssetsForBounds(req, tileSet, xyz.tileMatrix, tileBounds, xyz.tile.z);
+  },
+
+  async tile(req: LambdaHttpRequest, tileSet: ConfigTileSetRaster, xyz: TileXyz): Promise<LambdaHttpResponse> {
+    if (xyz.tileType === VectorFormat.MapboxVectorTiles) return NotFound();
+
+    const assetPaths = await this.getAssetsForTile(req, tileSet, xyz);
+    const cacheKey = Etag.key(assetPaths);
+    if (Etag.isNotModified(req, cacheKey)) return NotModified();
+
+    const assets = await TileXyzRaster.loadAssets(req, assetPaths);
 
     const tiler = new Tiler(xyz.tileMatrix);
     const layers = await tiler.tile(assets, xyz.tile.x, xyz.tile.y, xyz.tile.z);

package/src/util/validate.ts

@@ -1,4 +1,4 @@
-import { ImageFormat, Projection, TileMatrixSet, TileMatrixSets, VectorFormat } from '@basemaps/geo';
+import { ImageFormat, LatLon, Projection, TileMatrixSet, TileMatrixSets, VectorFormat } from '@basemaps/geo';
 import { Const, isValidApiKey, truncateApiKey } from '@basemaps/shared';
 import { getImageFormat } from '@basemaps/tiler';
 import { LambdaHttpRequest, LambdaHttpResponse } from '@linzjs/lambda';
@@ -55,6 +55,15 @@ export const Validate = {
     if (tileType === VectorFormat.MapboxVectorTiles) return VectorFormat.MapboxVectorTiles;
     return null;
   },
+
+  /** Validate that a lat and lon are between -90/90 and -180/180 */
+  getLocation(lonIn: string, latIn: string): LatLon | null {
+    const lat = parseFloat(latIn);
+    const lon = parseFloat(lonIn);
+    if (isNaN(lon) || lon < -180 || lon > 180) return null;
+    if (isNaN(lat) || lat < -90 || lat > 90) return null;
+    return { lon, lat };
+  },
   /**
    * Validate that the tile request is somewhat valid
    * - Valid projection