Web mapping: Leaflet Introduction (Basemap, Markers, Circles,…)

Howdy!

Today I am going to talk a little bit about web mapping and show you a very powerful JavaScript Library called Leaflet that makes web mapping so easy and fun. We will create a base map using the Leaflet-Providers Extension and then I will show you how to add Markers and other overlay elements to the map.

Leaflet is a mobile friendly light weight JavaScript Library that is quite easy to use, even for unexperienced users with limited programming background. You can find more information, about Leaflet here.

1. Getting started

I personally prefer to work with the leaflet extension called “Leaflet-Providers“. This extension includes configurations for several Tile Layer Providers (basemaps). For further information see below, or visit this demo.

Step 1:

Download the Leaflet Providers Master File and copy the file leaflet-providers.js into the same directory as your webpage.

Download page: Leafleat Providers

Step 2:

Before we create our first map, we have to include the Leaflet Library to our webpage.

This is done by three simple lines of code. Copy this code between the <head></head> tags of your webpage:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="leaflet-providers.js"></script>

Step 3:
Create an empty div container where the map will be displayed later and specify a prefered height:

<div id="map"></div>
<style> #map { height: 500px; }  </style>

2. Create a basemap – Leaflet Providers Extension

We are ready to go. Lets create our first map! Every map usually has some kind of basemap as a background. With the Leaflet Providers Extension we can choose from a variety of basemaps (Tile Providers) while using very little code. You can see a whole list with all the providers here.

For my application I will use the Stamen.Toner Basemap:

<script> 
 //Create a new map and center the view at 49.18, 14.37 and set the zoom level to 7
 var map = L.map('map').setView([49.18, 14.37], 7);
            
 //Get background tileLayer (via leaflet-provider extension)
 L.tileLayer.provider('Stamen.Toner').addTo(map); 
</script>

The result will look like this: You can see Central Europe with its Capitals Prague, Vienna, Budapest,…

stamen toner basemap

Another basemap I really like is the MapQuestOpen.Aerial. Lets see how it looks like,… but this time we will zoom out a little. Change the code above to the following:

<script> 
 //set zoom to 3
 var map = L.map('map').setView([49.18, 14.37], 3);
            
 //change tile porvider to MapQuestOpen.Aerial
 L.tileLayer.provider('MapQuestOpen.Aerial').addTo(map);
</script>

The map will now look like this:

mapquest_basemap

I hope this showed you the strengths of the Leaflet-Providers Extension and how easy it is to change the basemap tile layer.

But enough with basemaps for now. Lets add some basic overlay elements to the map.

3. Add overlay elements:

In Leaflet its really easy to add overlay elements to a map. In this section I will show you how to add the following elements to a map:

Markers
Cricles
Polyogon

Markers:

Lets start with markers. The code is really simple: You basically create a new L.marker object called “marker” and specify the lat and long.

var marker = L.marker([48.5, 12.10]).addTo(map);

Circles:

To create a circle on the map, you have to do the following. Create a new L.circle object called “circle”, specify the lat and long of the center, the radius in meters and also for example the outline, fill color and opacity:

var circle = L.circle([48.5, 12.10], 500000, {
            color: 'orange',
            fillColor: 'orange',
            fillOpacity: 0.5
        }).addTo(map);

Polygons:

Polygons work the same way as the other elements above. This time you just have to specify all the edges of the polygon:

var polygon = L.polygon([
    [54.5, 12.10],
    [60.5, 12.10],
    [60.5, 18.10],
    [54.5, 18.10],
]).addTo(map);

The map should now look like this:

overlay elements leaflet map

The working example of the final map, can be found here: Final map Demo.

I hope this was useful to some of you.

Other tutorials on how to customize markes, add pop up windows and other interactions with the user, will follow soon.

Cheers

Martin

2 Comments

You can post comments in this post.

Hi Martin,
How you doing?
I have been working around your tutorials and I am having a hard time following through the steps ; likwe putting css codes , js codes in seperate files and linking them up to work.
do you have a more explicit way to do this?

roseline 6 years ago Reply

Hey! Leaflet has changed since the blogpost. I recommend using the official documentation of Leaflet.js:

http://leafletjs.com/examples.html

Martin 6 years ago Reply