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

### Motivation

The filter layer intersection logic is currently guessing the extent
that the user is viewing

### Modifications

Store the extent that the user is looking at when the map pans

### Verification

tested locally

Author: blacha

packages/geo/src/stac/stac.attribution.ts

@@ -4,19 +4,59 @@ import { StacCatalog, StacCollection, StacItem } from './index.js';
  * A Single File STAC compliant collection with zoom and priority for calculating attribution of an extent
  */
 export type AttributionCollection = StacCollection<{
+  /**
+   * Category of the layer
+   *
+   * @example "Urban Aerial Photos"
+   */
   'linz:category'?: string;
+
+  /**
+   * Zoom levels that the layer is visit
+   */
   'linz:zoom': { min: number; max: number };
+
+  /**
+   * Priority order for the layer
+   *
+   * The higher the number the higher the priority
+   *
+   * @example [1077]
+   */
   'linz:priority': [number];
 }>;
 
 /**
  * A Single File STAC compliant feature for calculating attribution of an extent
  */
 export type AttributionItem = StacItem<{
+  /**
+   * Human friendly title of the layer
+   *
+   * @example "Whanganui 0.075m Urban Aerial Photos (2017)"
+   */
   title: string;
+
+  /**
+   * Category of the layer
+   *
+   * @example "Urban Aerial Photos"
+   */
   category?: string;
+
+  /**
+   * datetime is null as per STAC requirement when {@link start_datetime} and {@link end_datetime} are set
+   */
   datetime?: null;
+
+  /**
+   * datetime of when the layer started being captured
+   */
   start_datetime?: string;
+
+  /**
+   * datetime of when the layer stopped being captured
+   */
   end_datetime?: string;
 }>;
 

packages/lambda-tiler/src/routes/attribution.ts

