Merge pull request #450 from saimn/map

Add map for all themes

sigal/settings.py

@@ -53,6 +53,7 @@ _DEFAULT_CONFIG = {
     'locale': '',
     'make_thumbs': True,
     'max_img_pixels': None,
+    'map_height': '500px',
     'medias_sort_attr': 'filename',
     'medias_sort_reverse': False,
     'mp4_options': ['-crf', '23', '-strict', '-2'],

sigal/templates/sigal.conf.py

@@ -60,6 +60,7 @@ img_size = (800, 600)
 # https://github.com/leaflet-extras/leaflet-providers#providers)
 # show_map = False
 # leaflet_provider = 'OpenStreetMap.Mapnik'
+# map_height = '500px'
 
 # File extensions that should be treated as images
 # img_extensions = ['.jpg', '.jpeg', '.png', '.gif']

sigal/themes/colorbox/templates/album.html

@@ -14,6 +14,7 @@
     {% endif %}
   {%- endmacro %}
 
+  {% include 'map.html' %}
   <div id="gallery">
     {% for media in album.medias %}
       {% if loop.index % nb_columns == 1 %}
@@ -60,20 +61,7 @@
     {% endfor %}
   </div>
 
-  {% if album.zip %}
-    {% if album.settings['zip_media_format'] == "orig" %}
-      <div id="additionnal-infos" class="row">
-        <p><a href="{{ album.zip }}"
-              title="Download a zip archive with all images original size">Download ZIP with original files</a></p>
-      </div>
-    {% else %}
-      <div id="additionnal-infos" class="row">
-        <p><a href="{{ album.zip }}"
-              title="Download a zip archive with all images">Download ZIP</a></p>
-      </div>
-    {% endif %}
-  {% endif %}
-
+  {% include 'download_zip.html' %}
 {% endblock %}
 
 {% block footer %}

sigal/themes/colorbox/templates/base.html

@@ -14,6 +14,7 @@
     {% if user_css %}
     <link rel="stylesheet" href="{{ theme.url }}/{{ user_css }}">
     {% endif %}
+    {% include 'default_head.html' %}
     {% block extra_head %}{% endblock extra_head %}
     {% include 'analytics.html' %}
   </head>

sigal/themes/default/static/leaflet/Control.FullScreen.css

@@ -0,0 +1,8 @@
+.fullscreen-icon { background-image: url(icon-fullscreen.png); }
+.leaflet-retina .fullscreen-icon { background-image: url(icon-fullscreen-2x.png); background-size: 26px 26px; }
+/* one selector per rule as explained here : http://www.sitepoint.com/html5-full-screen-api/ */
+.leaflet-container:-webkit-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
+.leaflet-container:-ms-fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; }
+.leaflet-container:full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
+.leaflet-container:fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; }
+.leaflet-pseudo-fullscreen { position: fixed !important; width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; z-index: 99999; }

sigal/themes/default/static/leaflet/Control.FullScreen.js

