Multi-level Photo Map

This multi-level map based image gallery makes it possible to show images related to their location. The first level indicates the location of the places where each one has a set of images, and the second level shows each single image and its location. Using Google Maps, we’ll have the location shown on the left side while the images of a location are shown on the right. The images can be viewed in medium size mode or in full lightbox-like mode. The map has a fullscreen option which will show the thumbnails of the images in their location.

This multi-level map based image gallery makes it possible to show images related to their location. The first level indicates the location of the places where each one has a set of images, and the second level shows each single image and its location. Using Google Maps, we’ll have the location shown on the left side while the images of a location are shown on the right. The images can be viewed in medium size mode or in full lightbox-like mode. The map has a fullscreen option which will show the thumbnails of the images in their location.

The images used in the demo are by Davidd. They are licensed under the Attribution 2.0 Generic (CC BY 2.0) License.

How it works

The locations for the images are saved in the album.xml file which has the following stucture:

<album>
	<name>Thailand 2011</name>
	<description>Some description</description>
	<places>
	...
	</places>
</album>

Inside of the places, we’ll have the information of each place with its name and location and all the single photos in that place:

<place>
	<name>Bangkok</name>		
	<location>
		<lat>13.696693336737654</lat>
		<lng>100.57159423828125</lng>
	</location>
	<photos>
		<photo>
			<thumb>photos/Bangkok/thumbs/1.jpg</thumb>
			<source>photos/Bangkok/1.jpg</source>
			<description>Some description</description>
			<location>
				<lat>13.710035342476681</lat>
				<lng>100.52043914794922</lng>
			</location>
		</photo>
		<photo>
			...
		</photo>
	</photos>
</place>

Besides the path to its thumbnail and the full image, every photo has a location in latitude and longitude as well.

Note, that we are using some PHP here in order to load and retrieve the XML data, so you’ll need a server environment to run this.

Initially, a map with all the places is shown:

In our example it is Bangkok, Phuket and Myeik. In the bar under the map and the preview area, we will have the name and the description of the whole album. In this stage we can already go fullscreen in order to see the full map with the places.

Back in the normal mode, when choosing a place, all the images of that place will show on the right side while we zoom the map in on the left side. As you can see, whenever you hover over a photo, you will see its location on the map and vice versa:

When clicking on a thumbnail or the camera icon on the map, we open the preview for the images, through which we can also navigate:

Clicking on the zoom icon of the preview image will open the large lightbox-like view of the full image:

When we are in the second level and open the fullscreen mode, we can see the thumbnails in the map:

Hope you find it useful, feedback is welcome!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 48

Comments are closed.
  1. Great job.

    One comment though… something that’s almost NEVER addressed in similar implementations: if you take multiple shots in the same location (same coordinates), how would you display them? Also, multiple items look like a messy black space when zoomed out. I wish you included clustering (for zoomed out views) and some sort of a tree display (for 100% zoomed in views with multiple items that have the same coordinates).

    Thanks.

    • Thank you all for your feedback @ACELOTE you need to set the map type id to “SATELLITE” : mapTypeId : google.maps.MapTypeId.SATELLITE

  2. This is fantastic stuff.

    I’m adding it to my personal site and was wondering if you could tell me how to have the map, on the initial page load, zoomed in more to a particular location instead of showing the whole Earth.

    In particular, this is the development page: http://screamingyellowzonker.com/dev/pbdotnet/photomap.html and I would like to show only northern Vermont and New Hampshire.

    Thank you

  3. This is really a good realisation, full of ideas and possibilities!

    I had to edit the js- and the php-file to change some basics, but that was just fun!

    Thanks, you guys at Codrops are really the best!

  4. @Acelote,

    change line 24 in mapalbum.js:

    this.mapOptions = { mapTypeId : google.maps.MapTypeId.SATELLITE,

  5. @Paul,

    try something like this:

    around line 76 in mapalbum.js:

    if (this.getZoom() > 15) // don’t allow a zoom factor > 15
    this.setZoom(12);

    I am not sure if this is correct, but it worked for me to change the zoom

  6. @Paul,

    just take out the data from Thailand and your start zoom will be ok, my previous tip is not necessary

  7. I’m working on building this at the moment as complete beginner. Really hoping I’m not out of my depth.

    I’ve coded in a few of my own photos/locations just to test, but how would I get this to subsist on my web page? Via a word press app?

  8. @DAN,

    normally you upload a html file to your server using FTP

    if you are using WordPress and nothing else, you cannot use that, you would need another way to integrate that
    if you use a theme which allows different page templates (like Suffusion f.e.), you can create a page-template and add the code thereinto

  9. Nice job Pedro!!!

    1 question though. I just downloaded the zip files from the tutorials because I want to try this out for my website. But when I open the index.html in Chrome I can see all the structure but nothing in the main 2 windows, where the maps are shown. I havent edited nothing in the file. Any suggestions? the DEMO example in the tutorial works fine

  10. Thanks for your quick response! I will try it and let you know. Greetings from Greece 🙂

  11. Is it possible to add a link within the tag for each photo? With the anchor it seems that it doesnt work.

  12. Hi, thanks for sharing this!! Have anyone removed or changed the ” : ” in the mp-label ? I mean the “:” that seperates name and description. I didn’t find in .js . Thanks in advance for your help!

  13. Never mind, i figured it out , in mapalbum.js find menu.setTitle( this.album + ‘:’ + this.description );
    , in + ‘:’ +, place whatever you want.

  14. Hi,
    This is wonderful software script…question for ya,?
    ‘is there a script or form to upload info into the program: and/or is there a db script to add info to and from db mysql?
    thanks,
    Photoman
    please email me if you do not post this to your site…thanks!

  15. There seems to be no end of awesome Google Map Apps.

    I already have a project in mind for this.

  16. awesome, and thank you for sharing!

    How can I make buttons for places(Phuket, Myeik, Bangkok) top of the map. So I can change quickly the place, see current place (by different style button) and do not miss a place.

    best regards,

  17. Hey Pedro, your script is exactly what I want. I downloaded it and uploaded to my server 1:1. Unfortunately, dosnt work. What can I do that your demo works on my server – needs special php parameters or other? Greetings from Germany

  18. hi, whereever i upload this too i end up getting a 404 error, any ideas? great idea and would love to use it

  19. Great appli, this feature is what I’m looking for. I want to use it but I’m behind a proxy. I can’t see the map. Could you help me ?

    thanx. Dom