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);

 

Capture-6

 

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

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

Example:

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();


Capture-7

 

 


Capture-2_thumb4


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


Capture-9

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

 

Capture-3_thumb

 

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

Advertisements

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