Build WebGIS Frontend HTML, JS, Flask API to Google Earth Engine - Phase 2
🛰️ Join the community for more Python, GEE & GIS tutorials on this series: / @geospatialflowgismaps
In this sixth video of the series, we connect the frontend to our backend API and build a simple WebGIS interface using Google Earth Engine.
Users can select a date range and request satellite data directly from the browser. The frontend sends this request to the Flask backend, which processes Landsat imagery using the Google Earth Engine Python API and returns mean NDVI value.
This is an important step where we move from backend-only processing to an interactive WebGIS application.
What you will learn:
• to build a simple HTML frontend
• to take user input using date selectors
• to use JavaScript Fetch API
• to connect frontend with Flask backend
• to retrieve and display NDVI results for a ROI from Google Earth Engine
⏱️ Timestamps:
00:00 - Introduction
00:26 - What we will build
00:38 - Project folder structure
01:30 - Earth engine and backend app setup
02:34 - Building the Frontend (index.html & Date Picker)
04:30 - Testing the Frontend-Backend Handshake and select dates and display mean NDVI result
Project Structure:
app.py
config.py
requirements.txt
templates/index.html
All project code for this tutorial series is available here:
GitHub Repository: https://github.com/SMV09/earth-engine...
In the next video, we will visualize satellite data on a map using Leaflet and Google Earth Engine tiles.
🔗 Previous Video (Backend API): • Build a WebGIS Backend API with Flask & Go...
📌 Practice:
Try changing the date range and observe how NDVI values vary for different time periods.
#WebGIS #GoogleEarthEngine #Flask #JavaScript #RemoteSensing