| 3 minute read |

Updated December 2017.

Ever wanted to display photos in a popup of your map data? Well, follow this simple tutorial to find out how!

1. The Data

First of all, we have a list of fictitious buildings, in the town of Brezoi, Transylvanian Alps, Romania:

ID, Lat, Lon, Photo
1, 45.341097, 24.239515, Castle_Neuschwanstein.jpg
2, 45.347076, 24.230672, Cathedral.jpg
3, 45.351737, 24.24288, Grand_Hotel.jpg
4, 45.341299, 24.249993, Post_Office.jpg
5, 45.335725, 24.24956, Power_Station.jpg
6, 45.344745, 24.243648, Train_Station.jpg
7, 45.346468, 24.238073, Trinity_Academy.jpg

Notice that we have Lat/Lon coordinates, and an image file name for each building.

 

2. Hosting the Images

Next, we need to upload our photos to a file hosting site that will allow us to access the photos with a unique URL.

For this tutorial, we’re using Dropbox, which offers 2Gb of free storage.

In Dropbox, create a folder in your Public folder and add your photos to it.

Note: Only Dropbox users who created their account before 2012 have a Public folder. All accounts created after Dropbox removed the Public folder function will need to host images elsewhere, ensuring the host allows direct, unhashed file access.

Note

Dropbox has retired its Public Folder, but a direct, permanent image URL can still be accessed from a file in any folder in your Dropbox account using the instructions below.

3. Grab the photo URLs

Get the URL to each photo. There are two ways to do this:

– On desktop, navigate to your dropbox folder and right click a photo and choose “Copy Dropbox Link”

– On the Dropbox website, click the “Share” button to the right of the photo, and select “Copy Link”

These URLs are permanent, and from our testing, will remain the same even if the image is moved into a different folder.

4. Add the URL to your data

Create a new column in your data table called “URL” and paste the image URL for each location in the corresponding row.

5. Do some magic

Next, we need to modify the URL to give Mango direct access to the file by changing this end part of the URL from:

…/Trinity_Academy.JPG?dl=0

to

…/Trinity_Academy.JPG?raw=1

Repeat the process for all records in your table.

6. Export to CSV

Finally, save as .CSV and upload to your Mango account. Add the data to a map, then click on a point to see the result. Hey presto!

Want to try this for yourself with some practice data? You can download the data and photos here:

Download Data Download Photos

Don’t forget to sign  up for your free 30 day trial of Mango’s Enterprise plan, and start making amazing interactive web maps.

 

Remember that your map users might be on slow internet connections or on a mobile device with a data plan that cost slightly more than their mortgage. Wherever possible, optimize your images to have the best quality with the smallest possible file size so your map and images load quickly.