Full Stack GIS Web Mapping App | React Leaflet + PostGIS + PostgreSQL

Udemy: https://www.udemy.com/course/google-e...

In this tutorial, we build a real-world GIS web mapping application using React Leaflet, PostgreSQL, and PostGIS.

You will learn how to store geospatial data in PostGIS, convert it to GeoJSON, expose it through a backend API, and fetch and display it on an interactive web map using React and Leaflet.

This is a full-stack GIS development tutorial designed for:

GIS students, Web developers, Geospatial developers, Anyone learning GIS web mapping
This are the Technologies I Used,
React.js, React Leaflet, Leaflet, PostgreSQL, PostGIS, GeoJSON, Node.js & Express, OpenStreetMap

📌 What You Will Learn

How to set up PostGIS in PostgreSQL
How to store and manage geospatial data
How to convert PostGIS data to GeoJSON
How to create an API to serve spatial data
How to fetch GeoJSON data in React
How to display polygons on a map using React Leaflet
How to style geospatial data (choropleth maps)
How to add popups, hover effects, and legends

🗺️ Application Overview

We build a web map that:
Displays county boundaries from PostGIS
Fetches spatial data from PostgreSQL
Visualizes population data on a map
Uses dynamic styling and interactive popups
This workflow mirrors real GIS production systems used in professional projects.

💡 Who This Video Is For

Beginners learning GIS web development
GIS professionals transitioning to web mapping
Developers working with spatial databases
Anyone interested in full-stack geospatial applications

📂 Source Code

GitHub: https://github.com/MicahSifuna/postgr...
React Leaflet: https://react-leaflet.js.org/
Leaflet js: https://leafletjs.com/index.html
Download and Install PostgreSQL:    • Download and Install PostgreSQL with PostG...  

👍 Support the Channel

If you find this tutorial helpful:
Like the video
Subscribe to GIS DEV
Share with fellow GIS learners