Activity Documentation for Csqueeze Module

This documentation provides a detailed explanation of the user interaction pages in the Csqueeze module.

Diagram

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.

app/pages/CSqueeze

This page contains the steps to perform the Coastal Squeeze analysis.

app/pages/ProcessingPage

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:

getMangroves()

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.

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.

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()).

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()).

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()).

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()).

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()).

algorithms/acquisition

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.

maskClouds()

This function masks the clouds in the selected images using the cloud filters selected by the user.

algorithms/geodesy

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.

calculateDistance()

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.

calculateNDVI()

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.

algorithms/utils

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.

getPolygonPerimeter()

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.

useEffect()

This useEffect calls the following functions when the component is mounted:

- 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:

- calculateArea() - calculateDistance() - getPolygonArea() - getPolygonPerimeter()

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.

 
function getMangroves() { 
  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:

No input parameters for this function.

Output:

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().

 
var mangrovesLayer = 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 to the map.

 
useEffect(() => { 
  mangroveLayer.current = getMangroves(); 
  mapRef.current.overlayMapTypes.push(mangroveLayer.current); 
   
  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:

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.

Use

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.

  
function handleMapClick(event) { 
  if (isPointInside(event.latLng, AOI.current.getPath())) { 
    if (!isDrawing.current) { 
      startDrawing(event.latLng); 
      setIsDrawing(true); 
    } else { 
      endDrawing(event.latLng); 
      setIsDrawing(false); 
    } 
  } 
} 

Inputs:

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.

 
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.

 
function endDrawing(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:

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.

Use

This function is called when ending the drawing of a rectangle to check if it is within the AOI and handle it appropriately.

 
function handleMapClick(event) { 
  // ... 
  if (isDrawing.current) { 
    endDrawing(event.latLng); 
    setIsDrawing(false); 
  } 
} 

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.

 
function getSatelliteImages(geometry, startDate, endDate) { 
  var imageList = []; 
  var imageCollection = ee.ImageCollection("LANDSAT/LC08/C01/T1_SR") 
    .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.

 
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.

 
function maskClouds(image) { 
  var cfmask = image.select("cfmask"); 
  var clouds = cfmask.eq(1); // Bit 1 is clouds 
  var shadows = cfmask.eq(2); // Bit 2 is shadows 
  var mask = clouds.or(shadows); 
  return image.updateMask(mask.not()); 
} 

Inputs:

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.

 
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.

 
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:

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.

 
var area = calculateArea(polygon); 
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.

 
function calculateDistance(point1, point2) { 
  return google.maps.geometry.spherical.computeDistanceBetween(point1, point2); 
} 

Inputs:

point1 - The first point as a google.maps.LatLng object. point2 - The second point as a google.maps.LatLng object.

Output:

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.

 
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.

 
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.

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.

 
var ndviImage = 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.

 
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.

 
var shorelineImage = calculateShoreline(ndviImage); 
// Use shorelineImage for analysis 

getPolygonArea()

This function calculates the area of a polygon in square kilometers. It uses the Google Earth Engine API to calculate the area.

 
function getPolygonArea(polygon) { 
  return ee.Geometry(polygon).area().divide(1000000); 
} 

Inputs:

polygon - The polygon to calculate the area of, as an ee.Geometry object.

Output:

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.

 
var area = getPolygonArea(polygon); 
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.

 
function getPolygonPerimeter(polygon) { 
  return ee.Geometry(polygon).perimeter().divide(1000); 
} 

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.

 
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.

 
function calculateCoastalSqueeze(image) { 
  var shoreline = image.select("Shoreline"); 
  var mangroves = image.select("Mangroves"); 
  var squeeze = mangroves.and(shoreline.not()); 
  return squeeze.rename("Coastal Squeeze"); 
} 

Inputs:

image - The image to calculate the coastal squeeze for.

Output:

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.

 
var squeezeImage = calculateCoastalSqueeze(image); 
// Use squeezeImage for analysis