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. @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

  2. @Paul,

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

  3. 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?

  4. @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

  5. 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

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

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

  8. 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!

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

  10. 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!

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

    I already have a project in mind for this.