@@ -0,0 +1,335 @@
+(function (root, factory) {
+	if (typeof define === 'function' && define.amd) {
+		// AMD. Register as an anonymous module.
+		define(['leaflet'], factory);
+	} else if (typeof modules === 'object' && module.exports) {
+		// define a Common JS module that relies on 'leaflet'
+		module.exports = factory(require('leaflet'));
+	} else {
+		// Assume Leaflet is loaded into global object L already
+		factory(L);
+	}
+}(this, function (L) {
+	'use strict';
+
+	L.Control.FullScreen = L.Control.extend({
+		options: {
+			position: 'topleft',
+			title: 'Full Screen',
+			titleCancel: 'Exit Full Screen',
+			forceSeparateButton: false,
+			forcePseudoFullscreen: false,
+			fullscreenElement: false
+		},
+		
+		onAdd: function (map) {
+			var className = 'leaflet-control-zoom-fullscreen', container, content = '';
+			
+			if (map.zoomControl && !this.options.forceSeparateButton) {
+				container = map.zoomControl._container;
+			} else {
+				container = L.DomUtil.create('div', 'leaflet-bar');
+			}
+			
+			if (this.options.content) {
+				content = this.options.content;
+			} else {
+				className += ' fullscreen-icon';
+			}
+
+			this._createButton(this.options.title, className, content, container, this.toggleFullScreen, this);
+			this._map.fullscreenControl = this;
+
+			this._map.on('enterFullscreen exitFullscreen', this._toggleTitle, this);
+
+			return container;
+		},
+		
+		onRemove: function (map) {
+			L.DomEvent
+				.off(this.link, 'click', L.DomEvent.stopPropagation)
+				.off(this.link, 'click', L.DomEvent.preventDefault)
+				.off(this.link, 'click', this.toggleFullScreen, this);
+			
+			L.DomEvent
+				.off(this._container, screenfull.raw.fullscreenchange, L.DomEvent.stopPropagation)
+				.off(this._container, screenfull.raw.fullscreenchange, L.DomEvent.preventDefault)
+				.off(this._container, screenfull.raw.fullscreenchange, this._handleFullscreenChange, this);
+			
+			L.DomEvent
+				.off(document, screenfull.raw.fullscreenchange, L.DomEvent.stopPropagation)
+				.off(document, screenfull.raw.fullscreenchange, L.DomEvent.preventDefault)
+				.off(document, screenfull.raw.fullscreenchange, this._handleFullscreenChange, this);
+		},
+		
+		_createButton: function (title, className, content, container, fn, context) {
+			this.link = L.DomUtil.create('a', className, container);
+			this.link.href = '#';
+			this.link.title = title;
+			this.link.innerHTML = content;
+
+			this.link.setAttribute('role', 'button');
+			this.link.setAttribute('aria-label', title);
+
+			L.DomEvent
+				.on(this.link, 'click', L.DomEvent.stopPropagation)
+				.on(this.link, 'click', L.DomEvent.preventDefault)
+				.on(this.link, 'click', fn, context);
+			
+			L.DomEvent
+				.on(container, screenfull.raw.fullscreenchange, L.DomEvent.stopPropagation)
+				.on(container, screenfull.raw.fullscreenchange, L.DomEvent.preventDefault)
+				.on(container, screenfull.raw.fullscreenchange, this._handleFullscreenChange, context);
+			
+			L.DomEvent
+				.on(document, screenfull.raw.fullscreenchange, L.DomEvent.stopPropagation)
+				.on(document, screenfull.raw.fullscreenchange, L.DomEvent.preventDefault)
+				.on(document, screenfull.raw.fullscreenchange, this._handleFullscreenChange, context);
+
+			return this.link;
+		},
+		
+		toggleFullScreen: function () {
+			var map = this._map;
+			map._exitFired = false;
+			if (map._isFullscreen) {
+				if (screenfull.isEnabled && !this.options.forcePseudoFullscreen) {
+					screenfull.exit();
+				} else {
+					L.DomUtil.removeClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen');
+					map.invalidateSize();
+				}
+				map.fire('exitFullscreen');
+				map._exitFired = true;
+				map._isFullscreen = false;
+			}
+			else {
+				if (screenfull.isEnabled && !this.options.forcePseudoFullscreen) {
+					screenfull.request(this.options.fullscreenElement ? this.options.fullscreenElement : map._container);
+				} else {
+					L.DomUtil.addClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen');
+					map.invalidateSize();
+				}
+				map.fire('enterFullscreen');
+				map._isFullscreen = true;
+			}
+		},
+		
+		_toggleTitle: function () {
+			this.link.title = this._map._isFullscreen ? this.options.title : this.options.titleCancel;
+		},
+		
+		_handleFullscreenChange: function () {
+			var map = this._map;
+			map.invalidateSize();
+			if (!screenfull.isFullscreen && !map._exitFired) {
+				map.fire('exitFullscreen');
+				map._exitFired = true;
+				map._isFullscreen = false;
+			}
+		}
+	});
+
+	L.Map.include({
+		toggleFullscreen: function () {
+			this.fullscreenControl.toggleFullScreen();
+		}
+	});
+
+	L.Map.addInitHook(function () {
+		if (this.options.fullscreenControl) {
+			this.addControl(L.control.fullscreen(this.options.fullscreenControlOptions));
+		}
+	});
+
+	L.control.fullscreen = function (options) {
+		return new L.Control.FullScreen(options);
+	};
+
+  return L;
+}));
+
+/*!
+* screenfull
+* v5.1.0 - 2020-12-24
+* (c) Sindre Sorhus; MIT License
+*/
+(function () {
+	'use strict';
+
+	var document = typeof window !== 'undefined' && typeof window.document !== 'undefined' ? window.document : {};
+	var isCommonjs = typeof module !== 'undefined' && module.exports;
+
+	var fn = (function () {
+		var val;
+
+		var fnMap = [
+			[
+				'requestFullscreen',
+				'exitFullscreen',
+				'fullscreenElement',
+				'fullscreenEnabled',
+				'fullscreenchange',
+				'fullscreenerror'
+			],
+			// New WebKit
+			[
+				'webkitRequestFullscreen',
+				'webkitExitFullscreen',
+				'webkitFullscreenElement',
+				'webkitFullscreenEnabled',
+				'webkitfullscreenchange',
+				'webkitfullscreenerror'
+
+			],
+			// Old WebKit
+			[
+				'webkitRequestFullScreen',
+				'webkitCancelFullScreen',
+				'webkitCurrentFullScreenElement',
+				'webkitCancelFullScreen',
+				'webkitfullscreenchange',
+				'webkitfullscreenerror'
+
+			],
+			[
+				'mozRequestFullScreen',
+				'mozCancelFullScreen',
+				'mozFullScreenElement',
+				'mozFullScreenEnabled',
+				'mozfullscreenchange',
+				'mozfullscreenerror'
+			],
+			[
+				'msRequestFullscreen',
+				'msExitFullscreen',
+				'msFullscreenElement',
+				'msFullscreenEnabled',
+				'MSFullscreenChange',
+				'MSFullscreenError'
+			]
+		];
+
+		var i = 0;
+		var l = fnMap.length;
+		var ret = {};
+
+		for (; i < l; i++) {
+			val = fnMap[i];
+			if (val && val[1] in document) {
+				for (i = 0; i < val.length; i++) {
+					ret[fnMap[0][i]] = val[i];
+				}
+				return ret;
+			}
+		}
+
+		return false;
+	})();
+
+	var eventNameMap = {
+		change: fn.fullscreenchange,
+		error: fn.fullscreenerror
+	};
+
+	var screenfull = {
+		request: function (element, options) {
+			return new Promise(function (resolve, reject) {
+				var onFullScreenEntered = function () {
+					this.off('change', onFullScreenEntered);
+					resolve();
+				}.bind(this);
+
+				this.on('change', onFullScreenEntered);
+
+				element = element || document.documentElement;
+
+				var returnPromise = element[fn.requestFullscreen](options);
+
+				if (returnPromise instanceof Promise) {
+					returnPromise.then(onFullScreenEntered).catch(reject);
+				}
+			}.bind(this));
+		},
+		exit: function () {
+			return new Promise(function (resolve, reject) {
+				if (!this.isFullscreen) {
+					resolve();
+					return;
+				}
+
+				var onFullScreenExit = function () {
+					this.off('change', onFullScreenExit);
+					resolve();
+				}.bind(this);
+
+				this.on('change', onFullScreenExit);
+
+				var returnPromise = document[fn.exitFullscreen]();
+
+				if (returnPromise instanceof Promise) {
+					returnPromise.then(onFullScreenExit).catch(reject);
+				}
+			}.bind(this));
+		},
+		toggle: function (element, options) {
+			return this.isFullscreen ? this.exit() : this.request(element, options);
+		},
+		onchange: function (callback) {
+			this.on('change', callback);
+		},
+		onerror: function (callback) {
+			this.on('error', callback);
+		},
+		on: function (event, callback) {
+			var eventName = eventNameMap[event];
+			if (eventName) {
+				document.addEventListener(eventName, callback, false);
+			}
+		},
+		off: function (event, callback) {
+			var eventName = eventNameMap[event];
+			if (eventName) {
+				document.removeEventListener(eventName, callback, false);
+			}
+		},
+		raw: fn
+	};
+
+	if (!fn) {
+		if (isCommonjs) {
+			module.exports = {isEnabled: false};
+		} else {
+			window.screenfull = {isEnabled: false};
+		}
+
+		return;
+	}
+
+	Object.defineProperties(screenfull, {
+		isFullscreen: {
+			get: function () {
+				return Boolean(document[fn.fullscreenElement]);
+			}
+		},
+		element: {
+			enumerable: true,
+			get: function () {
+				return document[fn.fullscreenElement];
+			}
+		},
+		isEnabled: {
+			enumerable: true,
+			get: function () {
+				// Coerce to boolean in case of old WebKit
+				return Boolean(document[fn.fullscreenEnabled]);
+			}
+		}
+	});
+
+	if (isCommonjs) {
+		module.exports = screenfull;
+	} else {
+		window.screenfull = screenfull;
+	}
+})();

sigal/themes/default/static/leaflet/Leaflet.Photo.css

@@ -0,0 +1,27 @@
+.leaflet-marker-photo { 
+	border: 2px solid #fff; 
+	box-shadow: 3px 3px 10px #888; 
+}	
+
+.leaflet-marker-photo div { 
+    width: 100%;  
+    height: 100%;
+    background-size: cover;    
+    background-position: center center;
+    background-repeat: no-repeat;
+}	
+
+.leaflet-marker-photo b {
+	position: absolute;
+	top: -7px;
+	right: -11px;
+	color: #555;
+	background-color: #fff;
+	border-radius: 8px;
+	height: 12px;
+	min-width: 12px;
+	line-height: 12px;
+	text-align: center;
+	padding: 3px;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+}

sigal/themes/default/static/leaflet/Leaflet.Photo.js

