feat(landing): Add Config Debug for screenshot elevation data.

packages/geo/src/__tests__/slug.test.ts

@@ -20,6 +20,8 @@ describe('LocationUrl', () => {
       lat: -41.2890657,
       lon: 174.7769262,
       zoom: 16,
+      bearing: 0,
+      pitch: 0,
     });
   });
 
@@ -29,6 +31,8 @@ describe('LocationUrl', () => {
       lat: -41.277848,
       lon: 174.7763921,
       zoom: 8,
+      bearing: 0,
+      pitch: 0,
     });
   });
 
@@ -51,4 +55,58 @@ describe('LocationUrl', () => {
     assert.equal(LocationSlug.fromSlug('@-41.27785,274.77639,z1'), null);
     assert.equal(LocationSlug.fromSlug('@-41.27785,-274.77639,z1'), null);
   });
+
+  it('should slug the bearing and pitch', () => {
+    assert.equal(
+      LocationSlug.toSlug({ lat: -41.277848, lon: 174.7763921, zoom: 8 }, { bearing: 25.3, pitch: -35.722 }),
+      `@-41.2778480,174.7763921,z8,b25.3,p-35.722`,
+    );
+    assert.deepEqual(LocationSlug.fromSlug(`@-41.2778480,174.7763921,z8,b25.3,p-35.722`), {
+      lat: -41.277848,
+      lon: 174.7763921,
+      zoom: 8,
+      bearing: 25.3,
+      pitch: -35.722,
+    });
+  });
+
+  it('should slug the bearing only when pitch is 0', () => {
+    assert.equal(
+      LocationSlug.toSlug({ lat: -41.277848, lon: 174.7763921, zoom: 8 }, { bearing: 25.3, pitch: 0 }),
+      `@-41.2778480,174.7763921,z8,b25.3`,
+    );
+    assert.deepEqual(LocationSlug.fromSlug(`@-41.2778480,174.7763921,z8,b25.3`), {
+      lat: -41.277848,
+      lon: 174.7763921,
+      zoom: 8,
+      bearing: 25.3,
+      pitch: 0,
+    });
+  });
+
+  it('should slug the pitch only bearing pitch is 0', () => {
+    assert.equal(
+      LocationSlug.toSlug({ lat: -41.277848, lon: 174.7763921, zoom: 8 }, { bearing: 0, pitch: -0.01 }),
+      `@-41.2778480,174.7763921,z8,p-0.01`,
+    );
+    assert.deepEqual(LocationSlug.fromSlug(`@-41.2778480,174.7763921,z8,p-0.01`), {
+      lat: -41.277848,
+      lon: 174.7763921,
+      zoom: 8,
+      bearing: 0,
+      pitch: -0.01,
+    });
+  });
+
+  it('should fail if bearing is outside of bounds', () => {
+    assert.notEqual(LocationSlug.fromSlug('@-41.2778480,174.7763921,z8,b360'), null);
+    assert.equal(LocationSlug.fromSlug('@-41.2778480,174.7763921,z8,b360.01'), null);
+    assert.equal(LocationSlug.fromSlug('@-41.2778480,174.7763921,z8,b-0.00001'), null);
+  });
+
+  it('should fail if pitch is outside of bounds', () => {
+    assert.notEqual(LocationSlug.fromSlug('@-41.2778480,174.7763921,z8,p35'), null);
+    assert.equal(LocationSlug.fromSlug('@-41.2778480,174.7763921,z8,p-60.1'), null);
+    assert.equal(LocationSlug.fromSlug('@-41.2778480,174.7763921,z8,p70'), null);
+  });
 });

packages/geo/src/slug.ts

@@ -11,6 +11,13 @@ export interface LonLatZoom extends LonLat {
   zoom: number;
 }
 
