fix(landing): Support Terrain for NZTM and add default LINZ-Terrain i…

…nto debug (#3307)

### Motivation

We have default LINZ-Terrain source been added for all styleJson, this
could be added into terrain drop down as well.
Also, we should support terrain for NZTM2000Quad tileMatrix

### Modifications
- Filter LINZ-Terrain into the terrain and hillshade dropdown
- Enable terrain controle and set terrain exaggeration with 4.4 for NZTM

### Verification

![image](https://github.com/linz/basemaps/assets/12163920/3ae6ce03-f7ae-4ac5-bf43-7eeb45291d72)

packages/config/src/config/vector.style.ts

@@ -1,5 +1,16 @@
+import { GoogleTms, Nztm2000QuadTms } from '@basemaps/geo';
+
 import { ConfigBase } from './base.js';
 
+/**
+ * Default Terrain exaggeration settings for different projection
+ * NZTM terrain is too flat, it offsets the zoom level by 2 which means everything is approx 4x smaller than Google.
+ */
+export const DefaultExaggeration = {
+  [Nztm2000QuadTms.identifier]: 4.4,
+  [GoogleTms.identifier]: 1.2,
+};
+
 export interface SourceVector {
   type: 'vector';
   url: string;

packages/lambda-tiler/src/routes/tile.style.json.ts

@@ -1,4 +1,5 @@
 import { ConfigId, ConfigPrefix, ConfigTileSetRaster, Layer, Sources, StyleJson, TileSetType } from '@basemaps/config';
+import { DefaultExaggeration } from '@basemaps/config/build/config/vector.style.js';
 import { GoogleTms, TileMatrixSet, TileMatrixSets } from '@basemaps/geo';
 import { Env, toQueryString } from '@basemaps/shared';
 import { HttpHeader, LambdaHttpRequest, LambdaHttpResponse } from '@linzjs/lambda';
@@ -81,12 +82,12 @@ export interface StyleGet {
   };
 }
 
-function setStyleTerrain(style: StyleJson, terrain: string): void {
+function setStyleTerrain(style: StyleJson, terrain: string, tileMatrix: TileMatrixSet): void {
   const source = Object.keys(style.sources).find((s) => s === terrain);
   if (source == null) throw new LambdaHttpResponse(400, `Terrain: ${terrain} is not exists in the style source.`);
   style.terrain = {
     source,
-    exaggeration: 1.2,
+    exaggeration: DefaultExaggeration[tileMatrix.identifier] ?? DefaultExaggeration[GoogleTms.identifier],
   };
 }
 
@@ -143,7 +144,7 @@ export async function tileSetToStyle(
   await ensureTerrain(req, tileMatrix, apiKey, style);
 
   // Add terrain in style
-  if (terrain) setStyleTerrain(style, terrain);
+  if (terrain) setStyleTerrain(style, terrain, tileMatrix);
 
   const data = Buffer.from(JSON.stringify(style));
 
@@ -226,7 +227,7 @@ export async function tileSetOutputToStyle(
   await ensureTerrain(req, tileMatrix, apiKey, style);
 
   // Add terrain in style
-  if (terrain) setStyleTerrain(style, terrain);
+  if (terrain) setStyleTerrain(style, terrain, tileMatrix);
 
   const data = Buffer.from(JSON.stringify(style));
 
@@ -277,7 +278,7 @@ export async function styleJsonGet(req: LambdaHttpRequest<StyleGet>): Promise<La
   await ensureTerrain(req, tileMatrix, apiKey, style);
 
   // Add terrain in style
-  if (terrain) setStyleTerrain(style, terrain);
+  if (terrain) setStyleTerrain(style, terrain, tileMatrix);
 
   const data = Buffer.from(JSON.stringify(style));
 

packages/landing/src/components/debug.tsx

@@ -1,6 +1,7 @@
 import { ConfigImagery } from '@basemaps/config/build/config/imagery.js';
 import { ConfigTileSetRaster } from '@basemaps/config/build/config/tile.set.js';
-import { Epsg, GoogleTms, LocationUrl } from '@basemaps/geo';
+import { DefaultExaggeration } from '@basemaps/config/build/config/vector.style.js';
+import { GoogleTms, LocationUrl, TileMatrixSet } from '@basemaps/geo';
 import { RasterLayerSpecification, SourceSpecification } from 'maplibre-gl';
 import { ChangeEventHandler, Component, FormEventHandler, Fragment, ReactNode } from 'react';
 
@@ -361,7 +362,7 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> {
       return;
     }
 
-    const target = getTerrainForSource(sourceId, Config.map.tileMatrix.projection);
+    const target = getTerrainForSource(sourceId, Config.map.tileMatrix);
     // no changes
     if (currentTerrain?.source === sourceId && currentTerrain?.exaggeration === target.exaggeration) return;
 
@@ -455,7 +456,13 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> {
 
   getSourcesIds(type: string): string[] {
     const style = this.props.map.getStyle();
-    return Object.keys(style.sources).filter((id) => id.startsWith('basemaps') && style.sources[id].type === type);
+    if (type === 'raster-dem') {
+      return Object.keys(style.sources).filter(
+        (id) => !id.startsWith(HillShadePrefix) && style.sources[id].type === type,
+      );
+    } else if (type === 'raster') {
+      return Object.keys(style.sources).filter((id) => id.startsWith('basemaps') && style.sources[id].type === type);
+    } else throw new Error('Only support to get raster or raster-dem sources for debug dropdown.');
   }
 
   renderRasterSourceDropdown(): ReactNode | null {
@@ -657,9 +664,9 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> {
  * @param projection current projection
  * @returns
  */
-function getTerrainForSource(sourceId: string, projection: Epsg): { source: string; exaggeration: number } {
+function getTerrainForSource(sourceId: string, tileMatrix: TileMatrixSet): { source: string; exaggeration: number } {
   return {
     source: sourceId,
-    exaggeration: projection.code === Epsg.Nztm2000.code ? 4.4 : 1.1,
+    exaggeration: DefaultExaggeration[tileMatrix.identifier] ?? DefaultExaggeration[GoogleTms.identifier],
   };
 }

packages/landing/src/components/map.tsx

@@ -1,3 +1,4 @@
+import { DefaultExaggeration } from '@basemaps/config/build/config/vector.style.js';
 import { GoogleTms, LocationUrl } from '@basemaps/geo';
 import maplibre, { RasterLayerSpecification } from 'maplibre-gl';
 import { Component, ReactNode } from 'react';
@@ -96,24 +97,23 @@ export class Basemaps extends Component<unknown, { isLayerSwitcherEnabled: boole
   ensureElevationControl(): void {
     if (Config.map.debug['debug.screenshot']) return;
     if (Config.map.isDebug) return;
-    if (Config.map.tileMatrix === GoogleTms) {
-      if (this.controlTerrain != null) return;
-      // Try to find terrain source and add to the control
-      for (const [key, source] of Object.entries(this.map.getStyle().sources)) {
-        if (source.type === 'raster-dem') {
-          this.controlTerrain = new maplibre.TerrainControl({
-            source: key,
-            exaggeration: 1.2,
-          });
-          this.map.addControl(this.controlTerrain, 'top-left');
-          break;
-        }
+    if (this.controlTerrain != null) return;
+    // Try to find terrain source and add to the control
+    for (const [key, source] of Object.entries(this.map.getStyle().sources)) {
+      if (source.type === 'raster-dem') {
+        this.controlTerrain = new maplibre.TerrainControl({
+          source: key,
+          exaggeration:
+            DefaultExaggeration[Config.map.tileMatrix.identifier] ?? DefaultExaggeration[GoogleTms.identifier],
+        });
+        this.map.addControl(this.controlTerrain, 'top-left');
+        return;
       }
-    } else {
-      if (this.controlTerrain == null) return;
-      this.map.removeControl(this.controlTerrain);
-      this.controlTerrain = null;
     }
+
+    if (this.controlTerrain == null) return;
+    this.map.removeControl(this.controlTerrain);
+    this.controlTerrain = null;
   }
 
   /**

packages/landing/src/config.debug.ts

@@ -24,7 +24,6 @@ export interface DebugState {
   'debug.terrain': string | null;
   /** What layer should be visible only */
   'debug.layer': string | null;
-
   /** Should a hillshade be shown */
   'debug.hillshade': string | null;
 }