feat(landing): store the maps bounds to provide a better bounding box intersection

Author: blacha

packages/landing/src/attribution.ts

@@ -1,12 +1,11 @@
 import { Attribution } from '@basemaps/attribution';
 import { AttributionBounds } from '@basemaps/attribution/build/attribution.js';
-import { GoogleTms, Stac, TileMatrixSet } from '@basemaps/geo';
-import { BBox } from '@linzjs/geojson';
+import { Stac } from '@basemaps/geo';
 import * as maplibre from 'maplibre-gl';
 
 import { onMapLoaded } from './components/map.js';
 import { Config } from './config.js';
-import { locationTransform } from './tile.matrix.js';
+import { mapToBoundingBox } from './tile.matrix.js';
 import { MapOptionType } from './url.js';
 
 const Copyright = `© ${Stac.License} LINZ`;
@@ -39,7 +38,7 @@ export class MapAttributionState {
     // Note that Mapbox rendering 512×512 image tiles are offset by one zoom level compared to 256×256 tiles.
     // For example, 512×512 tiles at zoom level 4 are equivalent to 256×256 tiles at zoom level 5.
     zoom += 1;
-    const extent = MapAttributionState.mapboxBoundToBbox(map.getBounds(), zoom, Config.map.tileMatrix);
+    const extent = mapToBoundingBox(map, zoom, Config.map.tileMatrix);
     return attr.filter({
       extent,
       zoom: zoom,
@@ -62,17 +61,6 @@ export class MapAttributionState {
     return attrsByYear;
   }
 
-  /**
-   * Covert Mapbox Bounds to tileMatrix BBox
-   */
-  static mapboxBoundToBbox(bounds: maplibre.LngLatBounds, zoom: number, tileMatrix: TileMatrixSet): BBox {
-    const swLocation = { lon: bounds.getWest(), lat: bounds.getSouth(), zoom: zoom };
-    const neLocation = { lon: bounds.getEast(), lat: bounds.getNorth(), zoom: zoom };
-    const swCoord = locationTransform(swLocation, GoogleTms, tileMatrix);
-    const neCoord = locationTransform(neLocation, GoogleTms, tileMatrix);
-    const bbox: BBox = [swCoord.lon, swCoord.lat, neCoord.lon, neCoord.lat];
-    return bbox;
-  }
 
   // Ignore DEMS from the attribution list
   isIgnored = (attr: AttributionBounds): boolean => {

packages/landing/src/components/layer.switcher.dropdown.tsx

@@ -1,4 +1,5 @@
 import { Bounds, GoogleTms, Projection } from '@basemaps/geo';
+import { intersection, MultiPolygon, truncate, Wgs84 } from '@linzjs/geojson';
 import { ChangeEventHandler, Component, ReactNode } from 'react';
 import Select from 'react-select';
 
@@ -187,11 +188,11 @@ export class LayerSwitcherDropdown extends Component<unknown, LayerSwitcherDropd
     const filterToExtent = this.state.filterToExtent;
 
     const location = Config.map.location;
-    const loc3857 = Projection.get(GoogleTms).fromWgs84([location.lon, location.lat]);
-    const tileSize = GoogleTms.tileSize * GoogleTms.pixelScale(Math.floor(location.zoom)); // width of 1 tile
-    // Assume the current bounds are 3x3 tiles, todo would be more correct to use the map's bounding box but we dont have access to it here
-    const bounds = new Bounds(loc3857[0], loc3857[1], 1, 1).scaleFromCenter(3 * tileSize, 3 * tileSize);
+    if (location == null || location.extent == null) return { options: [], current: null, hidden, total };
 
+    const mapExtent = Wgs84.bboxToMultiPolygon(location.extent);
+
+    truncate;
     let current: Option | null = null;
 
     for (const layer of this.state.layers.values()) {
@@ -201,7 +202,7 @@ export class LayerSwitcherDropdown extends Component<unknown, LayerSwitcherDropd
       // Always show the current layer
       if (layer.id !== currentLayer) {
         // Limit all other layers to the extent if requested
-        if (filterToExtent && !doesLayerIntersect(bounds, layer)) {
+        if (filterToExtent && !doesLayerIntersect(mapExtent, layer)) {
           hidden++;
           continue;
         }
@@ -228,25 +229,22 @@ export class LayerSwitcherDropdown extends Component<unknown, LayerSwitcherDropd
 }
 
 /**
- * Determine if the bounds in EPSG:3857 intersects the provided layer
- *
- * TODO: It would be good to then use a more comprehensive intersection if the bounding box intersects,
- * there are complex polygons inside the attribution layer that could be used but they do not have all
- * the polygons
+ * Determine if the polygon intersects the provided layer
  *
- * @param bounds Bounding box in EPSG:3857
+ * @param bounds polygon to check
  * @param layer layer to check
  * @returns true if it intersects, false otherwise
  */
-function doesLayerIntersect(bounds: Bounds, layer: LayerInfo): boolean {
+function doesLayerIntersect(bounds: MultiPolygon, layer: LayerInfo): boolean {
   // No layer information assume it intersects
   if (layer.lowerRight == null || layer.upperLeft == null) return true;
 
-  // It is somewhat easier to find intersections in EPSG:3857
-  const ul3857 = Projection.get(GoogleTms).fromWgs84(layer.upperLeft);
-  const lr3857 = Projection.get(GoogleTms).fromWgs84(layer.lowerRight);
-
-  const layerBounds = Bounds.fromBbox([ul3857[0], ul3857[1], lr3857[0], lr3857[1]]);
+  const poly = Wgs84.bboxToMultiPolygon([
+    layer.lowerRight[0],
+    layer.upperLeft[1],
+    layer.upperLeft[0],
+    layer.lowerRight[1],
+  ]);
 
-  return bounds.intersects(layerBounds);
+  return intersection(bounds, poly).length > 0;
 }

packages/landing/src/config.map.ts

@@ -14,7 +14,7 @@ import { LngLatBoundsLike } from 'maplibre-gl';
 
 import { ConfigDebug, DebugDefaults, DebugState } from './config.debug.js';
 import { Config } from './config.js';
-import { locationTransform } from './tile.matrix.js';
+import { locationTransform, mapToBoundingBox } from './tile.matrix.js';
 import { ensureBase58, MapLocation, MapOptionType, WindowUrl } from './url.js';
 
 /** Default center point if none provided */
@@ -191,6 +191,9 @@ export class MapConfig extends Emitter<MapConfigEvents> {
     const pitch = map.getPitch();
     if (bearing !== 0) location.bearing = bearing;
     if (pitch !== 0) location.pitch = pitch;
+
+    const bounds = mapToBoundingBox(map, zoom, Config.map.tileMatrix);
+    location.extent = bounds;
     return location;
   }
 
@@ -204,7 +207,8 @@ export class MapConfig extends Emitter<MapConfigEvents> {
       l.lon === this.location.lon &&
       l.zoom === this.location.zoom &&
       l.bearing === this.location.bearing &&
-      l.pitch === this.location.pitch
+      l.pitch === this.location.pitch &&
+      sameExtent(l, this.location)
     ) {
       return;
     }
@@ -213,6 +217,7 @@ export class MapConfig extends Emitter<MapConfigEvents> {
     this.location.zoom = l.zoom;
     this.location.bearing = l.bearing;
     this.location.pitch = l.pitch;
+    this.location.extent = l.extent;
     this.emit('location', this.location);
     this.emit('change');
   }
@@ -274,6 +279,23 @@ export class MapConfig extends Emitter<MapConfigEvents> {
   }
 }
 
+/**
+ * Are two location's extents the same
+ * @param a location A
+ * @param b location B
+ * @returns true if the extents are exactly the same false otherwise
+ */
+function sameExtent(a: MapLocation, b: MapLocation): boolean {
+  if (a.extent == null && b.extent == null) return true;
+  if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return false;
+    }
+    return true;
+  }
+  return false;
+}
+
 export interface LayerInfo {
   /** Layer id to use when fetching tiles */
   id: string;

packages/landing/src/tile.matrix.ts

@@ -1,4 +1,5 @@
-import { GoogleTms, Nztm2000QuadTms, Nztm2000Tms, Projection, TileMatrixSet } from '@basemaps/geo';
+import { BoundingBox, Bounds, GoogleTms, Nztm2000QuadTms, Nztm2000Tms, Projection, TileMatrixSet } from '@basemaps/geo';
+import { BBox } from '@linzjs/geojson';
 import { StyleSpecification } from 'maplibre-gl';
 
 import { Config } from './config.js';
@@ -76,6 +77,25 @@ export function locationTransform(
   return { lon: Math.round(lonLat[0] * 1e8) / 1e8, lat: Math.round(lonLat[1] * 1e8) / 1e8, zoom: location.zoom };
 }
 
+/**
+ * Covert map Bounds to tileMatrix BBox
+ */
+export function mapToBoundingBox(map: maplibregl.Map, zoom: number, tileMatrix: TileMatrixSet): BBox {
+  const bounds = map.getBounds();
+  const swLocation = { lon: bounds.getWest(), lat: bounds.getSouth(), zoom: zoom };
+  const neLocation = { lon: bounds.getEast(), lat: bounds.getNorth(), zoom: zoom };
+  const swCoord = locationTransform(swLocation, GoogleTms, tileMatrix);
+  const neCoord = locationTransform(neLocation, GoogleTms, tileMatrix);
+  // Truncate all coordiantes to 8 DP (~1mm)
+  const bbox: BBox = [
+    Math.round(swCoord.lon * 1e8) / 1e8,
+    Math.round(swCoord.lat * 1e8) / 1e8,
+    Math.round(neCoord.lon * 1e8) / 1e8,
+    Math.round(neCoord.lat * 1e8) / 1e8,
+  ];
+  return bbox;
+}
+
 /**
  * Project a geojson object into the target tile matrix with use with maplibre
  *

packages/landing/src/url.ts

@@ -1,6 +1,7 @@
 import { base58, isBase58 } from '@basemaps/config/build/base58.js';
 import { GoogleTms, TileMatrixSet } from '@basemaps/geo';
 import { toQueryString } from '@basemaps/shared/build/url.js';
+import { BBox } from '@linzjs/geojson';
 
 import { LabelsDisabledLayers } from './components/map.label.js';
 import { Config } from './config.js';
@@ -12,9 +13,37 @@ export interface LonLat {
 }
 
 export interface MapLocation extends LonLat {
+  /**
+   * Current map zoom
+   *
+   * @example 11.94
+   */
   zoom: number;
+
+  /**
+   * Current map bearing in degrees
+   *
+   * Between -180 and 180
+   *
+   * @default 0
+   * @example -43.7
+   */
   bearing?: number;
+
+  /**
+   * Current map pitch in degrees
+   *
+   * Between 0 and {@link LocationUrl.PitchMaxDegrees}
+   *
+   * @default 0
+   * @example 12.7
+   */
   pitch?: number;
+
+  /**
+   * Optional bounding box of the map's view
+   */
+  extent?: BBox;
 }
 
 export const enum MapOptionType {
@@ -33,7 +62,6 @@ export interface TileUrlParams {
   style?: string | null;
   config?: string | null;
   pipeline?: string | null;
-  date?: FilterDate;
   imageFormat?: string | null;
   terrain?: string | null;
   labels?: boolean | null;