Building Your First Interactive Map with Leaflet.js

Maps are one of the most powerful tools in our storytelling toolbox. They can illustrate  where an event happened, how resources are distributed across a city, and even plot  where your favorite coffee shops cluster in your neighborhood of interest. Maps allow readers to not just read stories–but explore them.

The good news: you don’t need to be a GIS expert to make an incredible map. With Leaflet.js, a free and lightweight JavaScript library, you can build an interactive map with just a few lines of code. (If you’re new to use code for mapping, you may want to check out our beginner’s guide to GeoJSON).

In this tutorial, we’ll create a simple map step by step: placing markers, styling them, and mapping multiple locations at once. At the end, we’ll also show how these same techniques can connect to practical, live, real-world data — like Boston’s MBTA train tracker.

 Pro tip: We’ll be writing our code in Visual Studio Code (VS Code), a free and widely used text editor. You can safely use it for HTML, CSS, JavaScript, and beyond. It’s reliable for beginners and professionals alike.

Here’s the magic behind connecting to MBTA’s real-time data:

1. API Endpoint: We use https://api-v3.mbta.com/vehicles which provides current positions of all trains
2. Fetch Request: JavaScript’s fetch() gets the latest data
3. Update Loop: setInterval() refreshes positions every 10 seconds
4. Dynamic Markers: Old markers are removed and new ones added with current positions
5. Visual Feedback: Each train shows as a colored dot matching its line color

Troubleshooting Guide

Common Issues and Solutions:

Blank page:

• Check that the #map div has height in your CSS
• Open browser console (F12) to check for errors
• Verify all file names match exactly

“L is not defined” error:

• Ensure Leaflet JS loads before your script.js
• Check that the CDN URLs are accessible

No trains appearing:

• MBTA trains don’t run 24/7 – try during Boston daytime hours
• Check browser console for API errors
• Some browsers block mixed content – ensure you’re using HTTPS

Tiles not loading:

• Check your internet connection
• Try a different tile provider like CartoDB:

L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png')

Where to Go Next

Now that you’ve built a live train tracker, consider these enhancements:

• Add station markers with arrival predictions
• Filter by line using layer controls
• Show train routes with polylines
• Add alerts for delays or service disruptions
• Create a dashboard with train counts and statistics
• Use WebSockets for truly real-time updates

The same pattern works for other transit APIs (NYC subway, Chicago CTA), bike-share systems, or any real-time location data.

Resources

• MBTA API Documentation
• Leaflet Documentation
• More transit APIs
• Example: Live MBTA Tracker

You’ve just built a real-time transit tracker! The same techniques can map anything from food trucks to earthquake data. What will you track next?

The post Building Your First Interactive Map with Leaflet.js first appeared on Storybench.