@@ -0,0 +1,83 @@
+L.Photo = L.FeatureGroup.extend({
+	options: {
+		icon: {						
+			iconSize: [40, 40]
+		}
+	},
+
+	initialize: function (photos, options) {
+		L.setOptions(this, options);
+		L.FeatureGroup.prototype.initialize.call(this, photos);
+	},
+
+	addLayers: function (photos) {
+		if (photos) {
+			for (var i = 0, len = photos.length; i < len; i++) {
+				this.addLayer(photos[i]);
+			}
+		}
+		return this;
+	},
+
+	addLayer: function (photo) {	
+		L.FeatureGroup.prototype.addLayer.call(this, this.createMarker(photo));
+	},
+
+	createMarker: function (photo) {
+		var marker = L.marker(photo, {
+			icon: L.divIcon(L.extend({
+				html: '<div style="background-image: url(' + photo.thumbnail + ');"></div>​',
+				className: 'leaflet-marker-photo'
+			}, photo, this.options.icon)),
+			title: photo.caption || ''
+		});		
+		marker.photo = photo;
+		return marker;
+	}
+});
+
+L.photo = function (photos, options) {
+	return new L.Photo(photos, options);
+};
+
+if (L.MarkerClusterGroup) {
+
+	L.Photo.Cluster = L.MarkerClusterGroup.extend({
+		options: {
+			featureGroup: L.photo,		
+			maxClusterRadius: 100,		
+			showCoverageOnHover: false,
+			iconCreateFunction: function(cluster) {
+				return new L.DivIcon(L.extend({
+					className: 'leaflet-marker-photo', 
+					html: '<div style="background-image: url(' + cluster.getAllChildMarkers()[0].photo.thumbnail + ');"></div>​<b>' + cluster.getChildCount() + '</b>'
+				}, this.icon));
+		   	},	
+			icon: {						
+				iconSize: [40, 40]
+			}		   		
+		},
+
+		initialize: function (options) {	
+			options = L.Util.setOptions(this, options);
+			L.MarkerClusterGroup.prototype.initialize.call(this);
+			this._photos = options.featureGroup(null, options);
+		},
+
+		add: function (photos) {
+			this.addLayer(this._photos.addLayers(photos));
+			return this;
+		},
+
+		clear: function () {
+			this._photos.clearLayers();
+			this.clearLayers();
+		}
+
+	});
+
+	L.photo.cluster = function (options) {
+		return new L.Photo.Cluster(options);	
+	};
+
+}

sigal/themes/default/static/leaflet/MarkerCluster.Default.css

@@ -0,0 +1,60 @@
+.marker-cluster-small {
+	background-color: rgba(181, 226, 140, 0.6);
+	}
+.marker-cluster-small div {
+	background-color: rgba(110, 204, 57, 0.6);
+	}
+
+.marker-cluster-medium {
+	background-color: rgba(241, 211, 87, 0.6);
+	}
+.marker-cluster-medium div {
+	background-color: rgba(240, 194, 12, 0.6);
+	}
+
+.marker-cluster-large {
+	background-color: rgba(253, 156, 115, 0.6);
+	}
+.marker-cluster-large div {
+	background-color: rgba(241, 128, 23, 0.6);
+	}
+
+	/* IE 6-8 fallback colors */
+.leaflet-oldie .marker-cluster-small {
+	background-color: rgb(181, 226, 140);
+	}
+.leaflet-oldie .marker-cluster-small div {
+	background-color: rgb(110, 204, 57);
+	}
+
+.leaflet-oldie .marker-cluster-medium {
+	background-color: rgb(241, 211, 87);
+	}
+.leaflet-oldie .marker-cluster-medium div {
+	background-color: rgb(240, 194, 12);
+	}
+
+.leaflet-oldie .marker-cluster-large {
+	background-color: rgb(253, 156, 115);
+	}
+.leaflet-oldie .marker-cluster-large div {
+	background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+	}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+.marker-cluster span {
+	line-height: 30px;
+	}

sigal/themes/default/static/leaflet/MarkerCluster.css

@@ -0,0 +1,14 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}

sigal/themes/default/static/leaflet/README

@@ -0,0 +1,5 @@
+plugins:
+https://github.com/leaflet-extras/leaflet-providers
+https://github.com/brunob/leaflet.fullscreen
+https://github.com/Leaflet/Leaflet.markercluster (for Leaflet.Photo)
+https://github.com/turban/Leaflet.Photo

sigal/themes/default/static/leaflet/leaflet-providers.js

@@ -50,26 +50,13 @@
 				};
 			}
 
