Adding Images to feature pop-up windows in Leaflet maps

Images, graphs and charts can be displayed within pop up displays in a leaflet map to enrich the information available to the end-user of the map.

 

First, we prepare the html webpage with a simple leaflet map and in the script section

we write the OnEachFeature function which assigns a bindPopup  to values in

the properties field –Name.

 

function onEachFeature(feature, layer){
if(feature.properties&&feature.properties.Name) {
layer.bindPopup(feature.properties.Name);}}

 

Then we create a variable object- Cities- and load the geojson point features and insert the <img/> image tags into the property- Name.

The contents of the pop up window for each feature is highlighted in red.

Note the image urls within the img tags

 

var Cities = [{
“type”: “Feature”,
“properties”: {
“Name”: “<h4 style=’color:red’;>Capital City of Abuja</h4><br>Country: Nigeria<br>

<img src=’http://mw2.google.com/mw-panoramio/photos/medium/39142614.jpg’ width=100 height=80 /><br>

The fast growing federal capital city of Africa most populous country.”
    },
“geometry”: {
“type”: “Point”,
“coordinates”: [7.00, 9.00]
}}, {
“type”: “Feature”,
“properties”: {
“Name”: “<h4 style=’color:red’;>City of Ibadan</h4><br>Country: Nigeria<br>

<img src=’http://mw2.google.com/mw-panoramio/photos/medium/11132871.jpg’ width=100 height=80 /><br>

The largest city in West africa in land area. An ancient city of note, once a military fortress.”
    },
“geometry”: {
“type”: “Point”,
“coordinates”: [3.50, 7.50]
}}];
var style = {
fillColor: “yellow”,
color: “red”
};

 

Then we use the pointToLayer function to return the default markers as circular markers

and add to the map. The onEachFeature in the code binds the popup contents to

their respective geojson feature.

 

L.geoJson(Cities, {onEachFeature,
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, style); }}
).addTo(map);

 

Click on the circular markers and the pop up displays the images.

See the example shown on the screenshots below.

Capture-f  Capture-g

 

See live map by clicking the link below:

http://htmlpreview.github.io/?https://github.com/mayotunde/geojson/blob/master/popupwithimages

Download the plain text version of the source code by clicking link below:

https://www.dropbox.com/s/zjajmaa53k5wodu/Adding%20image%20and%20charts%20to%20popup%20display-leaflet.txt?dl=0

See source code of the demo :

images.html - Notepad-001

 

Thank you for following the blog.

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