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 th
MultiLevelPhotoMap

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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:

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

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,