Adding ESRI Wayback source

package.json

@@ -20,6 +20,7 @@
     "@mui/material": "^5.12.3",
     "@mui/x-date-pickers": "^6.3.0",
     "@tmcw/togeojson": "^5.6.0",
+    "@vannizhang/wayback-core": "^1.0.7",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.7",
     "html-to-image": "^1.11.11",

src/App.tsx

@@ -9,13 +9,13 @@ import Split from "react-split";
 import {RulerControl} from 'mapbox-gl-controls'
 import { ToggleButton, ToggleButtonGroup } from "@mui/material";
 
-
 import {
   planetBasemapUrl,
   BasemapsIds,
   basemapsTmsSources,
   debounce,
   useLocalStorage,
+  waybackUrl
 } from "./utilities";
 import mapboxgl from "mapbox-gl";
 
@@ -62,16 +62,38 @@ function App() {
     true,
     true
   );
-  const [planetUrl, setPlanetUrl] = useState<string>(planetBasemapUrl(subMonths(new Date(), 1), false));
+  const [leftPlanetUrl, setleftPlanetUrl] = useState<string>(planetBasemapUrl(subMonths(new Date(), 1), false));
+  const [rightPlanetUrl, setRightPlanetUrl] = useState<string>(planetBasemapUrl(subMonths(new Date(), 1), false));
+
+  useEffect(() => {
+    console.log(leftTimelineDate, 'leftTimelineDate', rightTimelineDate, 'rightTimelineDate') 
+    setleftPlanetUrl(planetBasemapUrl(leftTimelineDate, customPlanetApiKey));
+  }, [customPlanetApiKey, leftTimelineDate]);
+
   useEffect(() => {
-    setPlanetUrl(planetBasemapUrl(clickedMap == "left" ? leftTimelineDate : rightTimelineDate, customPlanetApiKey));
-  }, [customPlanetApiKey, leftTimelineDate, rightTimelineDate]);
+    console.log(leftTimelineDate, 'leftTimelineDate', rightTimelineDate, 'rightTimelineDate') 
+    setRightPlanetUrl(planetBasemapUrl(rightTimelineDate, customPlanetApiKey));
+  }, [customPlanetApiKey, rightTimelineDate]);
+
+
   // Like Mapbox gl compare https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/
   // const [splitPanelSizesPercent, setSplitPanelSizesPercent] = useState([75, 25]);
   const [splitPanelSizesPercent, setSplitPanelSizesPercent] = useLocalStorage(
     "ui_splitPanelSizesPercent",
     [75, 25]
   );
+
+  const [leftWaybackUrl, setLeftWaybackUrl] = useState(waybackUrl(subMonths(new Date(), 18)));
+  const [rightWaybackUrl, setRightWaybackUrl] = useState(waybackUrl(subMonths(new Date(), 18)));
+
+  useEffect(() => {
+    setLeftWaybackUrl(waybackUrl(leftTimelineDate));
+  }, [leftTimelineDate]);
+
+  useEffect(() => {
+    setRightWaybackUrl(waybackUrl(rightTimelineDate));
+  }, [rightTimelineDate]);
+
   const hash = window.location.hash;
   let hashed_viewstate = hash
     .substring(1)
