JavaScript • Leaflet.js • GeoJSON

Developing Interactive
Leaflet Maps

Web-based interactive mapping applications built with Leaflet.js, JavaScript, and HTML/CSS to visualize and explore geospatial datasets in the browser.

Aerial view of city streets and buildings

Overhead aerial view of an urban intersection in Seattle, USA. Photo by Zoshua Colah on Unsplash.

Overview

This project demonstrates the development of interactive web GIS applications using Leaflet.js — a lightweight, open-source JavaScript mapping library. The maps are designed to make geospatial data accessible and explorable for both technical and non-technical users, without requiring a desktop GIS environment.

The work draws on front-end GIS development experience at Agrilogic AI, where interactive Leaflet maps were built to visualize agricultural and geospatial datasets across multiple platforms.

Features

  • Layer Control: Users can toggle multiple thematic layers on and off, including vector overlays, raster tiles, and GeoJSON feature sets, using Leaflet's built-in layer control panel.
  • Custom Popups and Tooltips: Clicking on map features triggers popups displaying attribute data, historial data charts, and location information, all formatted for readability with HTML/CSS templates bound directly to GeoJSON properties.
  • Basemap Switching: OpenStreetMap, simple topographic maps, or satellite imagery, all to allow the user to focus on relevant data
  • Responsive Layout: The map interface is built with responsive HTML/CSS so it renders correctly across desktop and mobile screen sizes.

Technologies Used

  • JavaScript: Leaflet.js, and JS for data handling
  • HTML/CSS: Responsive page layout, custom popup styling
  • Data: AI Model outputs, and open-source historical crop yield data
  • Python (preprocessing): Converting large csv files to a GeoJSON, and GeoPandas, GDAL for additional analysis

Key Outcomes

The resulting applications allow non-GIS users to interact with spatial datasets directly in a browser, no software installation required. The GeoJSON-first approach keeps the front-end lightweight and portable, while the Python preprocessing pipeline ensures source data from various formats (shapefiles, CSV with coordinates, raster extracts) can be converted for web use.