How to Integrate Satellite Imagery for Environmental Monitoring in FlutterFlow

NASA FIRMS (Fire Information for Resource Management System) provides active fire hotspot data as GeoJSON with no authentication required for basic queries. Create a Cloud Function named getFireData that takes a latitude, longitude, and radius in km. The function calls https://firms.modaps.eosdis.nasa.gov/api/area/csv?api_key={YOUR_KEY}&source=VIIRS_SNPP_NRT&area_of_interest={bbox}&date_range=1 where the bounding box is calculated from the center point and radius. Get a free API key at firms.modaps.eosdis.nasa.gov/api/area. The response is CSV — parse it to extract latitude, longitude, brightness (fire intensity), confidence, and acquisition time per hotspot. Return as JSON array. Register your FIRMS API key in FlutterFlow Secrets (Settings → Secrets) as FIRMS_API_KEY and read it in the Cloud Function via process.env.FIRMS_API_KEY.

In your FlutterFlow app, add a FlutterFlowGoogleMap widget to a full-screen Container. Add an API Call in the API Manager pointing to your getFireData Cloud Function. In the Page's On Page Load action, call getFireData with the user's current location (or a default map center) and store the results in a Page State List variable named fireHotspots. On the FlutterFlowGoogleMap, add Markers bound to the fireHotspots list using Generate Dynamic Markers. Each marker uses latitude and longitude from the hotspot data. For marker color, use a Custom Function that converts confidence percentage to a color: confidence > 80 = red (high confidence fire), 50-80 = orange (medium), under 50 = yellow (low confidence). Tapping a marker shows a bottom sheet InfoWindow with the brightness temperature, satellite source, and acquisition time.

Google Earth Engine (GEE) processes satellite imagery at scale. For vegetation health monitoring, NDVI (Normalized Difference Vegetation Index) measures plant health: values near 1.0 are dense green vegetation, near 0 is bare soil, negative values are water. Create a Cloud Function named getNDVITiles that authenticates with Earth Engine using a service account (download JSON key from Google Cloud Console → Service Accounts, store in Cloud Functions config), initializes ee.Initialize(credentials), then creates an NDVI image: ee.ImageCollection('LANDSAT/LC09/C02/T1_TOA').filterDate(startDate, endDate).median().normalizedDifference(['B5','B4']). Apply a color palette and generate a map tile URL using image.getMapId({min: -0.1, max: 0.9, palette: ['brown', 'yellow', 'lightgreen', 'darkgreen']}). Return the tile URL template. This URL is then used as a TileOverlay on your Google Map.

1// Cloud Function: getNDVITiles
2const ee = require('@google/earthengine');
3const serviceAccount = require('./service-account.json');
4
5exports.getNDVITiles = async (req, res) => {
6  const { startDate, endDate } = req.query;
7
8  // Authenticate with service account
9  await new Promise((resolve, reject) => {
10    ee.data.authenticateViaPrivateKey(
11      serviceAccount,
12      () => { ee.initialize(null, null, resolve, reject); },
13      reject
14    );
15  });
16
17  // Calculate NDVI from Landsat 9
18  const ndvi = ee.ImageCollection('LANDSAT/LC09/C02/T1_TOA')
19    .filterDate(startDate || '2024-01-01',
20                endDate || '2024-12-31')
21    .filterBounds(ee.Geometry.Rectangle(
22      [-180, -60, 180, 70]))
23    .median()
24    .normalizedDifference(['B5', 'B4'])
25    .rename('NDVI');
26
27  // Get tile URL with color palette
28  const mapId = await ndvi.getMapId({
29    min: -0.1, max: 0.9,
30    palette: ['8B4513', 'FFFF00',
31              '90EE90', '006400']
32  });
33
34  res.json({ tileUrl: mapId.urlFormat });
35};

FlutterFlowGoogleMap supports marker overlays but not tile layers directly. Create a Custom Widget named SatelliteMapOverlay that wraps google_maps_flutter with TileOverlay support. Add google_maps_flutter: ^2.5.0 to Pubspec Dependencies. The widget takes a tileUrlTemplate (String) parameter. In the widget's GoogleMap constructor, add tileOverlays: {TileOverlay(tileOverlayId: TileOverlayId('satellite'), tileProvider: UrlTileProvider(tileUrlTemplate))}. In FlutterFlow, use this Custom Widget instead of the standard FlutterFlowGoogleMap for pages that need satellite imagery overlays. Position the widget to fill the screen, and layer FlutterFlow's standard UI controls (legend, date picker, info panel) on top using a Stack widget.

Add a Slider widget to your environmental monitoring page. Set minimum to 0 and maximum to 11 (representing months 0-11 in the current year, or use a wider range for multi-year analysis). Store the slider value in a Page State variable named selectedMonth. Create a Custom Function named getDateRangeForMonth that converts the month integer to a start and end date string: month 0 returns startDate: '2024-01-01', endDate: '2024-01-31'. On Slider change, call getNDVITiles via your API Call with the new date range and update the tile URL. This lets users scrub through monthly NDVI changes to see deforestation events, drought progression, or seasonal crop cycles. Add month labels below the slider using a Custom Function that returns ['Jan', 'Feb', 'Mar', ...][selectedMonth].