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 works by embedding an image URL that contains a variable that matches a specific data attribute on your map layer. Every time the user click on a point with that data, Mango inserts the variable into the image URL and loads the correct image.

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 place to host your images, such a Dropbox account, or your own hosting platform that allows direct file access.

Dropbox

Dropbox is an easy to use hosting service with a generous 2GB of storage on their free plan. To use images on Dropbox in your map data you should place the images in your Dropbox public folder.

You can then get the 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

Your own hosted files

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

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

Shortlinks

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

https://db.tt/3BPe0NjS

Services that obfuscate filenames

Google Drive is unsuitable to host images for the popup, as it does not allow direct URL access to image files:

https://drive.google.com/file/d/0B2ji_BSRqjUKallGdmRXeWtsYXc

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

Embeding 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, .svg and animated .png are not recommended due to issues with support from older browsers.

Need more help with this?
✉ Email the Mango support team

Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.