-			// If retina option is set
-			if (provider.options.retina) {
-				// Check retina screen
-				if (options.detectRetina && L.Browser.retina) {
-					// The retina option will be active now
-					// But we need to prevent Leaflet retina mode
-					options.detectRetina = false;
-				} else {
-					// No retina, remove option
-					provider.options.retina = '';
-				}
-			}
-
 			// replace attribution placeholders with their values from toplevel provider attribution,
 			// recursively
 			var attributionReplacer = function (attr) {
 				if (attr.indexOf('{attribution.') === -1) {
 					return attr;
 				}
-				return attr.replace(/\{attribution.(\w*)\}/,
+				return attr.replace(/\{attribution.(\w*)\}/g,
 					function (match, attributionName) {
 						return attributionReplacer(providers[attributionName].options.attribution);
 					}
@@ -94,37 +81,41 @@
 			options: {
 				maxZoom: 19,
 				attribution:
-					'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+					'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 			},
 			variants: {
 				Mapnik: {},
-				BlackAndWhite: {
-					url: 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
-					options: {
-						maxZoom: 18
-					}
-				},
 				DE: {
 					url: 'https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
 					options: {
 						maxZoom: 18
 					}
 				},
+				CH: {
+					url: 'https://tile.osm.ch/switzerland/{z}/{x}/{y}.png',
+					options: {
+						maxZoom: 18,
+						bounds: [[45, 5], [48, 11]]
+					}
+				},
 				France: {
 					url: 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
 					options: {
 						maxZoom: 20,
-						attribution: '&copy; Openstreetmap France | {attribution.OpenStreetMap}'
+						attribution: '&copy; OpenStreetMap France | {attribution.OpenStreetMap}'
 					}
 				},
 				HOT: {
 					url: 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
 					options: {
-						attribution: '{attribution.OpenStreetMap}, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
+						attribution:
+							'{attribution.OpenStreetMap}, ' +
+							'Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a> ' +
+							'hosted by <a href="https://openstreetmap.fr/" target="_blank">OpenStreetMap France</a>'
 					}
 				},
 				BZH: {
-					url: 'http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png',
+					url: 'https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png',
 					options: {
 						attribution: '{attribution.OpenStreetMap}, Tiles courtesy of <a href="http://www.openstreetmap.bzh/" target="_blank">Breton OpenStreetMap Team</a>',
 						bounds: [[46.2, -5.5], [50, 0.7]]
@@ -138,6 +129,13 @@
 				attribution: 'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors'
 			}
 		},
+		OpenPtMap: {
+			url: 'http://openptmap.org/tiles/{z}/{x}/{y}.png',
+			options: {
+				maxZoom: 17,
+				attribution: 'Map data: &copy; <a href="http://www.openptmap.org">OpenPtMap</a> contributors'
+			}
+		},
 		OpenTopoMap: {
 			url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
 			options: {
@@ -145,6 +143,48 @@
 				attribution: 'Map data: {attribution.OpenStreetMap}, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
 			}
 		},
+		OpenRailwayMap: {
+			url: 'https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png',
+			options: {
+				maxZoom: 19,
+				attribution: 'Map data: {attribution.OpenStreetMap} | Map style: &copy; <a href="https://www.OpenRailwayMap.org">OpenRailwayMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
+			}
+		},
+		OpenFireMap: {
+			url: 'http://openfiremap.org/hytiles/{z}/{x}/{y}.png',
+			options: {
+				maxZoom: 19,
+				attribution: 'Map data: {attribution.OpenStreetMap} | Map style: &copy; <a href="http://www.openfiremap.org">OpenFireMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
+			}
+		},
+		SafeCast: {
+			url: 'https://s3.amazonaws.com/te512.safecast.org/{z}/{x}/{y}.png',
+			options: {
+				maxZoom: 16,
+				attribution: 'Map data: {attribution.OpenStreetMap} | Map style: &copy; <a href="https://blog.safecast.org/about/">SafeCast</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
+			}
+		},
+		Stadia: {
+			url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png',
+			options: {
+				maxZoom: 20,
+				attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
+			},
+			variants: {
+				AlidadeSmooth: {
+					url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png'
+				},
+				AlidadeSmoothDark: {
+					url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'
+				},
+				OSMBright: {
+					url: 'https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png'
+				},
+				Outdoors: {
+					url: 'https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.png'
+				}
+			}
+		},
 		Thunderforest: {
 			url: 'https://{s}.tile.thunderforest.com/{variant}/{z}/{x}/{y}.png?apikey={apikey}',
 			options: {
@@ -173,36 +213,22 @@
 				},
 				Landscape: 'landscape',
 				Outdoors: 'outdoors',
-				Pioneer: 'pioneer'
+				Pioneer: 'pioneer',
+				MobileAtlas: 'mobile-atlas',
+				Neighbourhood: 'neighbourhood'
 			}
 		},
-		OpenMapSurfer: {
-			url: 'https://korona.geog.uni-heidelberg.de/tiles/{variant}/x={x}&y={y}&z={z}',
+		CyclOSM: {
+			url: 'https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
 			options: {
 				maxZoom: 20,
-				variant: 'roads',
-				attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data {attribution.OpenStreetMap}'
-			},
-			variants: {
-				Roads: 'roads',
-				AdminBounds: {
-					options: {
-						variant: 'adminb',
-						maxZoom: 19
-					}
-				},
-				Grayscale: {
-					options: {
-						variant: 'roadsg',
-						maxZoom: 19
-					}
-				}
+				attribution: '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> | Map data: {attribution.OpenStreetMap}'
 			}
 		},
 		Hydda: {
 			url: 'https://{s}.tile.openstreetmap.se/hydda/{variant}/{z}/{x}/{y}.png',
 			options: {
-				maxZoom: 18,
+				maxZoom: 20,
 				variant: 'full',
 				attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data {attribution.OpenStreetMap}'
 			},
@@ -212,19 +238,75 @@
 				RoadsAndLabels: 'roads_and_labels'
 			}
 		},
-		MapBox: {
-			url: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
+		Jawg: {
+			url: 'https://{s}.tile.jawg.io/{variant}/{z}/{x}/{y}{r}.png?access-token={accessToken}',
 			options: {
 				attribution:
-					'Imagery from <a href="http://mapbox.com/about/maps/">MapBox</a> &mdash; ' +
-					'Map data {attribution.OpenStreetMap}',
+					'<a href="http://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> ' +
+					'{attribution.OpenStreetMap}',
+				minZoom: 0,
+				maxZoom: 22,
 				subdomains: 'abcd',
-				id: 'streets',
+				variant: 'jawg-terrain',
+				// Get your own Jawg access token here : https://www.jawg.io/lab/
+				// NB : this is a demonstration key that comes with no guarantee
+				accessToken: '<insert your access token here>',
+			},
+			variants: {
+				Streets: 'jawg-streets',
+				Terrain: 'jawg-terrain',
+				Sunny: 'jawg-sunny',
+				Dark: 'jawg-dark',
+				Light: 'jawg-light',
+				Matrix: 'jawg-matrix'
+			}
+		},
+		MapBox: {
+			url: 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}{r}?access_token={accessToken}',
+			options: {
+				attribution:
+					'&copy; <a href="https://www.mapbox.com/about/maps/" target="_blank">Mapbox</a> ' +
+					'{attribution.OpenStreetMap} ' +
+					'<a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a>',
+				tileSize: 512,
+				maxZoom: 18,
+				zoomOffset: -1,
+				id: 'mapbox/streets-v11',
 				accessToken: '<insert your access token here>',
 			}
 		},
+		MapTiler: {
+			url: 'https://api.maptiler.com/maps/{variant}/{z}/{x}/{y}{r}.{ext}?key={key}',
+			options: {
+				attribution:
+					'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
+				variant: 'streets',
+				ext: 'png',
+				key: '<insert your MapTiler Cloud API key here>',
+				tileSize: 512,
+				zoomOffset: -1,
+				minZoom: 0,
+				maxZoom: 21
+			},
+			variants: {
+				Streets: 'streets',
+				Basic: 'basic',
+				Bright: 'bright',
+				Pastel: 'pastel',
+				Positron: 'positron',
+				Hybrid: {
+					options: {
+						variant: 'hybrid',
+						ext: 'jpg'
+					}
+				},
+				Toner: 'toner',
+				Topo: 'topo',
+				Voyager: 'voyager'
+			}
+		},
 		Stamen: {
-			url: 'https://stamen-tiles-{s}.a.ssl.fastly.net/{variant}/{z}/{x}/{y}.{ext}',
+			url: 'https://stamen-tiles-{s}.a.ssl.fastly.net/{variant}/{z}/{x}/{y}{r}.{ext}',
 			options: {
 				attribution:
 					'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
@@ -244,8 +326,10 @@
 				TonerLabels: 'toner-labels',
 				TonerLite: 'toner-lite',
 				Watercolor: {
+					url: 'https://stamen-tiles-{s}.a.ssl.fastly.net/{variant}/{z}/{x}/{y}.{ext}',
 					options: {
 						variant: 'watercolor',
+						ext: 'jpg',
 						minZoom: 1,
 						maxZoom: 16
 					}
@@ -264,7 +348,15 @@
 						maxZoom: 18
 					}
 				},
+				TerrainLabels: {
+					options: {
+						variant: 'terrain-labels',
+						minZoom: 0,
+						maxZoom: 18
+					}
+				},
 				TopOSMRelief: {
+					url: 'https://stamen-tiles-{s}.a.ssl.fastly.net/{variant}/{z}/{x}/{y}.{ext}',
 					options: {
 						variant: 'toposm-color-relief',
 						ext: 'jpg',
@@ -280,6 +372,24 @@
 				}
 			}
 		},
+		TomTom: {
+			url: 'https://{s}.api.tomtom.com/map/1/tile/{variant}/{style}/{z}/{x}/{y}.{ext}?key={apikey}',
+			options: {
+				variant: 'basic',
+				maxZoom: 22,
+				attribution:
+					'<a href="https://tomtom.com" target="_blank">&copy;  1992 - ' + new Date().getFullYear() + ' TomTom.</a> ',
+				subdomains: 'abcd',
+				style: 'main',
+				ext: 'png',
+				apikey: '<insert your API key here>',
+			},
+			variants: {
+				Basic: 'basic',
+				Hybrid: 'hybrid',
+				Labels: 'labels'
+			}
+		},
 		Esri: {
 			url: 'https://server.arcgisonline.com/ArcGIS/rest/services/{variant}/MapServer/tile/{z}/{y}/{x}',
 			options: {
@@ -369,7 +479,7 @@
 			options: {
 				maxZoom: 19,
 				attribution: 'Map data &copy; <a href="http://openweathermap.org">OpenWeatherMap</a>',
-				apiKey:'<insert your api key here>',
+				apiKey: '<insert your api key here>',
 				opacity: 0.5
 			},
 			variants: {
@@ -389,20 +499,16 @@
 		HERE: {
 			/*
 			 * HERE maps, formerly Nokia maps.
-			 * These basemaps are free, but you need an API key. Please sign up at
-			 * http://developer.here.com/getting-started
-			 *
-			 * Note that the base urls contain '.cit' whichs is HERE's
-			 * 'Customer Integration Testing' environment. Please remove for production
-			 * envirionments.
+			 * These basemaps are free, but you need an api id and app key. Please sign up at
+			 * https://developer.here.com/plans
 			 */
 			url:
-				'https://{s}.{base}.maps.cit.api.here.com/maptile/2.1/' +
+				'https://{s}.{base}.maps.api.here.com/maptile/2.1/' +
 				'{type}/{mapID}/{variant}/{z}/{x}/{y}/{size}/{format}?' +
 				'app_id={app_id}&app_code={app_code}&lg={language}',
 			options: {
 				attribution:
-					'Map &copy; 1987-2014 <a href="http://developer.here.com">HERE</a>',
+					'Map &copy; 1987-' + new Date().getFullYear() + ' <a href="http://developer.here.com">HERE</a>',
 				subdomains: '1234',
 				mapID: 'newest',
 				'app_id': '<insert your app_id here>',
@@ -423,11 +529,21 @@
 				normalDayGreyMobile: 'normal.day.grey.mobile',
 				normalDayTransit: 'normal.day.transit',
 				normalDayTransitMobile: 'normal.day.transit.mobile',
+				normalDayTraffic: {
+					options: {
+						variant: 'normal.traffic.day',
+						base: 'traffic',
+						type: 'traffictile'
+					}
+				},
 				normalNight: 'normal.night',
 				normalNightMobile: 'normal.night.mobile',
 				normalNightGrey: 'normal.night.grey',
 				normalNightGreyMobile: 'normal.night.grey.mobile',
-
+				normalNightTransit: 'normal.night.transit',
+				normalNightTransitMobile: 'normal.night.transit.mobile',
+				reducedDay: 'reduced.day',
+				reducedNight: 'reduced.night',
 				basicMap: {
 					options: {
 						type: 'basetile'
@@ -458,6 +574,133 @@
 						variant: 'hybrid.day.mobile'
 					}
 				},
+				hybridDayTransit: {
+					options: {
+						base: 'aerial',
+						variant: 'hybrid.day.transit'
+					}
+				},
+				hybridDayGrey: {
+					options: {
+						base: 'aerial',
+						variant: 'hybrid.grey.day'
+					}
+				},
+				hybridDayTraffic: {
+					options: {
+						variant: 'hybrid.traffic.day',
+						base: 'traffic',
+						type: 'traffictile'
+					}
+				},
+				pedestrianDay: 'pedestrian.day',
+				pedestrianNight: 'pedestrian.night',
+				satelliteDay: {
+					options: {
+						base: 'aerial',
+						variant: 'satellite.day'
+					}
+				},
+				terrainDay: {
+					options: {
+						base: 'aerial',
+						variant: 'terrain.day'
+					}
+				},
+				terrainDayMobile: {
+					options: {
+						base: 'aerial',
+						variant: 'terrain.day.mobile'
+					}
+				}
+			}
+		},
+		HEREv3: {
+			/*
+			 * HERE maps API Version 3.
+			 * These basemaps are free, but you need an API key. Please sign up at
+			 * https://developer.here.com/plans
+			 * Version 3 deprecates the app_id and app_code access in favor of apiKey
+			 *
+			 * Supported access methods as of 2019/12/21:
+			 * @see https://developer.here.com/faqs#access-control-1--how-do-you-control-access-to-here-location-services
+			 */
+			url:
+				'https://{s}.{base}.maps.ls.hereapi.com/maptile/2.1/' +
+				'{type}/{mapID}/{variant}/{z}/{x}/{y}/{size}/{format}?' +
+				'apiKey={apiKey}&lg={language}',
+			options: {
+				attribution:
+					'Map &copy; 1987-' + new Date().getFullYear() + ' <a href="http://developer.here.com">HERE</a>',
+				subdomains: '1234',
+				mapID: 'newest',
+				apiKey: '<insert your apiKey here>',
+				base: 'base',
+				variant: 'normal.day',
+				maxZoom: 20,
+				type: 'maptile',
+				language: 'eng',
+				format: 'png8',
+				size: '256'
+			},
+			variants: {
+				normalDay: 'normal.day',
+				normalDayCustom: 'normal.day.custom',
+				normalDayGrey: 'normal.day.grey',
+				normalDayMobile: 'normal.day.mobile',
+				normalDayGreyMobile: 'normal.day.grey.mobile',
+				normalDayTransit: 'normal.day.transit',
+				normalDayTransitMobile: 'normal.day.transit.mobile',
+				normalNight: 'normal.night',
+				normalNightMobile: 'normal.night.mobile',
+				normalNightGrey: 'normal.night.grey',
+				normalNightGreyMobile: 'normal.night.grey.mobile',
+				normalNightTransit: 'normal.night.transit',
+				normalNightTransitMobile: 'normal.night.transit.mobile',
+				reducedDay: 'reduced.day',
+				reducedNight: 'reduced.night',
+				basicMap: {
+					options: {
+						type: 'basetile'
+					}
+				},
+				mapLabels: {
+					options: {
+						type: 'labeltile',
+						format: 'png'
+					}
+				},
+				trafficFlow: {
+					options: {
+						base: 'traffic',
+						type: 'flowtile'
+					}
+				},
+				carnavDayGrey: 'carnav.day.grey',
+				hybridDay: {
+					options: {
+						base: 'aerial',
+						variant: 'hybrid.day'
+					}
+				},
+				hybridDayMobile: {
+					options: {
+						base: 'aerial',
+						variant: 'hybrid.day.mobile'
+					}
+				},
+				hybridDayTransit: {
+					options: {
+						base: 'aerial',
+						variant: 'hybrid.day.transit'
+					}
+				},
+				hybridDayGrey: {
+					options: {
+						base: 'aerial',
+						variant: 'hybrid.grey.day'
+					}
+				},
 				pedestrianDay: 'pedestrian.day',
 				pedestrianNight: 'pedestrian.night',
 				satelliteDay: {
@@ -481,11 +724,11 @@
 			}
 		},
 		FreeMapSK: {
-			url: 'http://t{s}.freemap.sk/T/{z}/{x}/{y}.jpeg',
+			url: 'https://{s}.freemap.sk/T/{z}/{x}/{y}.jpeg',
 			options: {
 				minZoom: 8,
 				maxZoom: 16,
-				subdomains: '1234',
+				subdomains: 'abcd',
 				bounds: [[47.204642, 15.996093], [49.830896, 22.576904]],
 				attribution:
 					'{attribution.OpenStreetMap}, vizualization CC-By-SA 2.0 <a href="http://freemap.sk">Freemap.sk</a>'
@@ -499,9 +742,9 @@
 			}
 		},
 		CartoDB: {
-			url: 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/{variant}/{z}/{x}/{y}.png',
+			url: 'https://{s}.basemaps.cartocdn.com/{variant}/{z}/{x}/{y}{r}.png',
 			options: {
-				attribution: '{attribution.OpenStreetMap} &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
+				attribution: '{attribution.OpenStreetMap} &copy; <a href="https://carto.com/attributions">CARTO</a>',
 				subdomains: 'abcd',
 				maxZoom: 19,
 				variant: 'light_all'
@@ -512,11 +755,15 @@
 				PositronOnlyLabels: 'light_only_labels',
 				DarkMatter: 'dark_all',
 				DarkMatterNoLabels: 'dark_nolabels',
-				DarkMatterOnlyLabels: 'dark_only_labels'
+				DarkMatterOnlyLabels: 'dark_only_labels',
+				Voyager: 'rastertiles/voyager',
+				VoyagerNoLabels: 'rastertiles/voyager_nolabels',
+				VoyagerOnlyLabels: 'rastertiles/voyager_only_labels',
+				VoyagerLabelsUnder: 'rastertiles/voyager_labels_under'
 			}
 		},
 		HikeBike: {
-			url: 'http://{s}.tiles.wmflabs.org/{variant}/{z}/{x}/{y}.png',
+			url: 'https://tiles.wmflabs.org/{variant}/{z}/{x}/{y}.png',
 			options: {
 				maxZoom: 19,
 				attribution: '{attribution.OpenStreetMap}',
@@ -533,11 +780,12 @@
 			}
 		},
 		BasemapAT: {
-			url: 'https://maps{s}.wien.gv.at/basemap/{variant}/normal/google3857/{z}/{y}/{x}.{format}',
+			url: 'https://maps{s}.wien.gv.at/basemap/{variant}/{type}/google3857/{z}/{y}/{x}.{format}',
 			options: {
 				maxZoom: 19,
 				attribution: 'Datenquelle: <a href="https://www.basemap.at">basemap.at</a>',
 				subdomains: ['', '1', '2', '3', '4'],
+				type: 'normal',
 				format: 'png',
 				bounds: [[46.358770, 8.782379], [49.037872, 17.189532]],
 				variant: 'geolandbasemap'
@@ -551,6 +799,20 @@
 				},
 				grau: 'bmapgrau',
 				overlay: 'bmapoverlay',
+				terrain: {
+					options: {
+						variant: 'bmapgelaende',
+						type: 'grau',
+						format: 'jpeg'
+					}
+				},
+				surface: {
+					options: {
+						variant: 'bmapoberflaeche',
+						type: 'grau',
+						format: 'jpeg'
+					}
+				},
 				highdpi: {
 					options: {
 						variant: 'bmaphidpi',
@@ -579,7 +841,7 @@
 				'pastel': 'brtachtergrondkaartpastel',
 				'grijs': 'brtachtergrondkaartgrijs',
 				'luchtfoto': {
-					'url': 'https://geodata.nationaalgeoregister.nl/luchtfoto/rgb/wmts/1.0.0/2016_ortho25/EPSG:3857/{z}/{x}/{y}.png',
+					'url': 'https://geodata.nationaalgeoregister.nl/luchtfoto/rgb/wmts/2018_ortho25/EPSG:3857/{z}/{x}/{y}.png',
 				}
 			}
 		},
@@ -680,6 +942,118 @@
 				white: 'white',
 				plurality: 'plural'
 			}
+		},
+		Wikimedia: {
+			url: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png',
+			options: {
+				attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
+				minZoom: 1,
+				maxZoom: 19
+			}
+		},
+		GeoportailFrance: {
+			url: 'https://wxs.ign.fr/{apikey}/geoportail/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE={style}&TILEMATRIXSET=PM&FORMAT={format}&LAYER={variant}&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
+			options: {
+				attribution: '<a target="_blank" href="https://www.geoportail.gouv.fr/">Geoportail France</a>',
+				bounds: [[-75, -180], [81, 180]],
+				minZoom: 2,
+				maxZoom: 18,
+				// Get your own geoportail apikey here : http://professionnels.ign.fr/ign/contrats/
+				// NB : 'choisirgeoportail' is a demonstration key that comes with no guarantee
+				apikey: 'choisirgeoportail',
+				format: 'image/jpeg',
+				style: 'normal',
+				variant: 'GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD'
+			},
+			variants: {
+				parcels: {
+					options: {
+						variant: 'CADASTRALPARCELS.PARCELS',
+						maxZoom: 20,
+						style: 'bdparcellaire',
+						format: 'image/png'
+					}
+				},
+				ignMaps: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
+				maps: 'GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD',
+				orthos: {
+					options: {
+						maxZoom: 19,
+						variant: 'ORTHOIMAGERY.ORTHOPHOTOS'
+					}
+				}
+			}
+		},
+		OneMapSG: {
+			url: 'https://maps-{s}.onemap.sg/v3/{variant}/{z}/{x}/{y}.png',
+			options: {
+				variant: 'Default',
+				minZoom: 11,
+				maxZoom: 18,
+				bounds: [[1.56073, 104.11475], [1.16, 103.502]],
+				attribution: '<img src="https://docs.onemap.sg/maps/images/oneMap64-01.png" style="height:20px;width:20px;"/> New OneMap | Map data &copy; contributors, <a href="http://SLA.gov.sg">Singapore Land Authority</a>'
+			},
+			variants: {
+				Default: 'Default',
+				Night: 'Night',
+				Original: 'Original',
+				Grey: 'Grey',
+				LandLot: 'LandLot'
+			}
+		},
+		USGS: {
+			url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{z}/{y}/{x}',
+			options: {
+				maxZoom: 20,
+				attribution: 'Tiles courtesy of the <a href="https://usgs.gov/">U.S. Geological Survey</a>'
+			},
+			variants: {
+				USTopo: {},
+				USImagery: {
+					url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}'
+				},
+				USImageryTopo: {
+					url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}'
+				}
+			}
+		},
+		WaymarkedTrails: {
+			url: 'https://tile.waymarkedtrails.org/{variant}/{z}/{x}/{y}.png',
+			options: {
+				maxZoom: 18,
+				attribution: 'Map data: {attribution.OpenStreetMap} | Map style: &copy; <a href="https://waymarkedtrails.org">waymarkedtrails.org</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
+			},
+			variants: {
+				hiking: 'hiking',
+				cycling: 'cycling',
+				mtb: 'mtb',
+				slopes: 'slopes',
+				riding: 'riding',
+				skating: 'skating'
+			}
+		},
+		OpenAIP: {
+			url: 'http://{s}.tile.maps.openaip.net/geowebcache/service/tms/1.0.0/openaip_basemap@EPSG%3A900913@png/{z}/{x}/{y}.{ext}',
+			options: {
+				attribution: '<a href="https://www.openaip.net/">openAIP Data</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-NC-SA</a>)',
+				ext: 'png',
+				minZoom: 4,
+				maxZoom: 14,
+				tms: true,
+				detectRetina: true,
+				subdomains: '12'
+			}
+		},
+		OpenSnowMap: {
+			url: 'https://tiles.opensnowmap.org/{variant}/{z}/{x}/{y}.png',
+			options: {
+				minZoom: 9,
+				maxZoom: 18,
+				attribution: 'Map data: {attribution.OpenStreetMap} & ODbL, &copy; <a href="https://www.opensnowmap.org/iframes/data.html">www.opensnowmap.org</a> <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
+			},
+			variants: {
+				pistes: 'pistes',
+			}
 		}
 	};
 
@@ -688,4 +1062,4 @@
 	};
 
 	return L;
-}));
+}));