@@ -99,10 +99,13 @@ async function tileSetAttribution(
   for (const layer of tileSet.layers) {
     const imgId = layer[proj.epsg.code];
     if (imgId == null) continue;
+
     const im = imagery.get(imgId);
     if (im == null) continue;
+
     const title = im.title;
     const years = extractYearRangeFromTitle(im.title) ?? extractYearRangeFromName(im.name);
+
     if (years == null) continue;
     const interval = yearRangeToInterval(years);
 

packages/landing/src/attribution.ts

@@ -1,36 +1,53 @@
 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 { GoogleTms, 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`;
 
 export class MapAttributionState {
   /** Cache the loading of attribution */
-  _attrs: Map<string, Promise<Attribution | null>> = new Map();
-  /** Rendering process needs synch access */
-  _attrsSync: Map<string, Attribution> = new Map();
+  attrs: Map<string, Promise<Attribution | null>> = new Map();
+  /** Rendering process needs sync access */
+  attrsSync: Map<string, Attribution> = new Map();
+
+  private getLayer(layerKey: string, url: string): Promise<Attribution | null> {
+    const layer = this.attrs.get(layerKey);
+    if (layer != null) return layer;
+    const loader = Attribution.load(url)
+      .catch(() => null)
+      .then((ret) => {
+        if (ret == null) {
+          this.attrs.delete(layerKey);
+          this.attrsSync.delete(layerKey);
+        } else {
+          this.attrsSync.set(layerKey, ret);
+        }
+        return ret;
+      });
+    this.attrs.set(layerKey, loader);
+    return loader;
+  }
+
+  /**
+   * Load the attribution fo all layers
+   * @returns
+   */
+  getAll(): Promise<Attribution | null> {
+    return this.getLayer('all', Config.map.toTileUrl(MapOptionType.Attribution, GoogleTms, 'all', null));
+  }
 
   /** Load a attribution from a url, return a cached copy if we have one */
   getCurrentAttribution(): Promise<Attribution | null> {
-    const cacheKey = Config.map.layerKeyTms;
-    let attrs = this._attrs.get(cacheKey);
-    if (attrs == null) {
-      attrs = Attribution.load(Config.map.toTileUrl(MapOptionType.Attribution)).catch(() => null);
-      this._attrs.set(cacheKey, attrs);
-      void attrs.then((a) => {
-        if (a == null) return;
-        a.isIgnored = this.isIgnored;
-        this._attrsSync.set(Config.map.layerKeyTms, a);
-      });
-    }
-    return attrs;
+    return this.getLayer(Config.map.layerKeyTms, Config.map.toTileUrl(MapOptionType.Attribution)).then((ret) => {
+      if (ret != null) ret.isIgnored = this.isIgnored;
+      return ret;
+    });
   }
 
   /** Filter the attribution to the map bounding box */
@@ -39,39 +56,8 @@ 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);
-    return attr.filter({
-      extent,
-      zoom: zoom,
-      dateBefore: Config.map.filter.date.before,
-    });
-  }
-
-  getAttributionByYear(attribution: AttributionBounds[]): Map<number, AttributionBounds[]> {
-    const attrsByYear = new Map<number, AttributionBounds[]>();
-    for (const a of attribution) {
-      if (!a.startDate || !a.endDate) continue;
-      const startYear = Number(a.startDate.slice(0, 4));
-      const endYear = Number(a.endDate.slice(0, 4));
-      for (let year = startYear; year <= endYear; year++) {
-        const attrs = attrsByYear.get(year) ?? [];
-        attrs.push(a);
-        attrsByYear.set(year, attrs);
-      }
-    }
-    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;
+    const extent = mapToBoundingBox(map, zoom, Config.map.tileMatrix);
+    return attr.filter({ extent, zoom });
   }
 
   // Ignore DEMS from the attribution list
@@ -176,7 +162,7 @@ export class MapAttribution implements maplibre.IControl {
   renderAttribution = (): void => {
     if (this.map == null) return;
     this._raf = 0;
-    const attr = MapAttrState._attrsSync.get(Config.map.layerKeyTms);
+    const attr = MapAttrState.attrsSync.get(Config.map.layerKeyTms);
     if (attr == null) return this.setAttribution('');
     const filtered = MapAttrState.filterAttributionToMap(attr, this.map);
     const filteredLayerIds = filtered.map((x) => x.collection.id).join('_');

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

@@ -1,7 +1,8 @@
-import { Bounds, GoogleTms, Projection } from '@basemaps/geo';
+import { intersection, MultiPolygon, Wgs84 } from '@linzjs/geojson';
 import { ChangeEventHandler, Component, ReactNode } from 'react';
 import Select from 'react-select';
 
+import { MapAttrState } from '../attribution.js';
 import { Config, GaEvent, gaEvent } from '../config.js';
 import { LayerInfo, MapConfig } from '../config.map.js';
 
@@ -50,6 +51,8 @@ export class LayerSwitcherDropdown extends Component<unknown, LayerSwitcherDropd
   override componentDidMount(): void {
     this.setState({ zoomToExtent: true, currentLayer: Config.map.layerKey });
 
+    void MapAttrState.getAll().then(() => this.forceUpdate());
+
     void Config.map.layers.then((layers) => {
       this.setState({ layers });
       // This needs to run on next tick or the sate will not have updated
@@ -187,10 +190,9 @@ 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);
 
     let current: Option | null = null;
 
@@ -201,15 +203,15 @@ 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;
         }
       }
 
       const layerId = layer.category ?? 'Unknown';
       const layerCategory = categories.get(layerId) ?? { label: layerId, options: [] };
-      const opt = { value: layer.id, label: layer.name.replace(` ${layer.category}`, '') };
+      const opt = { value: layer.id, label: layer.title.replace(` ${layer.category}`, '') };
       layerCategory.options.push(opt);
       categories.set(layerId, layerCategory);
       if (layer.id === currentLayer) current = opt;
@@ -228,25 +230,33 @@ 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 poly = Wgs84.bboxToMultiPolygon([
+    layer.lowerRight[0],
+    layer.upperLeft[1],
+    layer.upperLeft[0],
+    layer.lowerRight[1],
+  ]);
+
+  const inter = intersection(bounds, poly);
+  if (inter == null || inter.length === 0) return false;
+
+  // No attribution state loaded, assume it intersects
+  const attrs = MapAttrState.attrsSync.get('all');
+  if (attrs == null) return true;
 
-  const layerBounds = Bounds.fromBbox([ul3857[0], ul3857[1], lr3857[0], lr3857[1]]);
+  const attrLayer = attrs.attributions.filter((f) => f.collection.title === layer.title);
+  // Could not find a exact layer match in the attribution
+  if (attrLayer.length !== 1) return true;
 
-  return bounds.intersects(layerBounds);
+  return attrLayer[0].intersection(bounds);
 }