+export interface Camera {
+  bearing: number;
+  pitch: number;
+}
+
+export type MapPosition = LonLatZoom & Camera;
+
 export interface LocationQueryConfig {
   /**
    * Style name which is generally a `tileSetId`
@@ -61,8 +68,16 @@ export const LocationSlug = {
     };
   },
 
+  cameraStr(camera?: Camera): string {
+    let str = '';
+    if (camera == null) return str;
+    if (camera.bearing !== 0) str += `,b${camera.bearing}`;
+    if (camera.pitch !== 0) str += `,p${camera.pitch}`;
+    return str;
+  },
+
   /**
-   * Encode a location into the format `@${lat},${lon},z${zoom}`
+   * Encode a location into the format `@${lat},${lon},z${zoom},b${bearing},p${pitch}`
    *
    * This will truncate the lat, lon and zoom with {@link LocationSlug.truncateLatLon}
    *
@@ -72,9 +87,9 @@ export const LocationSlug = {
    * @-39.30426,174.07941,z13.5
    * ```
    */
-  toSlug(loc: LonLatZoom): string {
+  toSlug(loc: LonLatZoom, camera?: Camera): string {
     const fixed = LocationSlug.truncateLatLon(loc);
-    return `@${fixed.lat},${fixed.lon},z${fixed.zoom}`;
+    return `@${fixed.lat},${fixed.lon},z${fixed.zoom}${this.cameraStr(camera)}`;
   },
 
   /**
@@ -96,19 +111,23 @@ export const LocationSlug = {
    * - -90 <= lat <= 90
    * - -190 <= lon <= 180
    * - 0 <= zoom <= 32
+   * - 0 <= bearing <= 360
+   * - -60 <= pitch <= 60
    *
    * @example
    *
    * ```
-   * /@-39.3042625,174.0794181,z22
+   * /@-39.3042625,174.0794181,z22,b225,p12.5
    * #@-39.30426,174.07941,z13.5
    * ```
    *
    * @returns location if parsed and validates, null otherwise
    */
-  fromSlug(str: string): LonLatZoom | null {
-    const output: Partial<LonLatZoom> = {};
-    const [latS, lonS, zoomS] = removeLocationPrefix(str).split(',');
+  fromSlug(str: string): MapPosition | null {
+    const output: Partial<MapPosition> = {};
+    const splits = removeLocationPrefix(str).split(',');
+    const [latS, lonS, zoomS] = splits.slice(0, 3);
+    const camera = splits.slice(3);
 
     const lat = parseFloat(latS);
     if (isNaN(lat) || lat < -90 || lat > 90) return null;
@@ -122,7 +141,22 @@ export const LocationSlug = {
     if (zoom == null || isNaN(zoom) || zoom < 0 || zoom > 32) return null;
     output.zoom = zoom;
 
-    return output as LonLatZoom;
+    for (const c of camera) {
+      if (c.startsWith('b')) {
+        const bearing = parseFloat(c.slice(1));
+        if (isNaN(bearing) || bearing < 0 || bearing > 360) return null;
+        output.bearing = bearing;
+      } else if (c.startsWith('p')) {
+        const pitch = parseFloat(c.slice(1));
+        if (isNaN(pitch) || pitch < -60 || pitch > 60) return null;
+        output.pitch = pitch;
+      }
+    }
+
+    if (output.bearing == null) output.bearing = 0;
+    if (output.pitch == null) output.pitch = 0;
+
+    return output as MapPosition;
   },
 
   /*

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

@@ -144,14 +144,18 @@ export async function tileSetOutputToStyle(
           tileSize: 256,
         };
       }
+    }
+  }
 
-      // Add layer for each source and default to the first layer
+  // Add first raster source as default layer
+  for (const source of Object.keys(sources)) {
+    if (sources[source].type === 'raster') {
       layers.push({
-        id: `${styleId}-${output.name}`,
+        id: styleId,
         type: 'raster',
-        source: `${styleId}-${output.name}`,
-        layout: { visibility: layers.length === 0 ? 'visible' : 'none' },
+        source,
       });
+      break;
     }
   }
 

packages/landing/src/components/debug.tsx

@@ -1,7 +1,7 @@
 import { ConfigImagery } from '@basemaps/config/build/config/imagery.js';
 import { ConfigTileSetRaster } from '@basemaps/config/build/config/tile.set.js';
-import { Source } from '@basemaps/config/build/config/vector.style.js';
 import { GoogleTms, LocationUrl } from '@basemaps/geo';
+import { RasterLayerSpecification } from 'maplibre-gl';
 import { ChangeEventHandler, Component, FormEventHandler, Fragment, ReactNode } from 'react';
 
 import { MapAttrState } from '../attribution.js';
@@ -62,7 +62,7 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> {
     onMapLoaded(map, () => {
       Config.map.on('change', () => {
         if (this.props.map == null) return;
-        const loc = LocationUrl.toSlug(Config.map.getLocation(this.props.map));
+        const loc = LocationUrl.toSlug(Config.map.getLocation(this.props.map), Config.map.getCamera(this.props.map));
         const locationSearch = '?' + MapConfig.toUrl(Config.map);
         window.history.replaceState(null, '', loc + locationSearch);
         this.updateFromConfig();
@@ -94,6 +94,8 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> {
     this.debugMap.adjustVector(this.props.map, Config.map.debug['debug.layer.linz-topographic']);
     this.setVectorShown(Config.map.debug['debug.source'], 'source');
     this.setVectorShown(Config.map.debug['debug.cog'], 'cog');
+    this.setTerrainShown(Config.map.debug['debug.elevation']);
+    this.setVisibleSource(Config.map.debug['debug.layer']);
     this.renderWMTS();
   }
 
@@ -166,7 +168,8 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> {
         {this.renderCogToggle()}
         {this.renderSourceToggle()}
         {this.renderTileToggle()}
-        {this.renderOutputsDropdown()}
+        {this.renderRasterSourceDropdown()}
+        {this.renderDemSourceDropdown()}
       </div>
     );
   }
@@ -257,18 +260,36 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> {
     aEl.remove();
   };
 
-  selectLayer = (event: React.ChangeEvent<HTMLSelectElement>): void => {
-    const layerId = event.target.value;
-    const layers = this.props.map.getStyle().layers;
+  selectRasterSource = (event: React.ChangeEvent<HTMLSelectElement>): void => {
+    const sourceId = event.target.value;
+    this.setVisibleSource(sourceId);
+  };
 
-    // Always Set visible layer first before set others invisible
-    this.props.map.setLayoutProperty(layerId, 'visibility', 'visible');
+  selectElevation = (event: React.ChangeEvent<HTMLSelectElement>): void => {
+    const sourceId = event.target.value;
+    this.setTerrainShown(sourceId);
+  };
 
-    // Disable other unselected layers
-    for (const layer of layers) {
-      if (layer.id !== layerId) this.props.map.setLayoutProperty(layer.id, 'visibility', 'none');
+  setTerrainShown(sourceId: string | null): void {
+    if (sourceId == null) return;
+    Config.map.setDebug('debug.elevation', sourceId);
+    if (sourceId === 'off') this.props.map.setTerrain(null);
+    const terrainSource = this.props.map.getSource(sourceId);
+    if (terrainSource) {
+      this.props.map.setTerrain({
+        source: terrainSource.id,
+        exaggeration: 1,
+      });
     }
-  };
+  }
+
+  setVisibleSource(sourceId: string | null): void {
+    if (sourceId == null) return;
+    Config.map.setDebug('debug.layer', sourceId);
+    const layer = { id: Config.map.styleId, type: 'raster', source: sourceId } as RasterLayerSpecification;
+    this.props.map.removeLayer(Config.map.styleId);
+    this.props.map.addLayer(layer);
+  }
 
   renderSourceToggle(): ReactNode {
     if (this.state.imagery == null) return null;
@@ -292,19 +313,54 @@ export class Debug extends Component<{ map: maplibregl.Map }, DebugState> {
     );
   }
 
-  renderOutputsDropdown(): ReactNode | null {
+  getSourcesIds(type: string): string[] {
     const style = this.props.map.getStyle();
-    // Disable dropdown if only one layer
-    if (style.layers.length <= 1) return;
+    return Object.keys(style.sources).filter((id) => id.startsWith('basemaps') && style.sources[id].type === type);
+  }
+
+  renderRasterSourceDropdown(): ReactNode | null {
     // Disable for vector map
-    if ((Object.values(style.sources) as unknown as Array<Source>).find((s) => s.type === 'vector')) return;
+    if (Config.map.isVector) return;
+    // Disable dropdown if only one source
+    const sourceIds = this.getSourcesIds('raster');
+    if (sourceIds.length <= 1) return;
+    // Get default source
+    const selectedSource = this.props.map.getLayer(Config.map.styleId)?.source;
+    if (selectedSource == null) return;
+
+    return (
+      <div className="debug__info">
+        <label className="debug__label">Outputs</label>
+        <div className="debug__value">
+          <select onChange={this.selectRasterSource} value={selectedSource}>
+            {sourceIds.map((id) => {
+              return <option key={id}>{id}</option>;
+            })}
+          </select>
+        </div>
+      </div>
+    );
+  }
+
+  renderDemSourceDropdown(): ReactNode | null {
+    // Disable for vector map
+    if (Config.map.isVector) return;
+    // Disable dropdown if non dem source
+    const sourceIds = this.getSourcesIds('raster-dem');
+    if (sourceIds.length === 0) return;
+
+    // Default to turn off terrain dem
+    const terrain = this.props.map.getTerrain();
+    const selectedTerrain = terrain ? terrain.source : 'off';
+
     return (
       <div className="debug__info">
-        <label className="debug__label">Available Layers</label>
+        <label className="debug__label">Elevations</label>
         <div className="debug__value">
-          <select onChange={this.selectLayer}>
-            {style.layers.map((layer) => {
-              return <option key={layer.id}>{layer.id}</option>;
+          <select onChange={this.selectElevation} value={selectedTerrain}>
+            <option key="off">off</option>
+            {sourceIds.map((id) => {
+              return <option key={id}>{id}</option>;
             })}
           </select>
         </div>

packages/landing/src/components/map.switcher.tsx

@@ -32,6 +32,8 @@ export class MapSwitcher extends Component {
       style,
       center: [location.lon, location.lat], // starting position [lon, lat]
       zoom: location.zoom, // starting zoom
+      bearing: cfg.location.bearing,
+      pitch: cfg.location.pitch,
       attributionControl: false,
     });
 
@@ -76,6 +78,8 @@ export class MapSwitcher extends Component {
 
     this.map.setZoom(Math.max(location.zoom - 4, 0));
     this.map.setCenter([location.lon, location.lat]);
+    this.map.setBearing(Config.map.location.bearing);
+    this.map.setPitch(Config.map.location.pitch);
     this.forceUpdate();
   };