@@ -403,13 +425,27 @@ function App() {
             scheme="xyz"
             type="raster"
             // tiles={[]}
-            tiles={[planetUrl]}
+            tiles={[leftPlanetUrl]}
             tileSize={256}
             // key={"planetBasemap"}
             key={leftTimelineDate.toString()}
           >
             <Layer type="raster" layout={{}} paint={{}} />
           </Source>
+        ) : leftSelectedTms == BasemapsIds.ESRIWayback ? (
+
+          <Source
+            id="wayback-source"
+            scheme="xyz" 
+            type="raster"
+            tiles={[leftWaybackUrl]}
+            tileSize={256}
+            // key={"wayback"}
+            key={leftTimelineDate.toString().toLowerCase()}
+          >
+            <Layer type="raster" layout={{}} paint={{}} />
+          </Source>
+
         ) : (
           <Source
             id="tms-source"
@@ -469,13 +505,27 @@ function App() {
                 id="planetbasemap-source"
                 scheme="xyz"
                 type="raster"
-                tiles={[planetUrl]}                // tiles={[]}
+                tiles={[rightPlanetUrl]}                // tiles={[]}
                 tileSize={256}
                 // key={"planetBasemap"}
                 key={rightTimelineDate.toString()}
               >
                 <Layer type="raster" layout={{}} paint={{}} />
               </Source>
+            ) : rightSelectedTms == BasemapsIds.ESRIWayback ? (
+
+              <Source
+                id="wayback-source"
+                scheme="xyz" 
+                type="raster"
+                tiles={[rightWaybackUrl]}
+                tileSize={256}
+                // key={"wayback"}
+                key={rightTimelineDate.toString().toLowerCase()}
+              >
+                <Layer type="raster" layout={{}} paint={{}} />
+              </Source>
+
             ) : (
               <Source
                 id="tms-source"

src/control-panel.tsx

@@ -538,7 +538,7 @@ function ControlPanel(props:any) {
                   {/* <MenuItem value={''}>Mapbox</MenuItem> */}
                 </Select>
               </FormControl>
-              {props.selectedTms == BasemapsIds.PlanetMonthly && (
+              {(props.selectedTms == BasemapsIds.PlanetMonthly || props.selectedTms == BasemapsIds.ESRIWayback) && (
                 <>
                   {" "}
                   <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
@@ -656,7 +656,7 @@ function ControlPanel(props:any) {
             </div>
           )
         }
-        {props.selectedTms == BasemapsIds.PlanetMonthly && (
+        {(props.selectedTms == BasemapsIds.PlanetMonthly || props.selectedTms == BasemapsIds.ESRIWayback) && (
           <PlayableSlider
             setTimelineDate={props.setTimelineDate}
             playbackSpeedFPS={playbackSpeedFPS}

src/utilities.tsx

@@ -4,10 +4,9 @@ import {
   subMonths,
   format,
   eachYearOfInterval,
-  isDate,
 } from "date-fns";
 import { useState, useEffect } from "react";
-
+import { getWaybackItems } from '@vannizhang/wayback-core';
 import { lngLatToWorld } from "@math.gl/web-mercator";
 
 // Helper functions to convert between date for date-picker and slider-value
@@ -23,6 +22,25 @@ const formatDate = (date: Date) => format(date, "yyyy-MM");
 // PlanetMonthly URLS
 const PLANET_BASEMAP_API_KEY = import.meta.env.VITE_PLANET_BASEMAP_API_KEY;
 
+// Set min/max dates for planet monthly basemaps on component mount
+export const MIN_DATE = new Date("2016-01-01T00:00:00.000");
+export const MAX_DATE = subMonths(new Date(), 1);
+
+const wayBackItems = await getWaybackItems()
+const baseWaybackUrl = "https://wayback.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/WMTS/1.0.0/default028mm/MapServer/tile/"
+
+export const  waybackUrl = (date:Date) => {
+  for (let i = wayBackItems.length - 1; i >= 0; i--) {
+    const item = wayBackItems[i];
+    if (new Date(item.releaseDatetime) > date) {
+      console.log("Found suitable item for date", date, item);
+      return baseWaybackUrl + item.releaseNum + "/{z}/{y}/{x}";
+    }
+  }
+  console.log("No suitable item found for date", date);
+  return undefined;
+};
+
 const planetBasemapUrl = (date: Date, customApi?:string) => {
   // basemap_date_str = "2019_01";
   return `https://tiles.planet.com/basemaps/v1/planet-tiles/global_monthly_${format(
@@ -42,10 +60,6 @@ function getSliderMarks(minDate: Date, maxDate: Date) {
   }));
 }
 
-// Set min/max dates for planet monthly basemaps on component mount
-export const MIN_DATE = new Date("2016-01-01T00:00:00.000");
-export const MAX_DATE = subMonths(new Date(), 1);
-
 // const basemapsTmsUrls = {
 // Typescript was not accepting computed strings in enums, so used open Mapbox api token for simplicity
 enum BasemapsIds {
@@ -59,6 +73,7 @@ enum BasemapsIds {
   Apple,
   GoogleHybrid,
   OSM,
+  ESRIWayback
 }
 
 // Could find other TMS tile urls on NextGis QMS
@@ -111,6 +126,11 @@ const basemapsTmsSources: any = {
   // "Bing Sat"= "http://t0.tiles.virtualearth.net/tiles/a{q}.jpeg?g=854&mkt=en-US&token=Atq2nTytWfkqXjxxCDSsSPeT3PXjAl_ODeu3bnJRN44i3HKXs2DDCmQPA5u0M9z1",
   // "Google sat"= "https://mts1.google.com/vt/lyrs=s@186112443&hl=en&src=app&s=Galile&rlbl=1&gl=AR&key=AIzaSyARVMxmX0A7aRszJUjE33fSLQFMXAiMlxk&z={Z}&x={X}&y={Y}",
   // "Heremaps Sat"= "http://1.aerial.maps.api.here.com/maptile/2.1/maptile/newest/satellite.day/{z}/{x}/{y}/256/png8?app_id=hBqHrthpuP0nRYifaTTT&app_code=iA3EYhFlEcBztET4RuA7Bg",
+  // "Mapbox Sat"= "https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.webp?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA",
+  [BasemapsIds.ESRIWayback]: {
+    url: waybackUrl,
+    maxzoom: 19,
+  },
 };
 
 // Lighter to use this utility rather than import whole of proj4
@@ -171,6 +191,7 @@ const useLocalStorage = (
   isDate = false
 ): any => {
   const storedItem = localStorage.getItem(storageKey);
+  // console.log(storedItem, 'storedItem')
   let initValue = storedItem ? JSON.parse(storedItem) : fallbackState;
   if (isDate) {
     initValue = new Date(initValue);