Tutorial: Integrating an Interactive Map into a Website with Leaflet

Since the arrival of Google Maps in 2005, interactive maps have become commonplace on the web, almost turning into indispensable tools.

But since 2018 and the surge in prices for Google's Maps API, free and open-source alternatives have consolidated and now offer possibilities just as interesting.

LeafletJS

Leaflet is an open-source Javascript library for managing interactive maps.

Leaflet allows, among other things, to:

• Load different maps with different styles
• Draw areas (polygons, circles) on the map
• Add points of interest (pinpoints)
• Manage interactions (clicks) and display popups

Map providers

Be careful not to confuse Leaflet with a map provider. Leaflet is a library in charge of displaying and managing interactions with a map that is provided to it.

This confusion notably comes from the fact that Google's solution provides both the map and the display library.

These providers make Tiles available which correspond to images of an area of the world based on latitude, longitude, and zoom.

Some providers are free, like OpenStreet Map, others are paid but with free plans sufficient for most sites, like MapBox for example.

The advantage of paid providers is that they generally offer many map styles and even the possibility of customizing them.

Displaying a simple map

To display a map with Leaflet based on free OpenStreet Map data, just a few lines are needed, as in the example below:

<!-- index.html -->
<div id="mapid" style="width: 600px; height: 400px;"></div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<script type="text/javascript">
  var map = L.map('mapid').setView([51.505, -0.06], 20);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
</script>

To do this, simply create an HTML element that will contain the map, and include Leaflet's CSS and JS files.

Once the library is loaded, the L.map(...) method allows us to link the id of the previously created element, then load the map with the L.tileLayer(...) method by passing it a URL template!

In the URL template, we can see 4 variables:

• {s} which corresponds to the map style (here we use the default one)
• {x}, {y} and {z} correspond to the coordinates that will be injected by Leaflet each time the user moves the map

Note that it is mandatory to credit OpenStreet Map, even though the map is free.

Demo

Here is the result of the code above:

Integrating a map into a real project

In addition to the basic example presented just before, I've prepared a more advanced map example for you, with the possibility of using custom maps with MapBox and where the library is loaded with NPM and bundled with Vite.

This example project is available on Github at the following address: https://github.com/NicolasBrondin/basic-map-leaflet