Drawing point (markers) and line features to a leaflet map

In our earlier post, we demonstrated how to create a simple leaflet map in a webpage.

In this post, we will be showing how to draw markers and line features as vector layers on the leaflet map.

We create a variable object and load the marker

var marker = L.marker([lat, lon]);

we draw the marker on the leaflet map using :

var marker = L.marker([lat, lon]).addTo(map);

Example: We have the geographic coordinates for two spots- Spot and Spot2.

Load them into variable objects var marker.

This should come after the L.tilelayer in the script.


Var marker= L.marker([7.757, 3.758]).addTo(map);

Var marker=L.marker([7.770, 9.763]).addTo(map);




Next we add interactivity to the markers by binding popup displays to 

them using the marker.bindPopup(“”).openPopup.


Var marker= L.marker([7.757, 3.758]).addTo(map); marker.bindPopup(“Spot”). openPopup();

Var marker=L.marker([7.770, 9.763]).addTo(map);marker.bindPopup(“Spot2”).openPopup();





Next, we load a line feature into a variable object

var line =[[lat, lon], [lat, lon]……];

then draw onto the leaflet map using the generic

var object = L.polyline(‘line variable object’).addTo(map);

OR a shorter version

var line = L.polyline([[lat, lon], [lat, lon]…..]]).addTo(map)

.  In addition we load a style that will define the line feature.

See red boxed area on the screenshot


 Below is a screenshot illustrating the leaflet map with the polyline between the two markers.




Thank you for following the blog. You can send in your comments and feedback.


Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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