@panoramax/web-viewer 5.0.0-develop-d7206514 → 5.0.0-develop-d26305dd

package/build/components/ui/Map.js

@@ -0,0 +1,853 @@
+import {
+	TILES_PICTURES_ZOOM, getThumbGif, isNullCoordinates,
+} from "../../utils/map.js";
+import SemanticsMapProtocol from "../../utils/SemanticsMapProtocol.js";
+import PanoraMapProtocol from "../../utils/PanoraMapProtocol.js";
+import { DISABLED_LEVEL, initIndoorEqualOnMap } from "../../utils/indoor.js";
+import { svgToImg } from "../../utils/utils.js";
+import MapLibreStyles from "maplibre-gl/dist/maplibre-gl.css" with { type: "css" };
+import MapStyles from "./Map.css" with { type: "css" };
+document.adoptedStyleSheets.push(MapLibreStyles);
+document.adoptedStyleSheets.push(MapStyles);
+
+// MapLibre imports
+import "maplibre-gl";
+//Import maplibreglWorker from "maplibre-gl/dist/maplibre-gl-csp-worker.js";
+import * as pmtiles from "pmtiles";
+//Maplibregl.workerClass = maplibreglWorker;
+// eslint-disable-next-line no-undef
+maplibregl.addProtocol("pmtiles", new pmtiles.Protocol().tile);
+// eslint-disable-next-line no-undef
+maplibregl.addProtocol("panora", new PanoraMapProtocol().tile());
+// eslint-disable-next-line no-undef
+maplibregl.addProtocol("panoras", new PanoraMapProtocol().tile());
+
+const MarkerBaseSVG = await fetch(new URL("../../img/marker.svg", import.meta.url).href).then(res => res.text());
+const MarkerSelectedSVG = await fetch(new URL("../../img/marker_blue.svg", import.meta.url).href).then(res => res.text());
+
+
+/**
+ * Map is the component showing pictures and sequences geolocation.
+ *
+ * Note that all functions of [MapLibre GL JS class Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) are also available.
+ *
+ * A more complete version of Map (with filters & themes) is available through [MapMore class](#Panoramax.components.ui.MapMore)
+ *
+ * ℹ️ Many style management is done in [MapStyleComposer](#Panoramax.utils.MapStyleComposer), which is available as a property of parent component.
+ *
+ * ⚠️ This class doesn't inherit from [EventTarget](https://developer.mozilla.org/fr/docs/Web/API/EventTarget), so it doesn't have `addEventListener` and `dispatchEvent` functions.
+ * It uses instead [`on`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#on) and `fire` functions from MapLibre Map class.
+ * `fire` function doesn't take directly [`Event`](https://developer.mozilla.org/fr/docs/Web/API/Event) objects, but a string and object data.
+ * A shorthand `addEventListener` function is added for simpler usage.
+ * @class Panoramax.components.ui.Map
+ * @extends [maplibregl.Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)
+ * @param {Panoramax.components.core.Basic} parent The parent view
+ * @param {Element} container The DOM element to create into
+ * @param {object} [options] The map options (any of [MapLibre GL settings](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/) or any supplementary option defined here)
+ * @param {object} [options.raster] The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition](https://maplibre.org/maplibre-style-spec/sources/#raster).
+ * @param {object} [options.basemaps] List of complementary basemaps, as { id: {MapLibre Style JSON or URL} }. Note that special IDs streets and aerial are reserved for default backgrounds.
+ * @param {string} [options.background=streets] Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
+ * @param {string} [options.attributionControl.customAttribution] To override default map attribution.
+ * @param {boolean} [options.picMarkerDraggable] To make the picture marker draggable, default to false.
+ * @param {object} [options.indoor] The indoor= MapLibre plugin options. This must be a JSON object following [IndoorEqual parameters](https://indoorequal.com/doc/maplibre-gl-indoorequal/api#parameters). Note that this is only available if [maplibre-gl-indoorequal](https://indoorequal.com/doc/maplibre-gl-indoorequal) plugin is loaded in your web page.
+ * @param {string} [options.indoor.level] (only if indoor= plugin is enabled) The initial indoor level to display. Defaults to ground or disabled depending on indoor map availability. Do not use if visible=false.
+ * @param {boolean} [options.indoor.visible=true] (only if indoor= plugin is enabled) The initial indoor visibility. Set to false to avoid data loading before user explicitly enables indoor through widgets. If set to false, you may not set any level option in component.
+ * @fires Panoramax.components.ui.Map#sequence-hover
+ * @fires Panoramax.components.ui.Map#sequence-click
+ * @fires Panoramax.components.ui.Map#picture-click
+ * @fires Panoramax.components.ui.Map#ready
+ * @example
+ * const map = new Panoramax.components.ui.Map(viewer, mapNode, {center: {lat: 48.7, lng: -1.7}});
+ */
+// eslint-disable-next-line no-undef
+export default class Map extends maplibregl.Map {
+	constructor(parent, container, options = {}) {
+		super({
+			container: container,
+			style: parent.mapStyleComposer.getMapStyle(),
+			center: [0,0],
+			zoom: 0,
+			maxZoom: 24,
+			attributionControl: false,
+			dragRotate: false,
+			pitchWithRotate: false,
+			touchZoomRotate: true,
+			touchPitch: false,
+			doubleClickZoom: false,
+			canvasContextAttributes: {
+				preserveDrawingBuffer: !parent.isWidthSmall(),
+			},
+			transformRequest: parent.api._getMapRequestTransform(),
+			locale: parent._t.maplibre,
+			hash: false,
+			...options
+		});
+
+		this._semMapProtocol = new SemanticsMapProtocol(parent);
+		// eslint-disable-next-line no-undef
+		maplibregl.addProtocol("sem", this._semMapProtocol.tile());
+		this._loadMarkerImages();
+
+		this._parent = parent;
+		this._parent.mapStyleComposer.map = this;
+
+		this._options = options;
+		this.getContainer().classList.add("pnx-map");
+
+		// Disable touch rotate
+		if(options.touchZoomRotate === undefined) {
+			this?.touchZoomRotate?.disableRotation();
+		}
+
+		// Handle raster source
+		if(this._options.raster) {
+			this._options.background = this._options.background || "streets";
+		}
+		// Supplementary basemaps
+		if(this._options.basemaps) {
+			this._parent.mapStyleComposer._createManyBasemaps(this._options.basemaps, this._options.background);
+		}
+
+		initIndoorEqualOnMap(this, ![undefined, DISABLED_LEVEL].includes(this._options.level));
+
+		// eslint-disable-next-line no-undef
+		this._attribution = new maplibregl.AttributionControl({ compact: false, ...options.attributionControl });
+		this.addControl(this._attribution);
+
+		this._initMapPosition();
+
+		// Widgets and markers
+		this._picMarker = this._getPictureMarker();
+		this._picMarkerPreview = this._getPictureMarker(false);
+
+		// Popup
+		this._picPreviewTimer = null;
+		// eslint-disable-next-line no-undef
+		this._picPopup = new maplibregl.Popup({
+			closeButton: false,
+			closeOnClick: !this._parent.isWidthSmall(),
+			offset: 15
+		});
+
+		// Cache for pictures and sequences thumbnails
+		this._picThumbUrl = {};
+		this._seqPictures = {};
+
+		// Parent selection
+		this._parent.addEventListener("select", this._parent.mapStyleComposer.updateMapStyle.bind(this._parent.mapStyleComposer));
+
+		// Post styles loading handlers
+		this._parent.mapStyleComposer.addEventListener("panoramax-changed", this._onPanoramaxChanged.bind(this));
+
+		// Timeout for initial loading
+		setTimeout(() => {
+			if(!this.loaded() && this._parent?.loader.isVisible()) {
+				this._parent.loader.dismiss({}, this._parent._t.map.slow_loading, async () => {
+					await this._postLoad();
+					this._parent.loader.dismiss();
+				});
+			}
+		}, 15000);
+
+		this.waitForEnoughMapLoaded().then(async () => await this._postLoad());
+	}
+
+	/**
+	 * @private
+	 */
+	_postLoad() {
+		this.resize();
+
+		// Map background click
+		this.on("dblclick", () => clearTimeout(this._gridFocus));
+		this.on("click", (e) => {
+			clearTimeout(this._gridFocus);
+
+			if(e.defaultPrevented === false) {
+				this._dropPreview();
+				if(this._parent.isMapWide?.() && !this._parent._hasMenuOpened()) {
+					this._gridFocus = setTimeout(() => this._parent?.grid?.toggleAway(), 100);
+				}
+			}
+		});
+
+		// Untoggle away widgets
+		const untoggleGridWidgets = () => {
+			if(this._parent.isMapWide?.() && this._parent?.grid?._hidden) {
+				// No clearTimeout as map continuously send move events
+				this._gridFocus = setTimeout(() => this._parent?.grid?.toggleAway(true), 100);
+			}
+		};
+		this.on("mousemove", untoggleGridWidgets);
+		this.on("touchmove", untoggleGridWidgets);
+
+		/**
+		 * Event when map is ready to display.
+		 * This includes Maplibre initial load, enough map data display and styling.
+		 * @event Panoramax.components.ui.Map#ready
+		 * @type {maplibregl.util.evented.Event}
+		 */
+		this.fire("ready");
+	}
+
+	/** @private */
+	_dropPreview(delayed) {
+		clearTimeout(this._picDropPreviewTimer);
+		if(delayed) {
+			this._picDropPreviewTimer = setTimeout(this._dropPreview.bind(this), 250);
+		}
+		else {
+			clearTimeout(this._picPreviewTimer);
+			delete this._picPopup._picId;
+			delete this._picPopup._loading;
+			this._picPopup.remove();
+			this._picMarkerPreview.remove();
+		}
+	}
+
+	/**
+	 * Destroy any form of life in this component
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	destroy() {
+		this.remove();
+		delete this._semMapProtocol;
+		delete this._parent;
+		delete this._options;
+		delete this._attribution;
+		delete this._picMarker;
+		delete this._picMarkerPreview;
+		delete this._picPreviewTimer;
+		delete this._picPopup;
+		delete this._picThumbUrl;
+		delete this._seqPictures;
+	}
+
+	/**
+	 * Helper to know when enough map background and Panoramax tiles are loaded for a proper display.
+	 * @returns {Promise} Resolves when enough is loaded
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	waitForEnoughMapLoaded() {
+		return new Promise((resolve) => {
+			let nbBgTiles = 0;
+			let nbFgTiles = 0;
+			let nbLoadedBgTiles = 0;
+			let nbLoadedFgTiles = 0;
+
+			const onSourceDataLoading = e => {
+				if(e.dataType === "source" && e.tile) {
+					if(e.sourceId.startsWith("geovisio")) {
+						nbFgTiles++;
+					}
+					else {
+						nbBgTiles++;
+					}
+				}
+			};
+			const onSourceData = e => {
+				if(e.dataType === "source" && e.tile) {
+					if(e.sourceId.startsWith("geovisio")) {
+						nbLoadedFgTiles++;
+						if(e.isSourceLoaded) { nbLoadedFgTiles = nbFgTiles; }
+					}
+					else {
+						nbLoadedBgTiles++;
+						if(e.isSourceLoaded) { nbLoadedBgTiles = nbBgTiles; }
+					}
+				}
+				checkEnoughLoaded();
+			};
+
+			const checkEnoughLoaded = () => {
+				if(nbLoadedBgTiles / nbBgTiles >= 0.75 && (nbFgTiles === 0 || nbLoadedFgTiles / nbFgTiles >= 0.75)) {
+					this.off("sourcedata", onSourceData);
+					this.off("sourcedataloading", onSourceDataLoading);
+					resolve();
+				}
+			};
+
+			this.on("sourcedataloading", onSourceDataLoading);
+			this.on("sourcedata", onSourceData);
+		});
+	}
+
+	/**
+	 * Sets map view based on returned API bbox (if no precise option given by user).
+	 * @private
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	_initMapPosition() {
+		if(
+			isNullCoordinates(this._options.center)
+			&& (!this._options.zoom || this._options.zoom === 0)
+			&& (!this._options.hash)
+		) {
+			this._parent.onceAPIReady().then(() => {
+				let bbox = this._parent?.api?.getDataBbox();
+				if(bbox) {
+					try {
+						// eslint-disable-next-line no-undef
+						bbox = new maplibregl.LngLatBounds(bbox);
+						if(this.loaded()) { this.fitBounds(bbox, { "animate": false }); }
+						else { this.waitForEnoughMapLoaded().then(() => this.fitBounds(bbox, { "animate": false })); }
+					}
+					catch(e) {
+						console.warn("Received invalid bbox: "+bbox);
+					}
+				}
+			});
+		}
+	}
+
+	/**
+	 * Adds a new source.
+	 * This is an override of MapLibre's function to catch sources missing in MapStyleComposer
+	 */
+	addSource(id, source) {
+		this._parent.mapStyleComposer.registerSource(id, source);
+		super.addSource(id, source);
+	}
+
+	/**
+	 * Adds a new map layer.
+	 * This is an override of MapLibre's function to catch layers missing in MapStyleComposer
+	 */
+	addLayer(layer, beforeId) {
+		this._parent.mapStyleComposer.registerLayer(layer, beforeId);
+		super.addLayer(layer, beforeId);
+	}
+
+	/**
+	 * Load markers into map for use in map layers.
+	 * @private
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	_loadMarkerImages() {
+		[
+			{ id: "pnx-marker", img: MarkerBaseSVG },
+		].forEach(m => {
+			const img = new Image(64, 64);
+			img.onload = () => this.addImage(m.id, img);
+			svgToImg(m.img, img);
+		});
+	}
+
+	/**
+	 * Is Quality Score available in vector tiles ?
+	 * @private
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	_hasQualityScore() {
+		const fields = this.getStyle()?.metadata?.["panoramax:fields"] || {};
+		return fields?.pictures?.includes("gps_accuracy") && fields?.pictures?.includes("h_pixel_density");
+	}
+
+	/**
+	 * Are 360/flat pictures stats available in vector tiles for grid layer ?
+	 * @private
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	_hasGridStats() {
+		const fields = this.getStyle()?.metadata?.["panoramax:fields"] || {};
+		return fields?.grid?.includes("nb_360_pictures") && fields?.grid?.includes("nb_flat_pictures")
+			&& fields?.grid?.includes("coef_360_pictures") && fields?.grid?.includes("coef_flat_pictures");
+	}
+
+	/**
+	 * Are specific 360/flat pictures stats available for logged-in users in vector tiles for grid layer ?
+	 * @private
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	_hasLoggedGridStats() {
+		const fields = this.getStyle()?.metadata?.["panoramax:fields"] || {};
+		return fields?.grid?.includes("logged_coef_360_pictures")
+			&& fields?.grid?.includes("logged_coef_flat_pictures")
+			&& fields?.grid?.includes("logged_coef");
+	}
+
+	/**
+	 * Force refresh of vector tiles data
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	reloadVectorTiles() {
+		if(!this._parent.mapStyleComposer?.layerRanges?.panoramax) { return; }
+
+		Object
+			.values(this._parent.mapStyleComposer.layerRanges.panoramax)
+			.forEach(p => {
+				Object.keys(p.sources).forEach(sid => {
+					const sm = this.getSource(sid);
+					if(sm) { sm.setTiles(sm.tiles); }
+				});
+			});
+	}
+
+	/**
+	 * Shows on map a picture position and heading.
+	 *
+	 * If no longitude & latitude are set, marker is removed from map.
+	 * @memberof Panoramax.components.ui.Map#
+	 * @param {number} lon The longitude
+	 * @param {number} lat The latitude
+	 * @param {number} heading The heading
+	 * @param {boolean} [skipCenter=false] Set to true to avoid map centering on marker
+	 * @param {string} [picId=null] The picture Id
+	 */
+	displayPictureMarker(lon, lat, heading, skipCenter = false, picId = null) {
+		this._picMarkerPreview.remove();
+
+		// Show marker corresponding to selection
+		if(lon !== undefined && lat !== undefined) {
+			this._picMarker
+				.setLngLat([lon, lat])
+				.setRotation(heading)
+				.addTo(this);
+			this._picMarker.picId = picId ;
+		}
+		else {
+			this._picMarker.remove();
+		}
+
+		// Update map style to see selected sequence
+		this._parent.mapStyleComposer.updateMapStyle();
+
+		// Move map to picture coordinates
+		if(!skipCenter && lon !== undefined && lat !== undefined) {
+			this.jumpTo({ // No animation to avoid conflict on seq=* load
+				center: [lon, lat],
+				zoom: this.getZoom() < TILES_PICTURES_ZOOM+2 ? TILES_PICTURES_ZOOM+2 : this.getZoom(),
+			});
+		}
+	}
+
+	/** @private */
+	_onPanoramaxChanged() {
+		const msc = this._parent.mapStyleComposer;
+		const picLayerId = msc.layerRanges.panoramax[msc.panoramax].layers.find(l => l.id.endsWith("_pictures"))?.id;
+		const seqPlusLayerId = msc.layerRanges.panoramax[msc.panoramax].layers.find(l => l.id.endsWith("_sequences_plus"))?.id;
+		const gridLayerId = msc.layerRanges.panoramax[msc.panoramax].layers.find(l => l.id.endsWith("_grid"))?.id;
+		if(!picLayerId || !seqPlusLayerId) { console.error("Panoramax source not loaded"); }
+
+		// Pictures
+		this.on("mousemove", picLayerId, e => {
+			this.getCanvas().style.cursor = "pointer";
+			const eCopy = Object.assign({}, e);
+			this._attachPreviewToPictures(eCopy, picLayerId);
+		});
+
+		this.on("mouseleave", picLayerId, () => {
+			this.getCanvas().style.cursor = "";
+		});
+
+		this.on("click", picLayerId, this._onPictureClick.bind(this));
+
+		// Sequences
+		this.on("mousemove", seqPlusLayerId, e => {
+			if(this.getZoom() >=  TILES_PICTURES_ZOOM) { return; }
+			this._onSequenceHover(e);
+			this.getCanvas().style.cursor = "pointer";
+			if(e.features[0].properties.id) {
+				const eCopy = Object.assign({}, e);
+				this._attachPreviewToPictures(eCopy, seqPlusLayerId);
+			}
+		});
+
+		this.on("mouseleave", seqPlusLayerId, () => {
+			this.getCanvas().style.cursor = "";
+			this._dropPreview(true);
+		});
+
+		this.on("click", seqPlusLayerId, e => {
+			e.preventDefault();
+			this._onSequenceClick(e);
+		});
+
+		// Grid
+		if(gridLayerId) {
+			this.on("mousemove", gridLayerId, e => {
+				if(this.getZoom() <= TILES_PICTURES_ZOOM+1) {
+					this.getCanvas().style.cursor = "pointer";
+					const eCopy = Object.assign({}, e);
+					this._attachPreviewToPictures(eCopy, gridLayerId);
+				}
+			});
+
+			this.on("mouseleave", gridLayerId, () => {
+				this._dropPreview();
+				this.getCanvas().style.cursor = "";
+			});
+
+			this.on("click", gridLayerId, e => {
+				e.preventDefault();
+				this.flyTo({ center: e.lngLat, zoom: TILES_PICTURES_ZOOM-6 });
+			});
+		}
+	}
+
+	/**
+	 * Creates popup manager for preview of pictures.
+	 * @private
+	 * @param {object} e The event thrown by MapLibre
+	 * @param {string} from The event source layer
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	_attachPreviewToPictures(e, from) {
+		let f = e.features.pop();
+		// eslint-disable-next-line eqeqeq
+		if(!f || f.properties.id == this._picPopup._picId) { return; }
+
+		clearTimeout(this._picPreviewTimer);
+		clearTimeout(this._picDropPreviewTimer);
+		this._picPopup._loading = f.properties.id;
+		this._picPopup._picId = f.properties.id;
+		delete this._picPopup._seqId;
+
+		if(!e.lngLat) { e.lngLat = this.getCenter(); }
+
+
+		/*
+		 * Display picture preview marker
+		 */
+
+		let picPreview = null;
+		if(from.includes("_pictures") && f.geometry.type === "Point") { // From picture hover
+			picPreview = f;
+		}
+		else if(this.getZoom() < TILES_PICTURES_ZOOM && from.includes("_sequences") && f.geometry.type === "LineString") { // From sequence hover
+			// Look for nearest sequence point
+			let prevDist = null;
+			for(let i=0; i < f.geometry.coordinates.length; i++) {
+				// eslint-disable-next-line no-undef
+				let dist = e.lngLat.distanceTo(new maplibregl.LngLat(...f.geometry.coordinates[i]));
+				if(!prevDist || dist < prevDist) {
+					picPreview = {
+						type: "Feature",
+						geometry: { type: "Point", coordinates: f.geometry.coordinates[i] },
+						properties: {
+							first_sequence: f.properties.id,
+							collection: f.properties.id,
+						}
+					};
+					prevDist = dist;
+				}
+			}
+		}
+
+		if(picPreview && picPreview.properties.heading !== undefined) {
+			this._picPopup._seqId = picPreview.properties.first_sequence;
+			this._picMarkerPreview
+				.setLngLat?.(picPreview.geometry.coordinates)
+				.setRotation(picPreview.properties.heading || 0)
+				.addTo(this);
+		}
+		else { this._picMarkerPreview?.remove?.(); }
+
+
+		/*
+		 * Display thumbnail popup
+		 */
+
+		let thumbCoords = picPreview ? picPreview.geometry.coordinates : e.lngLat;
+		this._picPopup
+			.setLngLat(thumbCoords)
+			.addTo(this);
+
+		// Only show GIF loader if thumbnail is not in browser cache
+		if(!picPreview && !this._picThumbUrl[f.properties.id]) {
+			this._picPopup.setDOMContent(getThumbGif(this._parent._t));
+		}
+
+		const displayThumb = thumbUrl => {
+			if(this._picPopup._loading === f.properties.id) {
+				if(thumbUrl) {
+					let content = document.createElement("img");
+					content.classList.add("pnx-map-thumb");
+					content.alt = this._parent._t.map.thumbnail;
+					let img = new Image();
+					img.src = thumbUrl;
+
+					img.addEventListener("load", () => {
+						if(this._picPopup._loading !== f.properties.id) { return; }
+
+						if(f.properties.hidden) {
+							content.children[0].src = img.src;
+						}
+						else {
+							content.src = img.src;
+						}
+						this._picPopup.setDOMContent(content);
+						delete this._picPopup._loading;
+					});
+
+					if(f.properties.hidden) {
+						const legend = document.createElement("div");
+						legend.classList.add("pnx-map-thumb-legend");
+						legend.appendChild(document.createTextNode(this._parent._t.map.not_public));
+						const container = document.createElement("div");
+						container.appendChild(content);
+						container.appendChild(legend);
+						content = container;
+					}
+				}
+				else {
+					this._picPopup.remove();
+				}
+			}
+		};
+
+		if(this._picPopup._loading !== f.properties.id) { return; }
+
+		// Hover on cached thumbnail
+		if(this._picThumbUrl[picPreview?.properties?.id || f.properties.id]) {
+			displayThumb(this._picThumbUrl[picPreview?.properties?.id || f.properties.id]);
+		}
+		// Throttled call to API
+		else {
+			clearTimeout(this._picPreviewTimer);
+			this._picPreviewTimer = setTimeout(() => {
+				if(this._picPopup._loading !== f.properties.id) { return; }
+
+				// Hover on a single picture
+				if(picPreview) {
+					if(picPreview.properties.id) {
+						this._getPictureThumbURL(picPreview.properties.id, picPreview.properties.collection).then(displayThumb);
+					}
+					else {
+						this._getSequenceThumbURL(f.properties.collection, thumbCoords).then(displayThumb);
+					}
+				}
+				// Hover on a grid cell
+				else if(from.endsWith("_grid")) {
+					this._getThumbURL(thumbCoords).then(displayThumb);
+				}
+				// Hover on a sequence
+				else if(from.includes("_sequences")) {
+					this._getSequenceThumbURL(f.properties.id, thumbCoords).then(displayThumb);
+				}
+			}, 50);
+		}
+	}
+
+	/**
+	 * Get picture thumbnail URL at given coordinates
+	 *
+	 * @param {LngLat} coordinates The map coordinates
+	 * @returns {Promise} Promise resolving on picture thumbnail URL, or null on timeout
+	 * @private
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	_getThumbURL(coordinates) {
+		return this._parent.getAPI().getPicturesAroundCoordinates(coordinates.lat, coordinates.lng, 0.1, 1).then(res => {
+			const p = res?.features?.pop();
+			return p ? this._parent.getAPI().findThumbnailInPictureFeature(p) : null;
+		});
+	}
+
+
+	/**
+	 * Get picture thumbnail URL for a given sequence ID
+	 *
+	 * @param {string} seqId The sequence ID
+	 * @param {LngLat} [coordinates] The map coordinates
+	 * @returns {Promise} Promise resolving on picture thumbnail URL, or null on timeout
+	 * @private
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	_getSequenceThumbURL(seqId, coordinates) {
+		if(coordinates) {
+			return this._parent.getAPI().getPicturesAroundCoordinates(coordinates.lat || coordinates[1], coordinates.lng || coordinates[0], 1, 1, seqId)
+				.then(results => {
+					if(results?.features?.length > 0) {
+						return this._parent.getAPI().findThumbnailInPictureFeature(results.features[0]);
+					}
+					else {
+						return this._parent.getAPI().getPictureThumbnailURLForSequence(seqId);
+					}
+				});
+		}
+		else {
+			return this._parent.getAPI().getPictureThumbnailURLForSequence(seqId);
+		}
+	}
+
+	/**
+	 * Get picture thumbnail URL for a given picture ID.
+	 * It handles a client-side cache based on raw API responses.
+	 *
+	 * @param {string} picId The picture ID
+	 * @param {string} [seqId] The sequence ID (can speed up search if available)
+	 * @returns {Promise} Promise resolving on picture thumbnail URL, or null on timeout
+	 * @memberof Panoramax.components.ui.Map#
+	 * @private
+	 */
+	_getPictureThumbURL(picId, seqId) {
+		let res = Promise.resolve();
+
+		if(picId) {
+			if(this._picThumbUrl[picId] !== undefined) {
+				res = typeof this._picThumbUrl[picId] === "string" ? Promise.resolve(this._picThumbUrl[picId]) : this._picThumbUrl[picId];
+			}
+			else {
+				this._picThumbUrl[picId] = this._parent.getAPI().getPictureThumbnailURL(picId, seqId).then(url => {
+					if(url) {
+						this._picThumbUrl[picId] = url;
+						return url;
+					}
+					else {
+						this._picThumbUrl[picId] = null;
+						return null;
+					}
+				})
+					.catch(() => {
+						this._picThumbUrl[picId] = null;
+					});
+				res = this._picThumbUrl[picId];
+			}
+		}
+
+		return res;
+	}
+
+	/**
+	 * Create a ready-to-use picture marker
+	 *
+	 * @returns {maplibregl.Marker} The generated marker
+	 * @private
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	_getPictureMarker(selected = true) {
+		// eslint-disable-next-line no-undef
+		return new maplibregl.Marker({
+			element: svgToImg(selected ? MarkerSelectedSVG : MarkerBaseSVG),
+			picId: null
+		})
+			// Only picMarker could be draggable, don't for picMarkerPreview.
+			.setDraggable(selected && this._options.picMarkerDraggable)
+		;
+	}
+
+	/**
+	 * Event handler for sequence hover
+	 * @private
+	 * @param {object} e Event data
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	_onSequenceHover(e) {
+		e.preventDefault();
+		if(e.features.length > 0 && e.features[0].properties?.id) {
+			/**
+			 * Event when a sequence on map is hovered (not selected)
+			 *
+			 * @event Panoramax.components.ui.Map#sequence-hover
+			 * @type {maplibregl.util.evented.Event}
+			 * @property {string} seqId The hovered sequence ID
+			 */
+			this.fire("sequence-hover", { seqId: e.features[0].properties.id });
+		}
+	}
+
+	/**
+	 * Event handler for sequence click
+	 * @private
+	 * @param {object} e Event data
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	_onSequenceClick(e) {
+		e.preventDefault();
+		e.originalEvent.stopImmediatePropagation();
+
+		// Skip if pictures navigation is set to "pic"
+		if(this._parent.psv?.getPicturesNavigation() === "pic") {
+			return;
+		}
+
+		if(e.features.length > 0) {
+			let seq = e.features[0];
+
+			// If clicks on many sequences, prefer the one corresponding to picture thumbnail preview
+			if(e.features.length > 1 && this._picPopup._seqId) {
+				seq = e.features.find(s => s.properties.id === this._picPopup._seqId) || seq;
+			}
+
+			if(seq.properties?.id) {
+				/**
+				 * Event when a sequence on map is clicked
+				 * @event Panoramax.components.ui.Map#sequence-click
+				 * @type {maplibregl.util.evented.Event}
+				 * @property {string} seqId The clicked sequence ID
+				 * @property {maplibregl.LngLat} coordinates The coordinates of user click
+				 */
+				this.fire("sequence-click", {
+					seqId: seq.properties.id,
+					coordinates: e.lngLat
+				});
+			}
+		}
+	}
+
+	/**
+	 * Event handler for picture click
+	 * @private
+	 * @param {object} e Event data
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	_onPictureClick(e) {
+		e.preventDefault();
+		e.originalEvent.stopImmediatePropagation();
+
+		// Skip if pictures navigation is set to "pic"
+		if(this._parent.psv?.getPicturesNavigation() === "pic") {
+			return;
+		}
+
+		// Skip if click happens as well on a semantic layer
+		const features = this.queryRenderedFeatures(e.point);
+		if(features.length > 1) {
+			if(features.find(f => f?.source?.startsWith("sem-"))) { return; }
+		}
+
+		const f = e?.features?.length > 0 ? e.features[0] : null;
+		if(f?.properties?.id) {
+			// Look for a potential sequence ID
+			let seqId = null;
+			try {
+				if(f.properties.sequences) {
+					if(!Array.isArray(f.properties.sequences)) { f.properties.sequences = JSON.parse(f.properties.sequences); }
+					seqId = f.properties.sequences.pop();
+				}
+			}
+			catch(e) {
+				console.log("Sequence ID is not available in vector tiles for picture "+f.properties.id);
+			}
+
+			/**
+			 * Event when a picture on map is clicked
+			 *
+			 * @event Panoramax.components.ui.Map#picture-click
+			 * @type {maplibregl.util.evented.Event}
+			 * @property {string} picId The clicked picture ID
+			 * @property {string} seqId The clicked picture's sequence ID
+			 * @property {object} feature The GeoJSON feature of the picture
+			 */
+			this.fire("picture-click", {
+				picId: f.properties.id,
+				seqId,
+				feature: f
+			});
+		}
+	}
+
+	/**
+	 * Listen to map events.
+	 * This is a binder to [`on`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#on) and [`once`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#once) MapLibre GL functions.
+	 * @param {string} type The event type to listen for
+	 * @param {function} listener The event handler
+	 * @param {boolean} [options.once=false] Set to true to only listen to first event.
+	 * @memberof Panoramax.components.ui.Map#
+	 */
+	addEventListener(type, listener, options = {}) {
+		if(options?.once) { this.once(type, listener); }
+		else { this.on(type, listener); }
+	}
+}