sigal/themes/default/templates/default_head.html

@@ -0,0 +1,11 @@
+{% if settings.show_map and album.show_map %}
+  <link rel="stylesheet" href="{{ theme.url }}/leaflet/leaflet.css" />
+  <link rel="stylesheet" href="{{ theme.url }}/leaflet/Control.FullScreen.css" />
+  <link rel="stylesheet" href="{{ theme.url }}/leaflet/MarkerCluster.css" />
+  <link rel="stylesheet" href="{{ theme.url }}/leaflet/Leaflet.Photo.css" />
+  <script src="{{ theme.url }}/leaflet/leaflet.js"></script>
+  <script src="{{ theme.url }}/leaflet/leaflet-providers.js"></script>
+  <script src="{{ theme.url }}/leaflet/Control.FullScreen.js"></script>
+  <script src="{{ theme.url }}/leaflet/leaflet.markercluster.js"></script>
+  <script src="{{ theme.url }}/leaflet/Leaflet.Photo.js"></script>
+{% endif %}

sigal/themes/default/templates/download_zip.html

@@ -0,0 +1,13 @@
+{% if album.zip %}
+  {% if album.settings['zip_media_format'] == "orig" %}
+    <div id="additionnal-infos" class="row">
+      <p><a href="{{ album.zip }}"
+            title="Download a zip archive with all images original size">Download ZIP with original files</a></p>
+    </div>
+  {% else %}
+    <div id="additionnal-infos" class="row">
+      <p><a href="{{ album.zip }}"
+            title="Download a zip archive with all images">Download ZIP</a></p>
+    </div>
+  {% endif %}
+{% endif %}

