Leaflet.js : Adding Shapes to your map

If you are a map enthusiast, you might have already known about Leaflet.js. If not here's a brief introduction.

Leaflet.js is an open source Javascript library for building interactive maps. In the previous section, we have learned to build a basic map application. In this section we are going to focus on adding shapes like markers, polylines, polygons, circles, and popups to our map application.

Marker

Let's add a Marker to our application

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

We are adding a marker to a specific co-ordinates. You might have already noticed, these are the same values as we have added for our setView() method of our map class. This is how the map will look like after adding the marker.

Circle

Let's add a Circle. But before that let's look at the syntax.

var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: 'green',
    fillOpacity: 0.5,
    radius: 500,
}).addTo(map);

In essence, we are setting our circle on the specified co-ordinates with additional parameters like color, fillColor, fillOpacity and radius. These are like the CSS properties for our circle. You can play with these values as you wish. After adding the circle, our map will look like the following

Polygon

Let's add a Polygon

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);

This is how the map is gonna look like after adding a polygon

Popups

Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this.

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

Try Clicking on each of the shapes and each of the values we just set will be displayed.

That's it. You now know how to add Marker, Circle, Polygon and Popup on to your map application.