feat: temporary fix for OAM disruption

frontend/.env.sample

@@ -156,4 +156,14 @@ VITE_FAIR_PREDICTOR_API_URL =  https://predictor-dev.fair.hotosm.org/predict/.
 # The OSM Database status API.
 # Data type: String (e.g., https://api-prod.raw-data.hotosm.org/v1/status/).
 # Default value: https://api-prod.raw-data.hotosm.org/v1/status/.
-VITE_OSM_DATABASE_STATUS_API_URL: https://api-prod.raw-data.hotosm.org/v1/status/
+VITE_OSM_DATABASE_STATUS_API_URL = https://api-prod.raw-data.hotosm.org/v1/status/
+
+# The Base URL for OAM Titiler.
+# Data type: String (e.g.,https://titiler.hotosm.org).
+# Default value: https://titiler.hotosm.org.
+VITE_OAM_TITILER_ENDPOINT = https://titiler.hotosm.org/
+
+# The new S3 bucket for OAM aerial imageries.
+# Data type: String (e.g.,https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/).
+# Default value: https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/.
+VITE_OAM_S3_BUCKET_URL = https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/

frontend/src/config/env.ts

@@ -246,4 +246,20 @@ export const ENVS = {
     Default value: https://api-prod.raw-data.hotosm.org/v1/status/.
    */
   OSM_DATABASE_STATUS_API_URL: import.meta.env.VITE_OSM_DATABASE_STATUS_API_URL,
+
+  /**
+    The Base URL for OAM's Titiler.
+    Data type: String (e.g.,https://titiler.hotosm.org/).
+    Default value: https://titiler.hotosm.org/.
+  */
+  OAM_TITILER_ENDPOINT: import.meta.env.VITE_OAM_TITILER_ENDPOINT,
+
+  /**
+    The new S3 bucket for OAM aerial imageries.
+    Data type: String (e.g.,https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/).
+    Default value: https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/.
+  */
+
+  OAM_S3_BUCKET_URL: import.meta.env.VITE_OAM_S3_BUCKET_URL,
+
 };

frontend/src/constants/config.ts

@@ -1,6 +1,6 @@
-import { BASE_MODELS } from "@/enums";
-import { ENVS } from "@/config/env";
-import { StyleSpecification } from "maplibre-gl";
+import { BASE_MODELS } from '@/enums';
+import { ENVS } from '@/config/env';
+import { StyleSpecification } from 'maplibre-gl';
 
 /**
  * The key used to store the access token in local storage for the application.
@@ -38,7 +38,7 @@ const REFRESH_BUFFER_MS = 1000;
  */
 export const KPI_STATS_CACHE_TIME_MS =
   (Number(ENVS.KPI_STATS_CACHE_TIME) || DEFAULT_KPI_STATS_CACHE_TIME_SECONDS) *
-    1000 +
+  1000 +
   REFRESH_BUFFER_MS;
 
 /**
@@ -241,3 +241,20 @@ export const MAX_GEOJSON_FILE_UPLOAD_FOR_TRAINING_AREAS =
 */
 export const MAX_ACCEPTABLE_POLYGON_IN_TRAINING_AREA_GEOJSON_FILE =
   ENVS.MAX_ACCEPTABLE_POLYGON_IN_TRAINING_AREA_GEOJSON_FILE || 10;
+
+
+/**
+  The Base URL for OAM's Titiler.
+  Data type: String (e.g.,https://titiler.hotosm.org/).
+  Default value: https://titiler.hotosm.org/.
+*/
+export const OAM_TITILER_ENDPOINT = ENVS.OAM_TITILER_ENDPOINT || "https://titiler.hotosm.org/";
+
+
+
+/**
+  The new S3 bucket for OAM aerial imageries.
+  Data type: String (e.g.,https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/).
+  Default value: https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/.
+*/
+export const OAM_S3_BUCKET_URL = ENVS.OAM_S3_BUCKET_URL || "https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/";

frontend/src/utils/string-utils.ts

@@ -1,3 +1,5 @@
+import { OAM_S3_BUCKET_URL, OAM_TITILER_ENDPOINT } from '@/constants';
+
 /**
  * Truncates a string to a specified maximum length, appending ellipsis if truncated.
  *
@@ -17,7 +19,15 @@ export const truncateString = (string?: string, maxLength: number = 30) => {
 };
 
 
-export const extractTileJSONURL = (openAerialMapTMSURL: string) => {
-  const tmsId = openAerialMapTMSURL.replace('https://tiles.openaerialmap.org/', '').replace('/{z}/{x}/{y}', '');
-  return `https://titiler.hotosm.org/cog/WebMercatorQuad/tilejson.json?url=https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/${tmsId}.tif`;
+export const extractTileJSONURL = (OAMTMSURL: string) => {
+
+  // Before, when we hit this url https://tiles.openaerialmap.org/63b457ba3fb8c100063c55f0/0/63b457ba3fb8c100063c55f1/{z}/{x}/{y} (without the /{z}/{x}/{y}), 
+  // we get the TileJSON which is passed to Maplibre GL JS to render the aerial imagery, but with the recent OAM updates
+  // we have to grab the unique id of the aerial imagery, construct the new S3 bucket location and give it to titiler to get the new TileJSON. 
+  const uniqueImageryId = OAMTMSURL
+    .replace('https://tiles.openaerialmap.org/', '')
+    .replace('/{z}/{x}/{y}', '');
+
+  // Construct the URL to fetch the TileJSON from titiler.
+  return `${OAM_TITILER_ENDPOINT}cog/WebMercatorQuad/tilejson.json?url=${OAM_S3_BUCKET_URL}${uniqueImageryId}.tif`;
 };