Introduction
This WebGIS visualizes travel reach using the Mapbox Isochrone API. Users select a transport mode and travel time to generate dynamic isochrone maps.
Built with Leaflet.js, Mapbox GL JS, and standard web technologies (HTML, CSS, JavaScript), it provides an interactive experience.
The system requests an isochrone polygon via API, processes the response in GeoJSON, and visualizes travel zones with adaptive color coding.
Project Setup
Designed for efficiency and flexibility, this project is built using:
Building the Map
Bringing the WebGIS to life starts with a simple map, a marker, and an API call. Follow these steps to create an interactive travel reach visualization.
1. Initialize the Map
Everything begins with a map. Centered at Alun-Alun Kutoarjo, this Leaflet-powered map lays the foundation.
var map = L.map('map').setView([-7.719891, 109.914573], 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
A clean, interactive canvas—ready for exploration.
2. Add a Marker for the Starting Point
A journey needs a starting point. The marker stands firm at the heart of Kutoarjo, waiting for user input.
var marker = L.marker([-7.719891, 109.914573]).addTo(map);
No dragging, no shifting—this is the reference for all calculations. Here why
3. Fetch Isochrone Data from Mapbox API
Now, the real magic happens. With a single request, Mapbox returns a polygon showing just how far one can travel in a given time.
async function getIsochrone(mode, minutes) {
let url = `https://api.mapbox.com/isochrone/v1/mapbox/${mode}/109.914573,-7.719891?contours_minutes=${minutes}&access_token=YOUR_MAPBOX_ACCESS_TOKEN`;
let response = await fetch(url);
let data = await response.json();
return data;
}
With this, distance transforms into data—structured, dynamic, and ready for visualization.
4. Display the Isochrone on the Map
A raw dataset is useful, but a visual representation makes it powerful. Here, the isochrone polygon takes shape, overlaying the map with smooth color-coded zones.
function displayIsochrone(geojsonData) {
L.geoJSON(geojsonData, {
style: function () {
return { color: "#007bff", weight: 2, fillOpacity: 0.4 };
}
}).addTo(map);
}
Just like that, travel reach appears—clear, structured, and interactive.
5. Handle User Selection
Walking or driving? 5 minutes or 30? The user decides, and the map responds instantly.
document.getElementById("generate").addEventListener("click", async function() {
let mode = document.getElementById("mode").value;
let minutes = document.getElementById("time").value;
let isochroneData = await getIsochrone(mode, minutes);
displayIsochrone(isochroneData);
});
A single click—and the world shifts. The isochrone updates, dynamically reflecting new choices.
Summary
This WebGIS project visualizes travel reachability using Mapbox Isochrone API and Leaflet.js. Centered at Alun-Alun Kutoarjo, users can select walking or driving modes and adjust travel time to see how far they can go. The map dynamically updates with an isochrone polygon, showing reachable areas in real-time. Built with HTML, CSS, JavaScript, and Flask, the project ensures an interactive and responsive experience. Designed for accessibility analysis, it helps users understand distance in time with a clear, visual approach.
Try the Live Building Map:
Live Demo
Happy mapping! 🗺️