sigal/themes/default/templates/map.html

@@ -0,0 +1,35 @@
+{% if settings.show_map and album.show_map %}
+<div id="mapid" style="height: {{ settings.map_height }};"></div>
+<script charset="utf-8">
+  var map = L.map('mapid', {
+    fullscreenControl: true,
+    fullscreenControlOptions: {
+      position: 'topleft'
+    }
+  });
+  L.tileLayer.provider('{{ settings.leaflet_provider }}').addTo(map);
+
+  var photoLayer = L.photo.cluster({ spiderfyDistanceMultiplier: 1.2 })
+                   .on('click', function (evt) {
+    evt.layer.bindPopup(L.Util.template('<img src="{url}"/></a><p>{caption}</p>', evt.layer.photo), {
+      className: 'leaflet-popup-photo',
+      minWidth: 400
+    }).openPopup();
+  });
+
+  var photos = [];
+  {% for media in album.medias %}
+    {% if media.exif and media.exif.gps %}
+    photos.push({
+      lat: {{ media.exif.gps.lat }},
+      lng: {{ media.exif.gps.lon }},
+      url: "{{ media.thumbnail }}",
+      caption: "{{ media.title }}",
+      thumbnail: "{{ media.thumbnail }}",
+    });
+    {% endif %}
+  {% endfor %}
+  photoLayer.add(photos).addTo(map);
+  map.fitBounds(photoLayer.getBounds());
+</script>
+{% endif %}

