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.
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 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:
Dropbox’s public folder allows you direct file access:
Your own hosted files
Your own hosting account may give you direct access via URL:
You cannot use short links that hide the variable in the URL:
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:
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.
This data includes the column “Name”, which contains US states. In Mango, this column is given the variable
URL of your image files
Replace the state name with the state name variable
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.
- 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