Skip to content

GitLab

CSqueeze · Changes

Page history
Update CSqueeze authored by Ramicés dos Santos Silva's avatar Ramicés dos Santos Silva
Hide whitespace changes
Inline Side-by-side
CSqueeze.md
View page @ f5951889
......@@ -11,18 +11,15 @@
# Activity Documentation for Csqueeze Module
This documentation provides a detailed explanation of the user
interaction pages in the Csqueeze module.
This documentation provides a detailed explanation of the user interaction pages in the Csqueeze module.
## Diagram
[1100x1100px](Arquivo:Csqueeze_Activity_Diagram.png "wikilink")
![csqueeze](https://codigos.ufsc.br/loc/cassie/-/wikis/uploads/00738cfb4c73a5c5faf0428c3407b07c/csqueeze.png)
## app/pages/SelectionPage
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.
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.
## app/pages/CSqueeze
......@@ -34,71 +31,51 @@ This page shows the processing screen for the Coastal Squeeze analysis.
## app/components/csqueeze/AOIChooser
This component is responsible for the user to choose the Area of
Interest (AOI). It has the following functions:
This component is responsible for the user to choose the Area of Interest (AOI). It has the following functions:
### getMangroves()
This function, from algorithms/csqueeze, uses the "ESA/WorldCover/v200"
collection to get possible mangrove areas around the world.
This function, from algorithms/csqueeze, uses the "ESA/WorldCover/v200" collection to get possible mangrove areas around the world.
### useEffect()
This useEffect calls getMangroves() when the component is mounted to
show possible mangrove areas on the map.
This useEffect calls getMangroves() when the component is mounted to show possible mangrove areas on the map.
### handleMapClick()
This function is called when the user clicks on the map. It starts the
drawing of the AOI using the Google Maps Drawing Manager.
This function is called when the user clicks on the map. It starts the drawing of the AOI using the Google Maps Drawing Manager.
### endDrawing()
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()).
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()).
## app/components/csqueeze/YearsSelect
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()).
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()).
## app/components/csqueeze/ImagesSelect
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()).
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()).
## app/components/csqueeze/CloudFilters
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()).
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()).
## app/components/csqueeze/LandCover
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()).
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()).
## algorithms/acquisition
This module contains the functions to acquire the satellite images and
perform the cloud masking.
This module contains the functions to acquire the satellite images and perform the cloud masking.
### getSatelliteImages()
This function gets the satellite images for the selected years and AOI
using the Google Earth Engine API.
This function gets the satellite images for the selected years and AOI using the Google Earth Engine API.
### maskClouds()
This function masks the clouds in the selected images using the cloud
filters selected by the user.
This function masks the clouds in the selected images using the cloud filters selected by the user.
## algorithms/geodesy
......@@ -106,77 +83,61 @@ This module contains the functions to perform the geodesic calculations.
### calculateArea()
This function calculates the area of the AOI in square kilometers using
the Haversine formula.
This function calculates the area of the AOI in square kilometers using the Haversine formula.
### calculateDistance()
This function calculates the distance between two points in meters using
the Vincenty formula.
This function calculates the distance between two points in meters using the Vincenty formula.
## algorithms/satellite
This module contains the functions to perform the Coastal Squeeze
analysis.
This module contains the functions to perform the Coastal Squeeze analysis.
### calculateNDVI()
This function calculates the Normalized Difference Vegetation Index
(NDVI) for the selected images.
This function calculates the Normalized Difference Vegetation Index (NDVI) for the selected images.
### calculateShoreline()
This function calculates the shoreline for the selected images using the
mangrove and land cover polygons drawn by the user.
This function calculates the shoreline for the selected images using the mangrove and land cover polygons drawn by the user.
## algorithms/utils
This module contains utility functions used in the Coastal Squeeze
analysis.
This module contains utility functions used in the Coastal Squeeze analysis.
### getPolygonArea()
This function calculates the area of a polygon in square kilometers
using the Shoelace formula.
This function calculates the area of a polygon in square kilometers using the Shoelace formula.
### getPolygonPerimeter()
This function calculates the perimeter of a polygon in meters using the
Haversine formula.
This function calculates the perimeter of a polygon in meters using the Haversine formula.
## app/pages/ProcessingPage
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 page shows the final maps and analysis for the Coastal Squeeze. It uses the data saved in the Redux store from the previous steps.
### useEffect()
This useEffect calls the following functions when the component is
mounted:
This useEffect calls the following functions when the component is mounted:
\- getSatelliteImages() - maskClouds() - calculateNDVI() -
calculateShoreline()
\- getSatelliteImages() - maskClouds() - calculateNDVI() - calculateShoreline()
### calculateCoastalSqueeze()
This function calculates the Coastal Squeeze index for the selected
images and displays the results on the map. It uses the following
functions:
This function calculates the Coastal Squeeze index for the selected images and displays the results on the map. It uses the following functions:
\- calculateArea() - calculateDistance() - getPolygonArea() -
getPolygonPerimeter()
\- calculateArea() - calculateDistance() - getPolygonArea() - getPolygonPerimeter()
The results are saved in the Redux store using
dispatch(Acquisition.setCoastalSqueeze()).
The results are saved in the Redux store using dispatch(Acquisition.setCoastalSqueeze()).
## Code Used in Csqueeze
### **getMangroves()**
This function returns a Google Maps layer with possible mangrove areas
around the world using the "ESA/WorldCover/v200" collection.
This function returns a Google Maps layer with possible mangrove areas around the world using the "ESA/WorldCover/v200" collection.
``` javascript
```javascript
function getMangroves() {
var mangroves = ee.ImageCollection("ESA/WorldCover/v200")
......@@ -203,10 +164,9 @@ Google Maps layer with possible mangrove areas.
#### **Use**
To use this function, simply call getMangroves() and add the returned
Google Maps layer to the map using map.addLayer().
To use this function, simply call getMangroves() and add the returned Google Maps layer to the map using map.addLayer().
``` javascript
```javascript
var mangrovesLayer = getMangroves();
map.addLayer(mangrovesLayer);
......@@ -214,11 +174,9 @@ 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
to the map.
This React hook runs when the component mounts and unmounts. It adds a Google Maps layer showing possible mangrove areas and a drawing manager to the map.
``` javascript
```javascript
useEffect(() => {
mangroveLayer.current = getMangroves();
......@@ -250,20 +208,17 @@ No input parameters. This is a React hook.
#### **Output:**
A Google Maps layer showing possible mangrove areas and a drawing
manager are added to the map.
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.
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.
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
```javascript
function handleMapClick(event) {
if (isPointInside(event.latLng, AOI.current.getPath())) {
......@@ -288,12 +243,9 @@ 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.
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
```javascript
mapRef.current.addListener("click", (event) => {
handleMapClick(event);
......@@ -302,11 +254,9 @@ mapRef.current.addListener("click", (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.
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
```javascript
function endDrawing(endPoint) {
if (isRectangleInside(rectangle.current, AOI.current)) {
......@@ -327,15 +277,13 @@ endPoint - The end point of the rectangle.
#### **Output:**
Ends the drawing of the rectangle and either stores it for further use
or removes it from the map.
Ends the drawing of the rectangle and either stores it for further use or removes it from the map.
#### **Use**
This function is called when ending the drawing of a rectangle to check
if it is within the AOI and handle it appropriately.
This function is called when ending the drawing of a rectangle to check if it is within the AOI and handle it appropriately.
``` javascript
```javascript
function handleMapClick(event) {
// ...
......@@ -348,11 +296,9 @@ function handleMapClick(event) {
### **getSatelliteImages()**
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.
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
function getSatelliteImages(geometry, startDate, endDate) {
var imageList = [];
......@@ -382,9 +328,7 @@ function getSatelliteImages(geometry, startDate, endDate) {
#### **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.
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:**
......@@ -392,11 +336,9 @@ 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.
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
```javascript
var images = getSatelliteImages(geometry, "2020-01-01", "2020-12-31");
// Use images for selecting images, displaying thumbnails, etc.
......@@ -404,10 +346,9 @@ var images = getSatelliteImages(geometry, "2020-01-01", "2020-12-31");
### **maskClouds()**
This function masks clouds in a Landsat 8 image using the CFmask band.
It returns a new image with the cloudy pixels masked.
This function masks clouds in a Landsat 8 image using the CFmask band. It returns a new image with the cloudy pixels masked.
``` javascript
```javascript
function maskClouds(image) {
var cfmask = image.select("cfmask");
......@@ -428,10 +369,9 @@ 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.
This function can be used to mask clouds in a Landsat 8 image before performing analysis on the image.
``` javascript
```javascript
var maskedImage = maskClouds(image);
// Use maskedImage for analysis
......@@ -439,10 +379,9 @@ var maskedImage = maskClouds(image);
### **calculateArea()**
This function calculates the area of a polygon in square meters. It uses
the Google Maps Geometry library to calculate the area.
This function calculates the area of a polygon in square meters. It uses the Google Maps Geometry library to calculate the area.
``` javascript
```javascript
function calculateArea(polygon) {
var area = 0;
......@@ -466,11 +405,9 @@ The area of the polygon in square meters.
#### **Use**
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.
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
var area = calculateArea(polygon);
console.log("Area of polygon: " + area + " square meters");
......@@ -478,10 +415,9 @@ console.log("Area of polygon: " + area + " square meters");
### **calculateDistance()**
This function calculates the distance between two points in meters. It
uses the Google Maps Geometry library to calculate the distance.
This function calculates the distance between two points in meters. It uses the Google Maps Geometry library to calculate the distance.
``` javascript
```javascript
function calculateDistance(point1, point2) {
return google.maps.geometry.spherical.computeDistanceBetween(point1, point2);
......@@ -490,8 +426,7 @@ function calculateDistance(point1, point2) {
#### **Inputs:**
point1 - The first point as a google.maps.LatLng object. point2 - The
second point as a google.maps.LatLng object.
point1 - The first point as a google.maps.LatLng object. point2 - The second point as a google.maps.LatLng object.
#### **Output:**
......@@ -499,10 +434,9 @@ The distance between the two points in meters.
#### **Use**
This function can be used to calculate the distance between two points.
Each point should be a google.maps.LatLng object.
This function can be used to calculate the distance between two points. Each point should be a google.maps.LatLng object.
``` javascript
```javascript
var distance = calculateDistance(point1, point2);
console.log("Distance between points: " + distance + " meters");
......@@ -510,11 +444,9 @@ 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.
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
```javascript
function calculateNDVI(image) {
var nir = image.select("B5");
......@@ -534,10 +466,9 @@ 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.
This function can be used to calculate the NDVI for a given image. The image should be a Landsat 8 image.
``` javascript
```javascript
var ndviImage = calculateNDVI(image);
// Use ndviImage for analysis
......@@ -545,11 +476,9 @@ var ndviImage = calculateNDVI(image);
### **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.
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
```javascript
function calculateShoreline(image) {
var ndvi = image.select("NDVI");
......@@ -569,10 +498,9 @@ 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.
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
```javascript
var shorelineImage = calculateShoreline(ndviImage);
// Use shorelineImage for analysis
......@@ -580,10 +508,9 @@ var shorelineImage = calculateShoreline(ndviImage);
### **getPolygonArea()**
This function calculates the area of a polygon in square kilometers. It
uses the Google Earth Engine API to calculate the area.
This function calculates the area of a polygon in square kilometers. It uses the Google Earth Engine API to calculate the area.
``` javascript
```javascript
function getPolygonArea(polygon) {
return ee.Geometry(polygon).area().divide(1000000);
......@@ -592,8 +519,7 @@ function getPolygonArea(polygon) {
#### **Inputs:**
polygon - The polygon to calculate the area of, as an ee.Geometry
object.
polygon - The polygon to calculate the area of, as an ee.Geometry object.
#### **Output:**
......@@ -601,10 +527,9 @@ The area of the polygon in square kilometers.
#### **Use**
This function can be used to calculate the area of a polygon. The
polygon should be an ee.Geometry object.
This function can be used to calculate the area of a polygon. The polygon should be an ee.Geometry object.
``` javascript
```javascript
var area = getPolygonArea(polygon);
console.log("Area of polygon: " + area + " square kilometers");
......@@ -612,10 +537,9 @@ console.log("Area of polygon: " + area + " square kilometers");
### **getPolygonPerimeter()**
This function calculates the perimeter of a polygon in kilometers. It
uses the Google Earth Engine API to calculate the perimeter.
This function calculates the perimeter of a polygon in kilometers. It uses the Google Earth Engine API to calculate the perimeter.
``` javascript
```javascript
function getPolygonPerimeter(polygon) {
return ee.Geometry(polygon).perimeter().divide(1000);
......@@ -624,8 +548,7 @@ function getPolygonPerimeter(polygon) {
#### **Inputs:**
polygon - The polygon to calculate the perimeter of, as an ee.Geometry
object.
polygon - The polygon to calculate the perimeter of, as an ee.Geometry object.
#### **Output:**
......@@ -633,10 +556,9 @@ 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.
This function can be used to calculate the perimeter of a polygon. The polygon should be an ee.Geometry object.
``` javascript
```javascript
var perimeter = getPolygonPerimeter(polygon);
console.log("Perimeter of polygon: " + perimeter + " kilometers");
......@@ -644,10 +566,9 @@ 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.
This function calculates the coastal squeeze for a given image. It uses the shoreline and mangrove bands to calculate the squeeze.
``` javascript
```javascript
function calculateCoastalSqueeze(image) {
var shoreline = image.select("Shoreline");
......@@ -667,13 +588,12 @@ The image with the coastal squeeze band added.
#### **Use**
This function can be used to calculate the coastal squeeze for a given
image. The image should have shoreline and mangrove bands.
This function can be used to calculate the coastal squeeze for a given image. The image should have shoreline and mangrove bands.
``` javascript
```javascript
var squeezeImage = calculateCoastalSqueeze(image);
// Use squeezeImage for analysis
```
<hr>
---
\ No newline at end of file