sigal/themes/galleria/templates/album.html

@@ -8,13 +8,8 @@
         position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
         content:url({{ album.medias[0].url }});
     }</style>
-    {% if settings.show_map and album.show_map %}
-    <link rel="stylesheet" href="{{ theme.url }}/leaflet/leaflet.css" />
-    {% endif %}
 {% endblock %}
 
 {% block content %}
-        {% include 'album_items.html' %}
-
+  {% include 'album_items.html' %}
 {% endblock %}
-

sigal/themes/galleria/templates/album_items.html

@@ -1,38 +1,23 @@
-        <div class="icons">
-          {% if settings.show_map and album.show_map %}
-          <a class="gallery-map-toggle"><img src="{{ theme.url }}/img/map.png"
-            title="Show/Hide map" alt="Show/Hide Map (m)" /></a>
-          {% endif %}
-          <a id="fullscreen"><img src="{{ theme.url }}/img/fullscreen.png"
-            title="Fullscreen" alt="Fullscreen (f)" /></a>
-        </div>
-        <div id="gallery"></div>
+<div class="icons">
+  <a id="fullscreen"><img src="{{ theme.url }}/img/fullscreen.png"
+                          title="Fullscreen" alt="Fullscreen (f)" /></a>
+</div>
+{% include 'map.html' %}
+<div id="gallery"></div>
 
-        {% if album.zip %}
-          {% if album.settings['zip_media_format'] == "orig" %}
-            <div id="additionnal-infos" class="row">
-              <p><a href="{{ album.zip }}"
-                    title="Download a zip archive with all images original size">Download ZIP with original files</a></p>
-            </div>
-          {% else %}
-            <div id="additionnal-infos" class="row">
-              <p><a href="{{ album.zip }}"
-                    title="Download a zip archive with all images">Download ZIP</a></p>
-            </div>
-          {% endif %}
-        {% endif %}
+{% include 'download_zip.html' %}
 
-        {% if album.description %}
-        <div id="description">
-          {{ album.description }}
-        </div>
-        {% endif %}
+{% if album.description %}
+<div id="description">
+  {{ album.description }}
+</div>
+{% endif %}
 
 {% block late_js %}
   {% if album.medias %}
     {% macro img_description(media) -%}
       {%- if media.big -%}<a href='{{ media.big_url }}'>Full size</a>{%- endif -%}
-	    {# clean up tags and whitespace, including newlines, in the description #}
+      {# clean up tags and whitespace, including newlines, in the description #}
       {%- if media.description -%}<br>{{ media.description | striptags }}{%- endif -%}
       {%- if media.exif -%}
         <div class='film-meta'>
@@ -54,10 +39,6 @@
     {%- endmacro %}
 
     <script src="{{ theme.url }}/jquery-3.3.1.min.js"></script>
-    {% if settings.show_map and album.show_map %}
-    <script src="{{ theme.url }}/leaflet/leaflet.js"></script>
-    <script src="{{ theme.url }}/leaflet/leaflet-providers.js"></script>
-    {% endif %}
     <script src="{{ theme.url }}/galleria.min.js"></script>
     <script src="{{ theme.url }}/themes/{{ settings.galleria_theme }}/galleria.{{ settings.galleria_theme }}.min.js"></script>
     <script src="{{ theme.url }}/plugins/history/galleria.history.min.js"></script>
@@ -82,109 +63,6 @@
       {% endfor %}
     ]
 
-    {% if settings.show_map and album.show_map %}
-    var selected =-1;
-    /* Init markers */
-    var features = new Array();
-
-    function selectMarker(marker) {
-        if (selected >= 0 && features[selected] != null) {
-            features[selected].setStyle({
-                radius: 7,
-                fillColor: "#888a85",
-                color: "#2e3436",
-                weight: 1,
-                fillOpacity: 1,
-                clickable: true
-            });
-            features[selected].redraw();
-        }
-
-        if (marker != null) {
-          marker.setStyle({
-              radius: 7,
-              fillColor: "#cc0000",
-              color: "#ef2929",
-              weight: 1,
-              fillOpacity: 1,
-              clickable: true
-          });
-          marker.bringToFront();
-          map.panTo(marker.getLatLng());
-        }
-    }
-
-    function onFeatureClick(e) {
-      selectMarker(e.target);
-      var id = features.indexOf(e.target);
-      var galleria = $("#gallery").data("galleria");
-      if (selected != id) {
-          selected = id;
-          galleria.show(id);
-      }
-    }
-
-    function init_map() {
-        /* Make sure we have the map div */
-        if ($("#galleria-map").length == 0) {
-            $(".galleria-stage").after("<div id='galleria-map'></div>");
-            map = L.map('galleria-map');
-            L.tileLayer.provider('{{ settings.leaflet_provider }}').addTo(map);
-            map.setView([51.505, -0.09], 12);
-
-            {% for media in album.medias %}
-              {% if media.exif and media.exif.gps %}
-            var lat = {{ media.exif.gps.lat }};
-            var lon = {{ media.exif.gps.lon }};
-            var marker = L.circleMarker([lat, lon], {
-                radius: 7,
-                fillColor: "#888a85",
-                color: "#2e3436",
-                weight: 1,
-                fillOpacity: 1,
-                clickable: true
-            });
-            marker.on('click', onFeatureClick);
-            features.push(marker);
-            marker.addTo(map);
-              {% else %}
-            features.push(null);
-              {% endif %}
-            {% endfor %}
-
-            selectMarker(features[selected]);
-        }
-    }
-
-    function galleryMapToggle() {
-        /* Make sure the map is loaded */
-        init_map();
-
-        var stage = $(".galleria-stage");
-        var mapdiv = $("#galleria-map");
-        var icons = $(".icons");
-
-        if (stage.attr.hidden == true) {
-            stage.attr.hidden = false;
-            $(".galleria-info-link").show();
-            mapdiv.hide();
-            stage.css("opacity", "1");
-            icons.css("background-color", "inherit");
-            /* Change display of the Map link */
-            $(".gallery-map-toggle img")[0].src = "{{ theme.url }}/img/map.png";
-        } else {
-            stage.attr.hidden = true;
-            $(".galleria-info-link").hide();
-            mapdiv.show();
-            /* Play with the stage opacity otherwise galleria will go mad */
-            stage.css("opacity", "0");
-            icons.css("background-color", "#333");
-            /* Change display of the Map link */
-            $(".gallery-map-toggle img")[0].src = "{{ theme.url }}/img/photo.png";
-        }
-    }
-    {% endif %}
-
     Galleria.ready(function() {
         /*
         load thumbnails after gallery setup, and download has started
@@ -202,10 +80,6 @@
             left: this.prev,
             /* Toggle fullscreen display on press of 'f' key */
             0x46: this.toggleFullscreen,
-            {% if settings.show_map and album.show_map %}
-            /* Toggle map display on press of 'm' key */
-            0x4D: galleryMapToggle,
-            {% endif %}
         });
 
         var gallery = this;
@@ -214,17 +88,6 @@
         });
 
         $('.icons').appendTo(this.$('container'));
