Everything I learned while building an interactive geospatial map using Leaflet.js, GeoJSON, and APIs

In a world increasingly driven by data, maps have become more than just tools for navigation—they're dynamic platforms for storytelling, analysis, and decision-making. Over the past few weeks, I embarked on a journey to build an interactive geospatial map.

This project combined the power of Leaflet.js for mapping, GeoJSON for spatial data, and APIs for real-time information. Along the way, I tackled technical challenges, discovered creative solutions, and gained insights into the limitless possibilities of geospatial technology.

Here, I’ll take you through everything I learned—step by step.

1. Collecting Locations of KUGE Batch 2020

Collecting the right data is very crucial. The google sheet was made and shared for location collection of all student. The sheet includes Name, Municipality, District, Province and Coordinates(Latitude, Longitude) of every student.

2. Converting data into GeoJSON Format

Once the location data is collected via Google Sheets and exported as a CSV, the next step is to convert it into a GeoJSON file. The conversion is made with the help of My GeoData Converter.

The other shapefiles of administrative boundries are also converted into GeoJSON format.

What is GeoJSON?

GeoJSON is a JSON-based format for encoding geographical data. It defines geometry types such as Point, LineString, and Polygon, along with properties that describe those geometries.

3. Developing the HTML File

The basis to build the interactive map, is an HTML file. In the HTML file we need to integrate the necessary libraries. The html format is followed as well as leaflet.js are included for mapping functionalities. I used VS Code.

4. Adding Base maps and Layers

The base map provides the foundational cartographic visualization for your map. I used Open Street Map and ArcGIS map.

To understand the functions and syntax, I read Leaflet Documentation. You can also refer Leaflet Documantation.

Now, To add layers to the map for visualizing location data, districts, municipalities, and other GeoJSON files.

5. Adding Layer Control

The layer control allows toggling between base maps and overlays.

To know more about organizing layers into base maps and overlays for easy toggling,You can also refer Leaflet Documantation.

 var baseLayer= {
            "OpenstreetMap":osm,
            "arcgismap":arcmap
            }

            var overlay = {
            "Location of student": locationLayer,
            "Province": provinceLayer,
            "District":districtLayer,
            "Municipalities":municipalitiesLayer
             }
             L.control.layers(baseLayer, overlay).addTo(map); 

            var layercontrol = L.control.layers(basemaps, overlay, {collapsed: false}).addTo(map);        

After completing these steps:

• The HTML file provides the structure for the interactive map.
• The basemap serves as a visual foundation.
• Layers display collected locations, districts, and municipalities.
• Layer controls allow toggling between maps and data.

5. Downloading Nearby Schools to the map and Adding them to the map.

To add schools near my location using OpenStreetMap (OSM) data, I used Overpass Turbo , a tool to query specific features (like schools) within a specified radius.

After downloading the data, the custom icon for school in PNG format was also downloaded.

The image below shows the nearby schools from my locations.

Things To keep in Mind:

All the necessary files should be kept in the same folder for the code to run.

Building Leaflet Map with Open Data APIs

Leaflet maps can pull and display data from various open data repositories using APIs. The map below shows an interactive map of Hawaii, colored by seismic hazard risk, along with locations of volcanoes and large hotels.

This map template pulls data from three different open repository sources:

• Locations of volcanoes are provided by USGS Volcano API
• Seismic hazard layer is pulled from an Esri/ArcGIS FeatureServer run by the US DHS as part of the Homeland Infrastructure Foundation-Level Data
• Hotels with at least 100 rooms are pulled from an Esri MapServer hosted by Hawaii Geospatial Data Portal

Technologies and Tools Used

• HTML/CSS/JavaScript: For building the user interface and functionality.
• Leaflet.js: For creating interactive maps and managing layers.
• OpenStreetMap (OSM): For basemaps and location data.
• GeoJSON: For spatial data representation.
• APIs: For fetching data.
• Tools: Overpass Turbo for querying OSM data.

Features

1. Interactive Map: Built using Leaflet.js with base maps from OpenStreetMap and layers for districts, municipalities, and specific points of interest.
2. Location Collection: Gather user data (e.g., locations, names) and visualize it on the map.
3. API Integration: Seismic Hazard, Volcano, and hotel data for specific locations.
4. Dynamic Popups: Display details like names, coordinates, weather conditions, and more upon clicking a marker.
5. Layer Control: Enable users to toggle between map layers and data sets.