Adding Map scale and North Arrow to a Leaflet powered map

This post will demonstrate how to add a North Arrow and map scale to a leaflet powered map.



– Add the Leaflet L.scale control to add a map scale.




For the North arrow, we got a png image from the internet and using image

tag to add it as an inner div element on the map.Leaflet L.control to position

the image within the canvas of the web map.


var north = L.control({position: “topright”});
north.onAdd = function(map) {
var div = L.DomUtil.create(“div”, “info legend”);
div.innerHTML = ‘<img src=”” width=50 height=50 />’;
return div;


Screenshot of example with North arrow(red boxed in upper right corner of the screenshot)

and scale bar in the lower left corner of the screenshot.



See live map by clicking:


Download the plain text version of the source code here-


Source code below:

Thank you for following the blog.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s