Plots the GPS data of photos on a map.
Switch branches/tags
Nothing to show
Clone or download
Maurice van Creij
Maurice van Creij Add license
Latest commit 0a327b9 Aug 1, 2018

photomap.js: Photo Map

Plots the GPS data of the photos in a slideshow on a map.

Try the demo.

How to include the script

The stylesheet is best included in the header of the document.

<link rel="stylesheet" href="./css/photomap.css"/>

This include can be added to the header or placed inline before the script is invoked.

<script src="./js/photomap.js"></script>

How to start the script

var photomap = new Photomap({
	'element' : document.getElementById('id'),
	'duration' : document.getElementById('duration'),
	//'tiles' : 'http://{s}{z}/{x}/{y}.png',
	//'tiles' : 'http://{s}{z}/{x}/{y}.png',
	//'tiles' : 'http://{s}{z}/{x}/{y}.png',
	//'tiles' : '{z}/{x}/{y}.png';
	'onlineTiles' : '{z}/{x}/{y}.png',
	'offlineTiles' : './tiles/{z}/{x}/{y}.png',
	'gpx' : './xml/cowan-taffyslookout-brooklyn.xml',
	'gpxData' : GpxData['cowan-taffyslookout-brooklyn'],
	'exif' : 'php/imageexif.php?src=../{src}',
	'exifData' : ExifData['cowan-taffyslookout-brooklyn'],
	'pointer' : './img/marker-location.png',
	'missing' : './img/missing.png',
	'credit' : 'Maps &copy; <a href="" target="_blank">4UMaps</a>, Data &copy; <a href="" target="_blank">OpenStreetMap</a> and contributors, CC BY-SA',
	'zoom' : 13,
	'minZoom' : 10,
	'maxZoom' : 15,
	'markers' : {
		'start' : {
			'icon' : './img/marker-train.png',
			'description' : 'Transport to this location: <a href=""></a>'
		'end' : {
			'icon' : './img/marker-train.png',
			'description' : 'Transport from this location: <a href=""></a>'
	'indicator' : {
		'icon' : './img/marker-photo.png',
		'description' : 'Photo taken at this location.'

id : {string} - The ID attribute of an element somewhere in the document.

duration : {DOM node} - The duration of the GPX log will be written to this HTML element.

onlineTiles : {URL} - The source of the map tiles when an internet connection is available.

offlineTiles : {path} - The source of the map tiles when no internet connection is available.

gpx : {path} - Path to a GPS log in GPX format.

gpxData : {json} - An optional cache of GPS data in the GeoJSON format.

exif : {URL} - Path to the web service used to read EXIF information from photos.

exifData : {json} - An optional cache of geolocation data taken from the EXIF information of the photos.

pointer : {image} - An image to use for indicating the current location.

missing : {image} - An image to substitute for unavailable map tiles.

credit : {string} - Copyright information for the map source.

zoom : {integer} - Starting zoom level of the map.

minZoom : {integer} - Lowest level of zoom for which tiles are available.

maxZoom : {integer} - Highest level of zoom for which tiles are available.

start : {integer} - The starting marker of of the GPS log.

icon : {string} - Path to an icon graphic for the indicator.

description : {string} - A description to pop up in a message balloon.

end : {integer} - The ending marker of of the GPS log.

indicator : {integer} - The marker used for indicating locations.

How to control the script


photomap.indicate(source, description);

Highlights and centres a specific location.

source : {string} - Path to an image containing EXIF information.

description : {string} - A description to pop up in a message balloon.

How to build the script

This project uses leaflet.js from

This project uses node.js from

This project uses gulp.js from

The following commands are available for development:

  • npm install - Installs the prerequisites.
  • gulp import - Re-imports libraries from supporting projects to ./src/libs/ if available under the same folder tree.
  • gulp dev - Builds the project for development purposes.
  • gulp dist - Builds the project for deployment purposes.
  • gulp watch - Continuously recompiles updated files during development sessions.
  • gulp serve - Serves the project on a temporary web server at http://localhost:8500/.
  • gulp php - Serves the project on a temporary php server at http://localhost:8500/.
  • node node_scripts/importexif.js - Imports EXIF data and creates a JSON cache file.
  • node node_scripts/importgpx.js - Imports GPS data and creates a JSON cache file.


This work is licensed under a Creative Commons Attribution 3.0 Unported License. The latest version of this and other scripts by the same author can be found at