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.