-
-        {% if settings.show_map and album.show_map %}
-        $(".gallery-map-toggle").click(galleryMapToggle);
-        this.bind('loadfinish', function(e) {
-            /*  Triggers every time Galleria has finished loading an image.*/
-            if (selected != e.index) {
-                selectMarker(features[e.index]);
-                selected = e.index;
-            }
-        });
-        {% endif %}
     });
 
     Galleria.configure({

sigal/themes/galleria/templates/album_list.html

@@ -1,31 +1,23 @@
 {% extends "base.html" %}
 
 {% block extra_head %}
-    {# These are used on album pages - prefetch now #}
-    <link rel="prefetch" href="static/jquery-3.3.1.min.js" />
-    <link rel="prefetch" href="static/galleria.min.js" />
-    <link rel="prefetch" href="static/themes/classic/galleria.classic.min.js" />
-    <link rel="prefetch" href="static/plugins/history/galleria.history.min.js" />
-    {% if settings.show_map %}
-    <link rel="prefetch" href="static/leaflet/leaflet.css" />
-    <link rel="prefetch" href="static/leaflet/leaflet.js" />
-    <link rel="prefetch" href="static/leaflet/leaflet-providers.js" />
-    {% endif %}
+{# These are used on album pages - prefetch now #}
+<link rel="prefetch" href="static/jquery-3.3.1.min.js" />
+<link rel="prefetch" href="static/galleria.min.js" />
+<link rel="prefetch" href="static/themes/classic/galleria.classic.min.js" />
+<link rel="prefetch" href="static/plugins/history/galleria.history.min.js" />
 {% endblock %}
 
 {% block content %}
-        <div id="albums">
-          <ul>
-            {% for alb in album.albums %}
-            <li><a href="{{ alb.url }}">
-              <img src="{{ alb.thumbnail }}" class="album_thumb" alt="{{ alb.name }}" title="{{ alb.name }}" /></a>
-              <span class="album_title">{{ alb.title }}</span>
-            </li>
-            {% endfor %}
-          </ul>
-        </div>
-        {% include 'album_items.html' %}
-
-
-
+<div id="albums">
+  <ul>
+    {% for alb in album.albums %}
+    <li><a href="{{ alb.url }}">
+      <img src="{{ alb.thumbnail }}" class="album_thumb" alt="{{ alb.name }}" title="{{ alb.name }}" /></a>
+      <span class="album_title">{{ alb.title }}</span>
+    </li>
+    {% endfor %}
+  </ul>
+</div>
+{% include 'album_items.html' %}
 {% endblock %}

sigal/themes/galleria/templates/base.html

@@ -15,6 +15,7 @@
     {% if user_css %}
     <link rel="stylesheet" href="{{ theme.url }}/{{ user_css }}">
     {% endif %}
+    {% include 'default_head.html' %}
     {% block extra_head %}{% endblock extra_head %}
     {% include 'analytics.html' %}
   </head>
@@ -33,7 +34,7 @@
       </header>
 
       <div id="main" role="main">
-	      {% block content %}{% endblock content %}
+        {% block content %}{% endblock content %}
       </div>
       {% include 'footer.html' %}
     </div>

sigal/themes/photoswipe/templates/album.html

@@ -9,20 +9,8 @@
 {% endblock extra_head %}
 
 {% block content %}
-  {% if album.zip %}
-    {% if album.settings['zip_media_format'] == "orig" %}
-      <div class="additionnal-infos">
-        <p><a href="{{ album.zip }}"
-              title="Download a zip archive with all images original size">Download ZIP with original files</a></p>
-      </div>
-    {% else %}
-      <div class="additionnal-infos">
-        <p><a href="{{ album.zip }}"
-              title="Download a zip archive with all images">Download ZIP</a></p>
-      </div>
-    {% endif %}
-  {% endif %}
-
+  {% include 'download_zip.html' %}
+  {% include 'map.html' %}
   <div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
     {% for media in album.medias %}
       {% if media.type == "image" %}

sigal/themes/photoswipe/templates/base.html

@@ -8,6 +8,7 @@
     <meta name="description" content="">
     <meta name="author" content="{{ album.author }}">
     <meta name="viewport" content="width=device-width">
+    {% include 'default_head.html' %}
     {% block extra_head %}{% endblock extra_head %}
     <link rel="stylesheet" href="{{ theme.url }}/styles.css">
     {% if user_css %}

sigal/utils.py

@@ -84,10 +84,10 @@ def read_markdown(filename):
         text = f.read()
 
     if MD is None:
-        MD = Markdown(
-            extensions=['markdown.extensions.meta', 'markdown.extensions.tables'],
-            output_format='html5',
-        )
+        MD = Markdown(extensions=['markdown.extensions.extra',
+                                  'markdown.extensions.meta',
+                                  'markdown.extensions.tables'],
+                      output_format='html5')
     else:
         MD.reset()
         # When https://github.com/Python-Markdown/markdown/pull/672

sigal/writer.py

@@ -39,6 +39,18 @@ THEMES_PATH = os.path.normpath(
 )
 
 
+def copytree(src, dst, symlinks=False, ignore=None):
+    # FIXME: replace this with shutil.copytree and dirs_exist_ok when
+    # minimum Python is 3.8
+    for item in os.listdir(src):
+        s = os.path.join(src, item)
+        d = os.path.join(dst, item)
+        if os.path.isdir(s):
+            shutil.copytree(s, d, symlinks, ignore)
+        else:
+            shutil.copy2(s, d)
+
+
 class AbstractWriter:
     template_file = None
 
@@ -100,8 +112,10 @@ class AbstractWriter:
         self.theme_path = os.path.join(self.output_dir, "static")
         if os.path.isdir(self.theme_path):
             shutil.rmtree(self.theme_path)
-        # FIXME: use dirs_exist_ok when minimum Python is 3.8
-        shutil.copytree(os.path.join(self.theme, "static"), self.theme_path)
+
+        copytree(os.path.join(THEMES_PATH, 'default', 'static'),
+                 self.theme_path)
+        copytree(os.path.join(self.theme, 'static'), self.theme_path)
 
         if self.settings["user_css"]:
             if not os.path.exists(self.settings["user_css"]):

tests/sample/sigal.conf.py

@@ -43,4 +43,4 @@ atom_feed = {"feed_url": "http://127.0.0.1:8000/feed.atom", "nb_items": 10}
 # theme = 'galleria'
 # thumb_size = (280, 210)
 # galleria_theme = 'folio'
-# show_map = True
+show_map = True