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.
You can get the link to your image by clicking the “Share” button in Dropbox.
Create a link
Copy the created link
This link is for a Dropbox page that contains the image, rather than the raw image itself which Mango needs.
To access the raw image you must change the URL parameter at the end of the link.
This URL can now be used in Mango.
Google Drive offers direct file access in a similar way to Dropbox – it requires obtaining the image ID, then adding the ID to a specific URL. For details, please read this section on Google Drive.
Your own hosted files
Your own hosting account may give you direct access via URL:
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