_`This is the main page of the application. It handles the routes and redirects the user to the correct page according to the URL.`_
This page shows the options available to the user. When the user chooses
the Coastal Squeeze option, the page redirects to the app/pages/CSqueeze
page.
### SelectionPage
## app/pages/CSqueeze
_`The user is presented with options to choose an algorithm for analysis (bathymetry, shoreline, coastal squeeze).`_
This page contains the steps to perform the Coastal Squeeze analysis.
### Bathemetry(props)
## app/pages/ProcessingPage
_`This is the main page for the bathymetry analysis process. It shows a stepper with the steps to configure the bathymetry processing. The steps are:`_
This page shows the processing screen for the Coastal Squeeze analysis.
#### SatelliteChooser
## app/components/csqueeze/AOIChooser
_`Allows the user to select a satellite for the bathymetry analysis. The selected satellite is dispatched to the store.`_
This component is responsible for the user to choose the Area of
Interest (AOI). It has the following functions:
#### AOIChooser
### getMangroves()
_`Allows the user to draw an area of interest (AOI) on the map. The geometry of the AOI is dispatched to the store.`_
This function, from algorithms/csqueeze, uses the "ESA/WorldCover/v200"
collection to get possible mangrove areas around the world.
#### PeriodChooser
### useEffect()
_`Allows the user to select a time period to search for images. The selected start and end dates are dispatched to the store.`_
This useEffect calls getMangroves() when the component is mounted to
show possible mangrove areas on the map.
#### BathymetryBandsAndAlgorithmSelection
### handleMapClick()
_`Allows the user to select the bands and algorithm to apply in the bathymetry processing. The selected configuration is updated in the BathymetryResults object.`_
This function is called when the user clicks on the map. It starts the
drawing of the AOI using the Google Maps Drawing Manager.
### ProcessingBathymetryPage
### endDrawing()
_`Shows the results of the bathymetry processing. The user can download the bathymetry image and view the generated statistics.`_
This function is called when the drawing of the AOI is finished. It gets
the AOI coordinates, area, and overlay and saves them in the state and
in the Redux store using dispatch(Acquisition.setAreaOfInterest()).
## ProcessingPage(props)
## app/components/csqueeze/YearsSelect
_`Page that shows the processing of the selected algorithm (bathymetry, shoreline, coastal squeeze).`_` `
This component shows a slider for the user to select two years to
perform the analysis. When the years are selected, they are saved in the
Redux store using dispatch(Acquisition.setDates()).
_`Loops through a list of images and extracts the shorelines for each one, accumulating the results in a FeatureCollection. Returns the final FeatureCollection with all shorelines.`_
This component shows the available images for the selected years and
AOI. The user must choose at least one image for each year. When the
images are selected, they are saved in the Redux store using
_`Applies a thresholding algorithm to extract the shoreline from a satellite image. Returns a FeatureCollection with the shoreline geometries.`_
This component shows the available cloud filters for the selected
images. The user must choose at least one filter. When the filters are
selected, they are saved in the Redux store using
dispatch(Acquisition.setCloudFilters()).
## Bathemetry/index.jsx
## app/components/csqueeze/LandCover
This file defines the bathemetry acquisition process page. It handles the steps and routes of the bathemetry acquisition process. It may include the following function calls:
This component shows the map with the selected images and AOI. The user
must draw at least one polygon of mangrove and another type of land
cover. When the polygons are drawn, they are saved in the Redux store
using dispatch(Acquisition.setLandCover()).
### BathymetryResults.isBathymetry()
## algorithms/acquisition
This function checks if the current page is the bathymetry page. It returns a boolean value, indicating whether the page is the bathymetry page or not.
This module contains the functions to acquire the satellite images and
perform the cloud masking.
### BathymetryResults.getTrainingDataAsMatrix()
### getSatelliteImages()
This function retrieves the training data from the session storage and parses it into a matrix format.
This function gets the satellite images for the selected years and AOI
This function calculates the median of an Earth Engine ImageCollection filtered by the given geometry and dates. The parameters collectionName , geometry , dtBegin , and dtEnd specify the collection to filter and the time range. It returns the thumbnail URL and the median Image.
This function calculates the area of the AOI in square kilometers using
the Haversine formula.
### BathymetryResults.getSelectedImage()
### calculateDistance()
This function acquires the selected Sentinel-2 image based on the chosen date and satellite mission. It handles using the median image if selected. The parameters date and satelliteMission specify the desired image. It returns the Image.
This function calculates the distance between two points in meters using
the Vincenty formula.
### BathymetryResults.mask(img)
## algorithms/satellite
This function applies a cloud and water mask to the given Sentinel-2 Image. The img parameter represents the image to be masked.
This module contains the functions to perform the Coastal Squeeze
analysis.
## ProcessingBathemetryPage/index.jsx
### calculateNDVI()
This file represents the page that shows the results of the bathemetry process. It displays the predicted bathymetry image, statistics, and allows downloading the results. It may include the following function calls:
This function calculates the Normalized Difference Vegetation Index
(NDVI) for the selected images.
### BathymetryResults.getBathymetryImage()
### calculateShoreline()
This function returns the bathymetry image calculated by the bathymetry algorithm.
This function calculates the shoreline for the selected images using the
mangrove and land cover polygons drawn by the user.
### BathymetryResults.getBathymetryParams()
## algorithms/utils
This function returns the visualization parameters for the bathymetry image.
This module contains utility functions used in the Coastal Squeeze
analysis.
## ProcessingPage/index.jsx
### getPolygonArea()
This file represents the page that shows the results of the processing. It displays the processed image and allows downloading the results.
This function calculates the area of a polygon in square kilometers
using the Shoelace formula.
## components/\*
### getPolygonPerimeter()
The components folder contains various reusable components used throughout the application. These components may include UI elements, input fields, buttons, etc., which are utilized in the above-mentioned pages.
This function calculates the perimeter of a polygon in meters using the
Haversine formula.
## Code Used in Bathymetry
## app/pages/ProcessingPage
### **MainPage**
This page shows the final maps and analysis for the Coastal Squeeze. It
uses the data saved in the Redux store from the previous steps.
This is the main page of the application. It contains the routes for the application and renders the appropriate components based on the route.
### useEffect()
This useEffect calls the following functions when the component is
@@ -163,231 +199,481 @@ No input parameters for this function.
#### **Output:**
Renders the main layout of the application with the appropriate components based on the route.
Google Maps layer with possible mangrove areas.
#### **Use**
This function is used to handle routing in the application. Based on the route, it renders the appropriate page component.
To use this function, simply call getMangroves() and add the returned
Google Maps layer to the map using map.addLayer().
### **Bathemetry**
``` javascript
This page handles the bathymetry analysis workflow. It contains the steps for bathymetry analysis like area of interest selection, image selection, bands and algorithm selection etc.
varmangrovesLayer=getMangroves();
map.addLayer(mangrovesLayer);
```
### **useEffect()**
This React hook runs when the component mounts and unmounts. It adds a
Google Maps layer showing possible mangrove areas and a drawing manager
A Google Maps layer showing possible mangrove areas and a drawing
manager are added to the map.
#### **Use**
Since this is a React hook, it will run automatically when the component
mounts. No usage example is needed.
### **handleMapClick()**
// Check if the step is valid and check the requirements
if (!stepAttendsRequirements()){
// If it is not, redirect to the first step
navigate(FIRST);
This function handles clicks on the map. It checks if the click was
within the AOI and either starts or ends the drawing of a rectangle.
``` javascript
functionhandleMapClick(event){
if (isPointInside(event.latLng,AOI.current.getPath())){
if (!isDrawing.current){
startDrawing(event.latLng);
setIsDrawing(true);
}else{
endDrawing(event.latLng);
setIsDrawing(false);
}
}
}
```
// Other code...
#### **Inputs:**
return (
<divclassName={classes.wrapper}>
// Render the steps...
</div>
);
};
event - The click event on the map.
#### **Output:**
Either starts or ends the drawing of a rectangle on the map.
#### **Use**
This function is set as the click listener on the map. Whenever the map
is clicked, this function will handle the click and check if the click
was within the AOI, in which case it will either start or end the
drawing of a rectangle.
``` javascript
mapRef.current.addListener("click",(event)=>{
handleMapClick(event);
});
```
### **endDrawing()**
This function ends the drawing of a rectangle on the map. It checks if
the rectangle is within the AOI and if so, it stores the rectangle for
further use.
``` javascript
functionendDrawing(endPoint){
if (isRectangleInside(rectangle.current,AOI.current)){
rectangles.current.push({
overlay:rectangle.current,
type:"rectangle"
});
}else{
rectangle.current.setMap(null);
}
drawingManager.current.setDrawingMode(null);
}
```
#### **Inputs:**
No input parameters for this function.
endPoint - The end point of the rectangle.
#### **Output:**
Renders the bathymetry analysis workflow.
Ends the drawing of the rectangle and either stores it for further use
or removes it from the map.
#### **Use**
This function is used to handle the bathymetry analysis workflow. It contains the steps required for bathymetry analysis like:
This function is called when ending the drawing of a rectangle to check
if it is within the AOI and handle it appropriately.
1\. Area of interest selection 2. Image selection 3. Bands and algorithm selection 4. Threshold selection
``` javascript
It navigates between these steps based on the route and ensures the pre-requisites for each step are met before rendering them.
functionhandleMapClick(event){
// ...
if (isDrawing.current){
endDrawing(event.latLng);
setIsDrawing(false);
}
}
```
### **ProcessingBathemetryPage**
### **getSatelliteImages()**
This page handles displaying the results of the bathymetry analysis. It shows the predicted bathymetry image, statistics like RMSE, bias, slope etc. and provides options to download the results.
This function queries the Google Earth Engine API to get available
satellite images within a given geometry and time range. It returns a
list of image objects containing metadata for the images found.
// Use images for selecting images, displaying thumbnails, etc.
```
### **ProcessingPage**
### **maskClouds()**
This page handles displaying the results of the shoreline change analysis. It shows the shoreline change maps, transect report, transect evolution graphs and provides options to download the results.
This function masks clouds in a Landsat 8 image using the CFmask band.
It returns a new image with the cloudy pixels masked.
``` javascript
constProcessingPage=()=>{
// Get the analysis results from the store
const{transects,baseline,shorelines}=useSelector(
(state)=>state.shoreline.results
);
functionmaskClouds(image){
varcfmask=image.select("cfmask");
varclouds=cfmask.eq(1);// Bit 1 is clouds
varshadows=cfmask.eq(2);// Bit 2 is shadows
varmask=clouds.or(shadows);
returnimage.updateMask(mask.not());
}
```
// Code to process the shoreline change analysis and get the results...
#### **Inputs:**
return (
<BoxclassName={classes.wrapper}>
{/* Render the results */}
</Box>
);
};
image - The Landsat 8 image to mask clouds in.
#### **Output:**
A new image with the cloudy pixels masked.
#### **Use**
This function can be used to mask clouds in a Landsat 8 image before
performing analysis on the image.
``` javascript
varmaskedImage=maskClouds(image);
// Use maskedImage for analysis
```
### **calculateArea()**
This function calculates the area of a polygon in square meters. It uses
the Google Maps Geometry library to calculate the area.
polygon - The polygon to calculate the area of, as a list of points.
#### **Output:**
Renders the results of the shoreline change analysis like shoreline change maps, transect report, transect evolution graphs and download options.
The area of the polygon in square meters.
#### **Use**
This function is used to display the results of the shoreline change analysis. It shows:
This function can be used to calculate the area of a polygon. Each point
in the polygon should be an object with x and y properties representing
the longitude and latitude of the point.
1\. Shoreline change maps 2. Transect report 3. Transect evolution graphs 4. Options to download the results
``` javascript
It handles processing the shoreline change analysis based on the inputs provided in the previous steps and displays the results to the user.
vararea=calculateArea(polygon);
console.log("Area of polygon: "+area+" square meters");
```
### **SelectionPage**
### **calculateDistance()**
This is the landing page of the application. It provides an overview of the capabilities of the application like bathymetry analysis, shoreline change analysis and coastal squeeze and options to start them.
This function calculates the distance between two points in meters. It
uses the Google Maps Geometry library to calculate the distance.
``` javascript
constSelectionPage=()=>{
constdispatch=useDispatch();
const[t]=useTranslation();
constclasses=useStyles();
return (
<HomePageLayout>
<BoxclassName={classes.wrapper}>
{/* Render the options to start bathymetry analysis, shoreline change analysis and coastal squeeze */}
point1 - The first point as a google.maps.LatLng object. point2 - The
second point as a google.maps.LatLng object.
#### **Output:**
Renders the landing page of the application with options to start bathymetry analysis, shoreline change analysis and coastal squeeze.
The distance between the two points in meters.
#### **Use**
This function is used to render the landing page of the application. It shows:
This function can be used to calculate the distance between two points.
Each point should be a google.maps.LatLng object.
1\. An overview of the capabilities of the application like bathymetry analysis, shoreline change analysis and coastal squeeze. 2. Options to start bathymetry analysis, shoreline change analysis and coastal squeeze.
``` javascript
When the user selects an option, they are navigated to the corresponding workflow.
vardistance=calculateDistance(point1,point2);
console.log("Distance between points: "+distance+" meters");
```
### **BathymetryBandsAndAlgorithmSelection**
### **calculateNDVI()**
This component is used to select bands and algorithm for bathymetry analysis. It shows options to select bands for the analysis and graphs to select the algorithm. It handles updating the store with the selected bands and algorithm.
This function calculates the Normalized Difference Vegetation Index
(NDVI) for a given image. It uses bands 4 (Red) and 5 (Near Infrared) to
{/* Render options to select bands and graphs to select algorithm */}
</Box>
);
};
image - The image to calculate the NDVI for.
#### **Output:**
The image with the NDVI band added.
#### **Use**
This function can be used to calculate the NDVI for a given image. The
image should be a Landsat 8 image.
``` javascript
varndviImage=calculateNDVI(image);
// Use ndviImage for analysis
```
### **calculateShoreline()**
This function calculates the shoreline of a given image by thresholding
the NDVI and applying a morphological operation to remove small islands
and fill small holes.
``` javascript
functioncalculateShoreline(image){
varndvi=image.select("NDVI");
varthreshold=ndvi.lt(0.2);
varshoreline=threshold.focal_mode(3);
returnshoreline.rename("Shoreline");
}
```
#### **Inputs:**
No input parameters for this function.
image - The image to calculate the shoreline for.
#### **Output:**
Renders options to select bands and graphs to select the algorithm for bathymetry analysis.
The image with the shoreline band added.
#### **Use**
This function is used to select bands and algorithm for bathymetry analysis. It shows:
This function can be used to calculate the shoreline for a given image.
The image should be a Landsat 8 image with an NDVI band.
1\. Options to select two bands for the analysis. 2. Graphs showing the relationship between the selected bands and depth. The user can select an algorithm by clicking on a graph. 3. It handles updating the store with the selected bands and algorithm so they can be used for bathymetry analysis.
``` javascript
### **AOIChooser**
varshorelineImage=calculateShoreline(ndviImage);
// Use shorelineImage for analysis
```
### **getPolygonArea()**
This component is used to select the area of interest. It shows a map where the user can draw the area of interest and options to import it from a KML file. It handles updating the store with the selected area of interest.
This function calculates the area of a polygon in square kilometers. It
uses the Google Earth Engine API to calculate the area.
