Merge branch 'main' of https://github.com/Iconem/historical-satellite

Iconem · Jun 28, 2024 · 5badb11 · 5badb11
2 parents 4db8a2c + 68e86ab
commit 5badb11
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 8 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -43,6 +43,20 @@ function App() {
   // const [rightTimelineDate, setRightTimelineDate] = useState<Date>(
   //   subMonths(new Date(), 18)
   // );
+
+  const [customPlanetApiKey, setCustomPlanetApiKey] = useLocalStorage(
+    "customPlanetApiKey",
+    ""
+  );
+  const [useCustomApiKey, setUseCustomApiKey] = useLocalStorage(
+    "useCustomPlanetApiKey",
+    false
+  );
+  const [planetUrl, setPlanetUrl] = useState<string>(planetBasemapUrl(subMonths(new Date(), 1), false));
+  useEffect(() => {
+    setPlanetUrl(planetBasemapUrl(clickedMap == "left" ? leftTimelineDate : rightTimelineDate, useCustomApiKey, customPlanetApiKey));
+  }, [useCustomApiKey]);
+
   const [leftTimelineDate, setLeftTimelineDate] = useLocalStorage(
     "leftTimelineDate",
     subMonths(new Date(), 1)
@@ -383,7 +397,7 @@ function App() {
         <GeocoderControl
           mapboxAccessToken={MAPBOX_TOKEN}
           position="top-left"
-          flyTo={true}
+          flyTo={false}
           mapRef={leftMapRef}
         />
 
@@ -395,7 +409,7 @@ function App() {
             scheme="xyz"
             type="raster"
             // tiles={[]}
-            tiles={[planetBasemapUrl(leftTimelineDate)]}
+            tiles={[planetUrl]}
             tileSize={256}
             // key={"planetBasemap"}
             key={leftTimelineDate.toString()}
@@ -461,8 +475,7 @@ function App() {
                 id="planetbasemap-source"
                 scheme="xyz"
                 type="raster"
-                tiles={[planetBasemapUrl(rightTimelineDate)]}
-                // tiles={[]}
+                tiles={[planetUrl]}                // tiles={[]}
                 tileSize={256}
                 // key={"planetBasemap"}
                 key={rightTimelineDate.toString()}
@@ -508,6 +521,11 @@ function App() {
         </div>
       </div>
       <ControlPanelDrawer
+        // Adding custom Planet API key input
+        useCustomApiKey={useCustomApiKey}
+        setUseCustomPlanetApiKey={setUseCustomApiKey}
+        customPlanetApiKey={customPlanetApiKey}
+        setCustomPlanetApiKey={setCustomPlanetApiKey}
         // Adding blending mode opacity, and blending mode activation to pass downward
         blendingActivation={blendingActivation}
         setBlendingActivation={setBlendingActivation}

diff --git a/src/control-panel.tsx b/src/control-panel.tsx
@@ -172,7 +172,8 @@ const drawerWidth = '240px';
 function ControlPanelDrawer(props: any) {
   // const theme = useTheme();
   const [open, setOpen] = useState(true);
-
+  const setUseCustomPlanetApiKey = props.setUseCustomPlanetApiKey;
+  const setCustomPlanetApiKey = props.setCustomPlanetApiKey;
   const handleDrawerToggle = () => {
     setOpen(!open);
   };
@@ -244,6 +245,10 @@ function ControlPanelDrawer(props: any) {
         // Additional
         setLeftSelectedTms={props.setLeftSelectedTms}
         setRightSelectedTms={props.setRightSelectedTms}
+        setUseCustomPlanetApiKey={setUseCustomPlanetApiKey}
+        setCustomPlanetApiKey={setCustomPlanetApiKey}
+        UseCustomPlanetApiKey={props.UseCustomPlanetApiKey}
+        customPlanetApiKey={props.customPlanetApiKey}
       />
 
       </Drawer>
@@ -269,6 +274,9 @@ function ControlPanel(props:any) {
     props.setTimelineDate(sliderValToDate(newValue, minDate));
   };
 
+  const setUseCustomPlanetApiKey = props.setUseCustomPlanetApiKey;
+  const setCustomPlanetApiKey = props.setCustomPlanetApiKey;
+
   // const [minDate, setMinDate] = useState<Date>(MIN_DATE);
   // const [maxDate, setMaxDate] = useState<Date>(MAX_DATE);
   const [minDate, setMinDate] = useLocalStorage("export_minDate", MIN_DATE);
@@ -639,6 +647,10 @@ function ControlPanel(props:any) {
                 setMaxFrameResolution={setMaxFrameResolution}
                 collectionDateActivated={collectionDateActivated}
                 setCollectionDateActivated={setCollectionDateActivated}
+                setCustomPlanetApiKey={setCustomPlanetApiKey} 
+                setUseCustomPlanetApiKey={setUseCustomPlanetApiKey}
+                useCustomPlanetApiKey={props.useCustomPlanetApiKey}
+                customPlanetApiKey={props.customPlanetApiKey}
               />
             </Stack>
           </Stack>

diff --git a/src/custom-planet-api-modal.tsx b/src/custom-planet-api-modal.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import TextField from '@mui/material/TextField';
+import Checkbox from '@mui/material/Checkbox';
+
+function CustomPlanetApiModal(props: any) {
+    const customPlanetApiKey = props.customPlanetApiKey;
+    const UseCustomPlanetApiKey = props.UseCustomPlanetApiKey;
+    const setCustomPlanetApiKey = props.setCustomPlanetApiKey;
+    const setUseCustomPlanetApiKey = props.setUseCustomPlanetApiKey;
+
+    const handleCheckboxChange = () => {
+        setUseCustomPlanetApiKey(!UseCustomPlanetApiKey);
+    };
+
+    const handleInputChange = (event) => {
+        setCustomPlanetApiKey(event.target.value);
+    };
+
+
+    return (
+        <div className='customApiModal'>
+            <Checkbox checked={UseCustomPlanetApiKey} onChange={handleCheckboxChange} />
+            <TextField value={customPlanetApiKey} onChange={handleInputChange} label="Planet Monthly Key" />
+        </div>
+    );
+};
+
+export default CustomPlanetApiModal;
diff --git a/src/geocoder-control.tsx b/src/geocoder-control.tsx
@@ -96,7 +96,7 @@ export default function GeocoderControl(
         zoom: 15,
         marker: false,
         accessToken: props.mapboxAccessToken,
-        flyTo: { maxDuration: 1000 },
+        flyTo: { maxDuration: 0 },
       });
       //   ctrl.on('loading', props.onLoading);
       //   ctrl.on('results', props.onResults);

diff --git a/src/settings-modal.tsx b/src/settings-modal.tsx
@@ -16,6 +16,7 @@ import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import dayjs from "dayjs";
 import { MIN_DATE, MAX_DATE } from "./utilities";
+import CustomPlanetApiModal from "./custom-planet-api-modal";
 
 const style = {
   position: "absolute" as "absolute",
@@ -34,6 +35,8 @@ export default function SettingsModal(props: any) {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
   const errorMessage = "start Date should be before end date!";
+  const setCustomPlanetApiKey = props.setCustomPlanetApiKey;
+  const setUseCustomPlanetApiKey = props.setUseCustomPlanetApiKey;
 
   const handleCollectionDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     props.setCollectionDateActivated( event.target.checked);
@@ -167,6 +170,10 @@ export default function SettingsModal(props: any) {
               />
             }
           />
+          <CustomPlanetApiModal
+            setCustomPlanetApiKey={setCustomPlanetApiKey}
+            setUseCustomPlanetApiKey={setUseCustomPlanetApiKey}
+          />
         </Box>
       </Modal>
     </Fragment>

diff --git a/src/utilities.tsx b/src/utilities.tsx
@@ -22,12 +22,12 @@ const formatDate = (date: Date) => format(date, "yyyy-MM");
 // PlanetMonthly URLS
 const PLANET_BASEMAP_API_KEY = import.meta.env.VITE_PLANET_BASEMAP_API_KEY;
 
-const planetBasemapUrl = (date: Date) => {
+const planetBasemapUrl = (date: Date, useCustom: Boolean, customApi?:string) => {
   // basemap_date_str = "2019_01";
   return `https://tiles.planet.com/basemaps/v1/planet-tiles/global_monthly_${format(
     date,
     "yyyy_MM"
-  )}_mosaic/gmap/{z}/{x}/{y}.png?api_key=${PLANET_BASEMAP_API_KEY}`;
+  )}_mosaic/gmap/{z}/{x}/{y}.png?api_key=${useCustom ? customApi : PLANET_BASEMAP_API_KEY}`;
 };
 
 // Set custom slider marks for each beginning of year