Exploring Leaflet.js: Building Interactive Web Maps

3 min readJul 2, 2023

The popular and adaptable library Leaflet.js has become well-known in the field of web mapping. Leaflet.js enables developers to produce interactive and aesthetically pleasing maps for web applications thanks to its lightweight nature and rich feature set. We will delve into the world of Leaflet.js in this article, examining its salient features, showcasing its application through sample applications, and offering code snippets to help you along the way.

Getting Started with Leaflet.js

To begin working with Leaflet.js, you need to include the Leaflet library and its dependencies in your HTML file:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
  <div id="map" style="height: 400px;"></div>

  <script>
    // Your Leaflet code will go here
  </script>
</body>
</html>

Creating a Basic Map

Let’s start by creating a basic map centered on a specific location, with zoom and tile layers:

const map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; OpenStreetMap contributors',
}).addTo(map);

In the above code, we create a map instance and set its initial view coordinates. We then add a tile layer sourced from OpenStreetMap to render the map.

Adding Markers and Popups

Markers are a common way to represent points of interest on a map. Let’s add a marker with a popup to our map:

const marker = L.marker([51.5, -0.09]).addTo(map);

marker.bindPopup('Hello, Leaflet!').openPopup();

In the code snippet above, we create a marker and associate it with a specific latitude and longitude. We then bind a popup to the marker with a custom message and open it by default.

Handling User Interaction

Leaflet.js provides various methods to handle user interaction with the map. Let’s explore a few examples:

Adding Click Events:

function onMapClick(e) {
  alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

In the above code, we define a function that displays an alert with the clicked coordinates. We then attach the function to the map’s ‘click’ event.

Handling Dragging:

map.on('dragstart', function () {
  console.log('Map dragging started');
});

map.on('dragend', function () {
  console.log('Map dragging ended');
});

In this snippet, we listen for the ‘dragstart’ and ‘dragend’ events and log messages to the console accordingly.

Creating Interactive Applications

Let’s explore two interactive applications using Leaflet.js: a route planner and a heat map.

Route Planner:

const routeMap = L.map('routeMap').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; OpenStreetMap contributors',
}).addTo(routeMap);

const routeControl = L.Routing.control({
  waypoints: [
    L.latLng(51.5, -0.09),
    L.latLng(51.51, -0.1)
  ],
  routeWhileDragging: true
}).addTo(routeMap);

In the above example, we create a separate map instance for the route planner. We add a tile layer and then create a routing control with two waypoints. The route is displayed on the map, and users can interactively modify the waypoints.

Heat Map:

const heatMap = L.map('heatMap').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; OpenStreetMap contributors',
}).addTo(heatMap);

const heatData = [
  [51.5, -0.09, 0.2],
  [51.51, -0.1, 0.5],
  // Additional data points...
];

const heatLayer = L.heatLayer(heatData, {
  radius: 25,
  blur: 15,
}).addTo(heatMap);

In this example, we create a map for the heat map visualization. We add a tile layer and then define an array of data points, each with latitude, longitude, and intensity. We use the Leaflet.heat plugin to generate a heat map layer based on the data.

Conclusion

A strong and adaptable tool for creating interactive web maps is Leaflet.js. Creating maps, adding markers and popups, handling user interaction, and building interactive applications like a route planner and a heat map were all topics covered in this article’s overview of Leaflet.js’s fundamentals. With its simple API and wide range of plugins, Leaflet.js offers countless opportunities for developing captivating and interesting web mapping experiences.

Exploring Leaflet.js: Building Interactive Web Maps

Written by Ömür Bilgili

No responses yet