... | @@ -9,152 +9,188 @@ |
... | @@ -9,152 +9,188 @@ |
|
|
|
|
|
</details>
|
|
</details>
|
|
|
|
|
|
# Activity Documentation for Bathymetry Module
|
|
# Activity Documentation for Csqueeze Module
|
|
|
|
|
|
This documentation provides a detailed explanation of the user interaction pages in the Bathymetry module.
|
|
This documentation provides a detailed explanation of the user
|
|
|
|
interaction pages in the Csqueeze module.
|
|
|
|
|
|
## Diagram
|
|
## Diagram
|
|
|
|
|
|

|
|
[1100x1100px](Arquivo:Csqueeze_Activity_Diagram.png "wikilink")
|
|
|
|
|
|
## MainPage(match)
|
|
## app/pages/SelectionPage
|
|
|
|
|
|
_`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()).
|
|
|
|
|
|
### deriveShorelines(images, geometry, spacing, extension, thresholds)
|
|
## app/components/csqueeze/ImagesSelect
|
|
|
|
|
|
_`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
|
|
|
|
dispatch(Acquisition.setImages()).
|
|
|
|
|
|
### extractShoreline(image, geometry, spacing, extension, threshold)
|
|
## app/components/csqueeze/CloudFilters
|
|
|
|
|
|
_`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
|
|
|
|
using the Google Earth Engine API.
|
|
|
|
|
|
### BathymetryResults.getTrainingDataAsFeatureCollection()
|
|
### maskClouds()
|
|
|
|
|
|
This function retrieves the training data from the session storage and converts it into an Earth Engine FeatureCollection.
|
|
This function masks the clouds in the selected images using the cloud
|
|
|
|
filters selected by the user.
|
|
|
|
|
|
### BathymetryResults.getCoordinatesSystem()
|
|
## algorithms/geodesy
|
|
|
|
|
|
This function retrieves the coordinate system information from the session storage.
|
|
This module contains the functions to perform the geodesic calculations.
|
|
|
|
|
|
### BathymetryResults.getMedianImage(collectionName, geometry, dtBegin, dtEnd)
|
|
### calculateArea()
|
|
|
|
|
|
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()
|
|
|
|
|
|
```javascript
|
|
This useEffect calls the following functions when the component is
|
|
|
|
mounted:
|
|
const MainPage = ({ match }) => {
|
|
|
|
// Register the dialogs when the component is mounted
|
|
\- getSatelliteImages() - maskClouds() - calculateNDVI() -
|
|
registerDialogs();
|
|
calculateShoreline()
|
|
|
|
|
|
// useStyles hook to inject custom styles
|
|
### calculateCoastalSqueeze()
|
|
const classes = useStyles();
|
|
|
|
|
|
This function calculates the Coastal Squeeze index for the selected
|
|
return (
|
|
images and displays the results on the map. It uses the following
|
|
<div className={classes.wrapper}>
|
|
functions:
|
|
<DialogRoot />
|
|
|
|
|
|
\- calculateArea() - calculateDistance() - getPolygonArea() -
|
|
<NavigationBar />
|
|
getPolygonPerimeter()
|
|
|
|
|
|
<Switch>
|
|
The results are saved in the Redux store using
|
|
<Route
|
|
dispatch(Acquisition.setCoastalSqueeze()).
|
|
exact
|
|
|
|
strict
|
|
## Code Used in Csqueeze
|
|
path={ ${match.url}/selection }
|
|
|
|
component={SelectionPage}
|
|
### **getMangroves()**
|
|
/>
|
|
|
|
<Route exact strict path={ ${match.url}/faq } component={FAQ} />
|
|
This function returns a Google Maps layer with possible mangrove areas
|
|
<Route
|
|
around the world using the "ESA/WorldCover/v200" collection.
|
|
exact
|
|
|
|
strict
|
|
``` javascript
|
|
path={ ${match.url}/problems }
|
|
|
|
component={ProblemsPage}
|
|
|
|
/>
|
|
|
|
// Other routes...
|
|
|
|
</Switch>
|
|
|
|
|
|
|
|
<ActivityIndicator />
|
|
function getMangroves() {
|
|
</div>
|
|
var mangroves = ee.ImageCollection("ESA/WorldCover/v200")
|
|
);
|
|
.filter(ee.Filter.eq("class", 2))
|
|
};
|
|
.mosaic()
|
|
|
|
.clipToCollection(AOI);
|
|
|
|
var visParams = {
|
|
|
|
min: 0.0,
|
|
|
|
max: 1.0,
|
|
|
|
palette: ["#687537"],
|
|
|
|
};
|
|
|
|
var mapLayer = mangroves.visualize(visParams);
|
|
|
|
return mapLayer;
|
|
|
|
}
|
|
```
|
|
```
|
|
|
|
|
|
#### **Inputs:**
|
|
#### **Inputs:**
|
... | @@ -163,231 +199,481 @@ No input parameters for this function. |
... | @@ -163,231 +199,481 @@ No input parameters for this function. |
|
|
|
|
|
#### **Output:**
|
|
#### **Output:**
|
|
|
|
|
|
Renders the main layout of the application with the appropriate components based on the route.
|
|
Google Maps layer with possible mangrove areas.
|
|
|
|
|
|
#### **Use**
|
|
#### **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
|
|
|
|
|
|
|
|
var mangrovesLayer = getMangroves();
|
|
|
|
map.addLayer(mangrovesLayer);
|
|
|
|
```
|
|
|
|
|
|
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.
|
|
### **useEffect()**
|
|
|
|
|
|
```javascript
|
|
This React hook runs when the component mounts and unmounts. It adds a
|
|
|
|
Google Maps layer showing possible mangrove areas and a drawing manager
|
|
const Bathemetry = (props) => {
|
|
to the map.
|
|
// Check if the user is authenticated
|
|
|
|
dispatch(Auth.begin());
|
|
``` javascript
|
|
|
|
|
|
// Check if the step is valid and check the requirements
|
|
|
|
if (!stepAttendsRequirements()) {
|
|
|
|
// If it is not, redirect to the first step
|
|
|
|
navigate(FIRST);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Other code...
|
|
|
|
|
|
|
|
return (
|
|
useEffect(() => {
|
|
<div className={classes.wrapper}>
|
|
mangroveLayer.current = getMangroves();
|
|
// Render the steps...
|
|
mapRef.current.overlayMapTypes.push(mangroveLayer.current);
|
|
</div>
|
|
|
|
);
|
|
drawingManager.current = new google.maps.drawing.DrawingManager({
|
|
};
|
|
drawingMode: "rectangle",
|
|
|
|
drawingControl: true,
|
|
|
|
drawingControlOptions: {
|
|
|
|
position: google.maps.ControlPosition.TOP_CENTER,
|
|
|
|
drawingModes: ["rectangle", "polygon"]
|
|
|
|
},
|
|
|
|
rectangleOptions: {
|
|
|
|
fillColor: "#00B3A1",
|
|
|
|
fillOpacity: 0.2,
|
|
|
|
strokeColor: "#003832",
|
|
|
|
strokeOpacity: 1,
|
|
|
|
strokeWeight: 0.5
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
drawingManager.current.setMap(mapRef.current);
|
|
|
|
}, []);
|
|
```
|
|
```
|
|
|
|
|
|
#### **Inputs:**
|
|
#### **Inputs:**
|
|
|
|
|
|
No input parameters for this function.
|
|
No input parameters. This is a React hook.
|
|
|
|
|
|
#### **Output:**
|
|
#### **Output:**
|
|
|
|
|
|
Renders the bathymetry analysis workflow.
|
|
A Google Maps layer showing possible mangrove areas and a drawing
|
|
|
|
manager are added to the map.
|
|
|
|
|
|
#### **Use**
|
|
#### **Use**
|
|
|
|
|
|
This function is used to handle the bathymetry analysis workflow. It contains the steps required for bathymetry analysis like:
|
|
Since this is a React hook, it will run automatically when the component
|
|
|
|
mounts. No usage example is needed.
|
|
|
|
|
|
|
|
### **handleMapClick()**
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
function handleMapClick(event) {
|
|
|
|
if (isPointInside(event.latLng, AOI.current.getPath())) {
|
|
|
|
if (!isDrawing.current) {
|
|
|
|
startDrawing(event.latLng);
|
|
|
|
setIsDrawing(true);
|
|
|
|
} else {
|
|
|
|
endDrawing(event.latLng);
|
|
|
|
setIsDrawing(false);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
1\. Area of interest selection 2. Image selection 3. Bands and algorithm selection 4. Threshold selection
|
|
#### **Inputs:**
|
|
|
|
|
|
It navigates between these steps based on the route and ensures the pre-requisites for each step are met before rendering them.
|
|
event - The click event on the map.
|
|
|
|
|
|
### **ProcessingBathemetryPage**
|
|
#### **Output:**
|
|
|
|
|
|
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.
|
|
Either starts or ends the drawing of a rectangle on the map.
|
|
|
|
|
|
```javascript
|
|
#### **Use**
|
|
|
|
|
|
const ProcessingBathymetryPage = () => {
|
|
This function is set as the click listener on the map. Whenever the map
|
|
// Check if the user is drawing a shape
|
|
is clicked, this function will handle the click and check if the click
|
|
const isDrawing = useSelector((state) => state.map.currentlyDrawing);
|
|
was within the AOI, in which case it will either start or end the
|
|
// Get the map coordinates
|
|
drawing of a rectangle.
|
|
const coordinates = useSelector((state) => state.acquisition.coordinates);
|
|
|
|
const dispatch = useDispatch();
|
|
``` javascript
|
|
// Custom styles
|
|
|
|
const classes = useStyles();
|
|
|
|
// Get the current language
|
|
|
|
const [t] = useTranslation();
|
|
|
|
|
|
|
|
// Code to process the bathymetry analysis and get the results...
|
|
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
|
|
|
|
|
|
return (
|
|
function endDrawing(endPoint) {
|
|
<Box className={classes.wrapper}>
|
|
if (isRectangleInside(rectangle.current, AOI.current)) {
|
|
{/* Render the results */}
|
|
rectangles.current.push({
|
|
</Box>
|
|
overlay: rectangle.current,
|
|
);
|
|
type: "rectangle"
|
|
};
|
|
});
|
|
|
|
} else {
|
|
|
|
rectangle.current.setMap(null);
|
|
|
|
}
|
|
|
|
drawingManager.current.setDrawingMode(null);
|
|
|
|
}
|
|
```
|
|
```
|
|
|
|
|
|
#### **Inputs:**
|
|
#### **Inputs:**
|
|
|
|
|
|
No input parameters for this function.
|
|
endPoint - The end point of the rectangle.
|
|
|
|
|
|
#### **Output:**
|
|
#### **Output:**
|
|
|
|
|
|
Renders the results of the bathymetry analysis like the predicted bathymetry image, statistics and download options.
|
|
Ends the drawing of the rectangle and either stores it for further use
|
|
|
|
or removes it from the map.
|
|
|
|
|
|
#### **Use**
|
|
#### **Use**
|
|
|
|
|
|
This function is used to display the results of the bathymetry analysis. It shows:
|
|
This function is called when ending the drawing of a rectangle to check
|
|
|
|
if it is within the AOI and handle it appropriately.
|
|
|
|
|
|
1\. The predicted bathymetry image 2. Statistics like RMSE, bias, slope etc. 3. Options to download the bathymetry image and statistics
|
|
``` javascript
|
|
|
|
|
|
It handles processing the bathymetry analysis based on the inputs provided in the previous steps and displays the results to the user.
|
|
function handleMapClick(event) {
|
|
|
|
// ...
|
|
|
|
if (isDrawing.current) {
|
|
|
|
endDrawing(event.latLng);
|
|
|
|
setIsDrawing(false);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
### **ProcessingPage**
|
|
### **getSatelliteImages()**
|
|
|
|
|
|
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 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.
|
|
|
|
|
|
```javascript
|
|
``` javascript
|
|
|
|
|
|
const ProcessingPage = () => {
|
|
function getSatelliteImages(geometry, startDate, endDate) {
|
|
// Get the analysis results from the store
|
|
var imageList = [];
|
|
const { transects, baseline, shorelines } = useSelector(
|
|
var imageCollection = ee.ImageCollection("LANDSAT/LC08/C01/T1_SR")
|
|
(state) => state.shoreline.results
|
|
.filterBounds(geometry)
|
|
);
|
|
.filterDate(startDate, endDate);
|
|
|
|
|
|
|
|
var count = imageCollection.size();
|
|
|
|
print("Total de imagens:", count);
|
|
|
|
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
var image = imageCollection.toList(count).get(i);
|
|
|
|
var date = ee.Date(image.get("system:time_start"));
|
|
|
|
var cloudCover = image.get("CLOUD_COVER");
|
|
|
|
|
|
|
|
imageList.push({
|
|
|
|
id: i,
|
|
|
|
date: date.format("YYYY-MM-dd"),
|
|
|
|
url: image.getThumbURL({ dimensions: 256 }),
|
|
|
|
cloudCover: cloudCover
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return imageList;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
#### **Inputs:**
|
|
|
|
|
|
|
|
geometry - The geometry to query images within. startDate - The start
|
|
|
|
date of the time range to query. endDate - The end date of the time
|
|
|
|
range to query.
|
|
|
|
|
|
|
|
#### **Output:**
|
|
|
|
|
|
|
|
A list of image objects containing metadata for the images found.
|
|
|
|
|
|
|
|
#### **Use**
|
|
|
|
|
|
|
|
This function can be used to query satellite images within a given area
|
|
|
|
and time range. The returned list of images can then be used to select
|
|
|
|
images for analysis.
|
|
|
|
|
|
|
|
``` javascript
|
|
|
|
|
|
// Code to process the shoreline change analysis and get the results...
|
|
var images = getSatelliteImages(geometry, "2020-01-01", "2020-12-31");
|
|
|
|
// Use images for selecting images, displaying thumbnails, etc.
|
|
|
|
```
|
|
|
|
|
|
|
|
### **maskClouds()**
|
|
|
|
|
|
|
|
This function masks clouds in a Landsat 8 image using the CFmask band.
|
|
|
|
It returns a new image with the cloudy pixels masked.
|
|
|
|
|
|
|
|
``` javascript
|
|
|
|
|
|
return (
|
|
function maskClouds(image) {
|
|
<Box className={classes.wrapper}>
|
|
var cfmask = image.select("cfmask");
|
|
{/* Render the results */}
|
|
var clouds = cfmask.eq(1); // Bit 1 is clouds
|
|
</Box>
|
|
var shadows = cfmask.eq(2); // Bit 2 is shadows
|
|
);
|
|
var mask = clouds.or(shadows);
|
|
};
|
|
return image.updateMask(mask.not());
|
|
|
|
}
|
|
```
|
|
```
|
|
|
|
|
|
#### **Inputs:**
|
|
#### **Inputs:**
|
|
|
|
|
|
No input parameters for this function.
|
|
image - The Landsat 8 image to mask clouds in.
|
|
|
|
|
|
#### **Output:**
|
|
#### **Output:**
|
|
|
|
|
|
Renders the results of the shoreline change analysis like shoreline change maps, transect report, transect evolution graphs and download options.
|
|
A new image with the cloudy pixels masked.
|
|
|
|
|
|
#### **Use**
|
|
#### **Use**
|
|
|
|
|
|
This function is used to display the results of the shoreline change analysis. It shows:
|
|
This function can be used to mask clouds in a Landsat 8 image before
|
|
|
|
performing analysis on the image.
|
|
|
|
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
var maskedImage = 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.
|
|
|
|
|
|
1\. Shoreline change maps 2. Transect report 3. Transect evolution graphs 4. Options to download the results
|
|
``` javascript
|
|
|
|
|
|
|
|
function calculateArea(polygon) {
|
|
|
|
var area = 0;
|
|
|
|
var len = polygon.length;
|
|
|
|
var j = len - 1;
|
|
|
|
for (var i = 0; i < len; i++) {
|
|
|
|
area += (polygon[j].x + polygon[i].x) * (polygon[j].y - polygon[i].y);
|
|
|
|
j = i;
|
|
|
|
}
|
|
|
|
return Math.abs(area / 2);
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
#### **Inputs:**
|
|
|
|
|
|
|
|
polygon - The polygon to calculate the area of, as a list of points.
|
|
|
|
|
|
|
|
#### **Output:**
|
|
|
|
|
|
It handles processing the shoreline change analysis based on the inputs provided in the previous steps and displays the results to the user.
|
|
The area of the polygon in square meters.
|
|
|
|
|
|
### **SelectionPage**
|
|
#### **Use**
|
|
|
|
|
|
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 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.
|
|
|
|
|
|
```javascript
|
|
``` javascript
|
|
|
|
|
|
const SelectionPage = () => {
|
|
var area = calculateArea(polygon);
|
|
const dispatch = useDispatch();
|
|
console.log("Area of polygon: " + area + " square meters");
|
|
const [t] = useTranslation();
|
|
```
|
|
const classes = useStyles();
|
|
|
|
|
|
### **calculateDistance()**
|
|
|
|
|
|
|
|
This function calculates the distance between two points in meters. It
|
|
|
|
uses the Google Maps Geometry library to calculate the distance.
|
|
|
|
|
|
|
|
``` javascript
|
|
|
|
|
|
return (
|
|
function calculateDistance(point1, point2) {
|
|
<HomePageLayout>
|
|
return google.maps.geometry.spherical.computeDistanceBetween(point1, point2);
|
|
<Box className={classes.wrapper}>
|
|
}
|
|
{/* Render the options to start bathymetry analysis, shoreline change analysis and coastal squeeze */}
|
|
|
|
</Box>
|
|
|
|
</HomePageLayout>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
```
|
|
```
|
|
|
|
|
|
#### **Inputs:**
|
|
#### **Inputs:**
|
|
|
|
|
|
No input parameters for this function.
|
|
point1 - The first point as a google.maps.LatLng object. point2 - The
|
|
|
|
second point as a google.maps.LatLng object.
|
|
|
|
|
|
#### **Output:**
|
|
#### **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**
|
|
#### **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.
|
|
|
|
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
var distance = calculateDistance(point1, point2);
|
|
|
|
console.log("Distance between points: " + distance + " meters");
|
|
|
|
```
|
|
|
|
|
|
|
|
### **calculateNDVI()**
|
|
|
|
|
|
|
|
This function calculates the Normalized Difference Vegetation Index
|
|
|
|
(NDVI) for a given image. It uses bands 4 (Red) and 5 (Near Infrared) to
|
|
|
|
calculate the NDVI.
|
|
|
|
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
function calculateNDVI(image) {
|
|
|
|
var nir = image.select("B5");
|
|
|
|
var red = image.select("B4");
|
|
|
|
var ndvi = nir.subtract(red).divide(nir.add(red)).rename("NDVI");
|
|
|
|
return image.addBands(ndvi);
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
#### **Inputs:**
|
|
|
|
|
|
|
|
image - The image to calculate the NDVI for.
|
|
|
|
|
|
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.
|
|
#### **Output:**
|
|
|
|
|
|
When the user selects an option, they are navigated to the corresponding workflow.
|
|
The image with the NDVI band added.
|
|
|
|
|
|
### **BathymetryBandsAndAlgorithmSelection**
|
|
#### **Use**
|
|
|
|
|
|
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 can be used to calculate the NDVI for a given image. The
|
|
|
|
image should be a Landsat 8 image.
|
|
|
|
|
|
```javascript
|
|
``` javascript
|
|
|
|
|
|
const BathymetryBandsAndAlgorithmSelection = () => {
|
|
var ndviImage = calculateNDVI(image);
|
|
const dispatch = useDispatch();
|
|
// Use ndviImage for analysis
|
|
const [t] = useTranslation();
|
|
```
|
|
|
|
|
|
|
|
### **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
|
|
|
|
|
|
// Code to select bands and algorithm...
|
|
function calculateShoreline(image) {
|
|
|
|
var ndvi = image.select("NDVI");
|
|
|
|
var threshold = ndvi.lt(0.2);
|
|
|
|
var shoreline = threshold.focal_mode(3);
|
|
|
|
return shoreline.rename("Shoreline");
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
#### **Inputs:**
|
|
|
|
|
|
|
|
image - The image to calculate the shoreline for.
|
|
|
|
|
|
|
|
#### **Output:**
|
|
|
|
|
|
|
|
The image with the shoreline band added.
|
|
|
|
|
|
|
|
#### **Use**
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
``` javascript
|
|
|
|
|
|
return (
|
|
var shorelineImage = calculateShoreline(ndviImage);
|
|
<Box>
|
|
// Use shorelineImage for analysis
|
|
{/* Render options to select bands and graphs to select algorithm */}
|
|
```
|
|
</Box>
|
|
|
|
);
|
|
### **getPolygonArea()**
|
|
};
|
|
|
|
|
|
This function calculates the area of a polygon in square kilometers. It
|
|
|
|
uses the Google Earth Engine API to calculate the area.
|
|
|
|
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
function getPolygonArea(polygon) {
|
|
|
|
return ee.Geometry(polygon).area().divide(1000000);
|
|
|
|
}
|
|
```
|
|
```
|
|
|
|
|
|
#### **Inputs:**
|
|
#### **Inputs:**
|
|
|
|
|
|
No input parameters for this function.
|
|
polygon - The polygon to calculate the area of, as an ee.Geometry
|
|
|
|
object.
|
|
|
|
|
|
#### **Output:**
|
|
#### **Output:**
|
|
|
|
|
|
Renders options to select bands and graphs to select the algorithm for bathymetry analysis.
|
|
The area of the polygon in square kilometers.
|
|
|
|
|
|
#### **Use**
|
|
#### **Use**
|
|
|
|
|
|
This function is used to select bands and algorithm for bathymetry analysis. It shows:
|
|
This function can be used to calculate the area of a polygon. The
|
|
|
|
polygon should be an ee.Geometry object.
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
var area = getPolygonArea(polygon);
|
|
|
|
console.log("Area of polygon: " + area + " square kilometers");
|
|
|
|
```
|
|
|
|
|
|
### **AOIChooser**
|
|
### **getPolygonPerimeter()**
|
|
|
|
|
|
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 perimeter of a polygon in kilometers. It
|
|
|
|
uses the Google Earth Engine API to calculate the perimeter.
|
|
|
|
|
|
```javascript
|
|
``` javascript
|
|
|
|
|
|
const AOIChooser = () => {
|
|
function getPolygonPerimeter(polygon) {
|
|
const dispatch = useDispatch();
|
|
return ee.Geometry(polygon).perimeter().divide(1000);
|
|
const [t] = useTranslation();
|
|
}
|
|
const classes = useStyles();
|
|
```
|
|
|
|
|
|
|
|
#### **Inputs:**
|
|
|
|
|
|
|
|
polygon - The polygon to calculate the perimeter of, as an ee.Geometry
|
|
|
|
object.
|
|
|
|
|
|
|
|
#### **Output:**
|
|
|
|
|
|
|
|
The perimeter of the polygon in kilometers.
|
|
|
|
|
|
|
|
#### **Use**
|
|
|
|
|
|
|
|
This function can be used to calculate the perimeter of a polygon. The
|
|
|
|
polygon should be an ee.Geometry object.
|
|
|
|
|
|
|
|
``` javascript
|
|
|
|
|
|
// Code to select area of interest...
|
|
var perimeter = getPolygonPerimeter(polygon);
|
|
|
|
console.log("Perimeter of polygon: " + perimeter + " kilometers");
|
|
|
|
```
|
|
|
|
|
|
|
|
### **calculateCoastalSqueeze()**
|
|
|
|
|
|
|
|
This function calculates the coastal squeeze for a given image. It uses
|
|
|
|
the shoreline and mangrove bands to calculate the squeeze.
|
|
|
|
|
|
|
|
``` javascript
|
|
|
|
|
|
return (
|
|
function calculateCoastalSqueeze(image) {
|
|
<Box>
|
|
var shoreline = image.select("Shoreline");
|
|
{/* Render map to draw area of interest and options to import from KML */}
|
|
var mangroves = image.select("Mangroves");
|
|
</Box>
|
|
var squeeze = mangroves.and(shoreline.not());
|
|
);
|
|
return squeeze.rename("Coastal Squeeze");
|
|
};
|
|
}
|
|
```
|
|
```
|
|
|
|
|
|
#### **Inputs:**
|
|
#### **Inputs:**
|
|
|
|
|
|
No input parameters for this function.
|
|
image - The image to calculate the coastal squeeze for.
|
|
|
|
|
|
#### **Output:**
|
|
#### **Output:**
|
|
|
|
|
|
Renders a map to select the |
|
The image with the coastal squeeze band added.
|
|
\ No newline at end of file |
|
|
|
|
|
#### **Use**
|
|
|
|
|
|
|
|
This function can be used to calculate the coastal squeeze for a given
|
|
|
|
image. The image should have shoreline and mangrove bands.
|
|
|
|
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
var squeezeImage = calculateCoastalSqueeze(image);
|
|
|
|
// Use squeezeImage for analysis
|
|
|
|
```
|
|
|
|
|
|
|
|
<hr> |