Display images in custom popups

Create dynamic popups that display unique images to help inform and engage map users, and provide a richer experience.

Mango’s Popup editor lets you display a hosted image based on attribute variables, creating dynamic popups that can help inform and engage map users, and provide a richer experience.

This can be achieved by including an attribute for an image URL in your dataset, and using that attribute in the custom popup editor. Every time the user click on a feature, the image will load in the popup.

Note: the method described in this article works well for datasets with a small number of records. If your data contains hundreds or thousands of records, we recommend using AWS to host your images, and programattically generating the attributes to include in your dataset.

Please see this tutorial on how to use AWS for hosting your images.

In this example, we’ll show you how to display flags of US states in the map popup.

Hosting Requirements

You will need a publicly accessible location to host your images, such a Dropbox account, or your own hosting platform that allows direct file access.

Using images hosted on Dropbox

Dropbox is an easy to use hosting service with a generous 2GB of storage on their free plan.

You can then get the unique link to the image by clicking the “Copy Public Link” button. This link gives you a link to a webpage that contains the image rather than the raw image itself which is required by Mango. To access the raw image you should append ?raw=1 to the end of the url. For example change:

https://dl.dropboxusercontent.com/u/your_user_id/dropbox-get-link-screenshot.png

To:

https://dl.dropboxusercontent.com/u/your_user_id/dropbox-get-link-screenshot.png?raw=1

Dropbox’s public folder allows you direct file access:

https://dl.dropboxusercontent.com/u/your_user_id/States/Flag_of_Alabama.png

 

Using images hosted on your own web server

Your own hosting account may give you direct access via URL:

http://www.mydomain.com/images/Flag_of_Alabama.png

Hosting services that will not work with Mango

Services that link to images with 'short URLs' or 'shortlinks'

You cannot use short links that hide the variable in the URL:

https://db.tt/3BPe0NjS

Services that obfuscate filenames

Google Drive is not suitable to host images for your popups, as it does not allow direct URL access to images.

Preparing your images

For the map to dynamically load your images, your filenames must include attribute variable that references the hosted image. If you use any other text in the file name, this must be consistent across all files you will be using.

In this example, the file names will include the state names, so we must ensure that the image filenames are consistent except for the variable.

The variable is not case-sensitive, but the variable must exactly match your data.

eg. This data includes the column “Name”, which contains US states. In Mango, this column is given the variable  {name}.

URL of your image files

https://dl.dropboxusercontent.com/u/your_account/States/Flag_of_Alabama.jpg

Replace the state name with the state name variable

https://dl.dropboxusercontent.com/u/your_account/States/Flag_of_{name}.jpg

Embedding Your Image

Once you’ve uploaded your images to your host or dropbox, you can embed the image to your popup. Open the Layers panel and edit the dataset you want the popup to appear in. Click on the Popup tab and click on the green Settings button.

Click on the image embed button.

In the popup customizer, paste your URL. It should look something like this:

Now, to make Mango load different images for each attribute, edit the filename to inlcude your variable:

Press Insert and return to the Custom Info Window. You will now see a placeholder where the image will appear.

Click save and you’re all done!

Now when users click on a data point in that state, the state flag will display in the map popup.

Please note:

• The variable is not case sensitive. Your image filename can use lowercase even if your data is capitalized or mixed case.
• The variable is “phrase sensitive”. If your variable has spaces, so too must your image filename.
  ie. for the attribute “District of Columbia”, your image filename must include the spaces: flag_of_district of columbia.jpg
• The popup supports .jpg, .gif, .png, even .svg. However, .svgand animated .png are not recommended due to issues with support from older browsers.