Logo preload
close Logo

Using Leaflet for Interactive Web Mapping

August 14, 2020

Before I started working for Spatial Networks, the only experience I had with maps on the web was with Google Maps. The only time I used it was for looking up an address and displaying a small map centered on that address.

Since then, online maps have come a long way. There are several javascript libraries available for displaying maps, including Leaflet, which stands out as probably one of the best interactive mapping libraries available.

What is Leaflet?

Leaflet Logo

Leaflet is an open-source, easy-to-use Javascript library for generating user-friendly interactive maps. Leaflet was developed by Cloudmade. You can find the leaflet source hosted on GitHub.

Getting Started With Leaflet

In order to use Leaflet, you need to include the Leaflet CSS and Javascript on your page:

<link rel=”stylesheet” href=”http://cdn.leafletjs.com/leaflet-0.4/leaflet.css” />
<!–[if lte IE 8]>
<link rel=”stylesheet” href=”http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css” />
<![endif]–>

Next, you will need to create an element on your page to contain the map.

<div id=”map”></div>

Leaflet requires that your map container have a set height, so set this in your CSS.

div#map {
height: 200px;
}

Now that you have everything setup, it is time to initialize your map.

Here we initialize a new map with the id of our map container and set the view to the coordinates near the U.S. Capitol, Washington D.C., with a zoom-level of 16.

var map = L.map(‘map’).setView([38.88941, -77.00639], 16);

Next, we should setup a tile layer. In this example, we will be using OpenStreetMap tiles. You will also want to include attribution to the source of your tiles.

L.tileLayer(‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {
subdomains: ‘abc’,
attribution: ‘&lt;a href=”http://creativecommons.org/licenses/by-sa/2.0/” target=”_blank”&gt;CC-BY-SA&lt;/a&gt; 2012 &lt;a href=”http://openstreetmap.org” target=”_blank”&gt;OpenStreetMap.org&lt;/a&gt; contributors’,
maxZoom: 18
}).addTo(map);

Lastly, Save this page and load it in your browser. If you’ve done everything correctly, you should see a map centered near the U.S. Capitol Building, Washington, D.C.

Map of Washington DC

Markers, Circles and Polygons, oh my!

Now that we have a map, we can start to add things to the map to make it more interesting.

A Marker indicates the location of a point of interest on the map. Let’s add a marker to indicate the location of the U.S. Capitol Building:

var capitol_marker = L.marker([38.8897, -77.0089]).addTo(map);

Add Point To Map

Let’s add another some more for the Library of Congress and the Supreme Court buildings:

var lib_of_congress_marker = L.marker([38.886839, -77.004743]).addTo(map);
var supreme_court_marker = L.marker([38.890609, -77.004472]).addTo(map);

Add Second Point To Map

Circles are added the same way as markers, however, you can specify a radius in meters, along with other options such as color, fill color and opacity.

var circle = L.circle([38.88941, -77.00639], 300, {
color: ‘#ffcc00’,
fillColor: ‘#ffcc99’,
fillOpacity: 0.5
}).addTo(map);

Add Circle

To add a polygon, just provide an array of lat/longs, and let Leaflet do the rest.

var polygon = L.polygon([
[38.8897, -77.0089],
[38.88862, -77.00442],
[38.890358, -77.00464] ]).addTo(map);</pre>

Add Polygon To Leaflet

Popups

Popups are used to add additional information to an item on a map, such as a marker.

capitol_marker.bindPopup(‘U.S. Capitol Building’);
lib_of_congress_marker.bindPopup(‘U.S. Library of Congress’);
supreme_court_marker.bindPopup(‘U.S. Supreme Court’);

Add Pop Up To Leaflet

Events

Events allow you do something when a user interacts with a map, such as clicking, zooming, etc. You can create a function and bind it to an event. When a user triggers the event, the function is called. The example below will display a popup containing the latitude and longitude when the user clicks the map.

var map_popup = L.popup();
function showCoordinatesPopup(e) {
map_popup.setLatLng(e.latlng).setContent(e.latlng.toString()).openOn(map);
}
map.on(‘click’, showCoordinatesPopup);
circle.on(‘click’, showCoordinatesPopup);
polygon.on(‘click’, showCoordinatesPopup);

In the above example, we also used a different method to create a popup.

Create Event

Conclusion

The above examples only touch the surface of Leaflet and what it has to offer. The API documentation is very robust and easy to follow. With a just a few minutes of reading, you can easily integrate maps into your site or application. Look for additional installments on Leaflet in the coming weeks as i go into more detail about the features and functions offered by this open-source JavaScript library for interactive maps.

Do you use Leaflet or plan on using Leaflet? Feel free to share your experiences below.