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


View demo Download source
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!

View demo Download source

Previous:
Next:

Tagged with:

Related Articles

Feedback 47

Comments are closed.
  1. 2

    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,

  2. 4

    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

  3. 5

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

Comments are closed.