@panoramax/web-viewer 3.2.3 → 4.0.0-develop-9f9cf858

package/src/components/{Map.js → ui/Map.js}

@@ -1,14 +1,13 @@
 import "./Map.css";
 import {
-	forwardGeocodingBAN, forwardGeocodingNominatim, VECTOR_STYLES,
-	TILES_PICTURES_ZOOM, getThumbGif, RASTER_LAYER_ID, combineStyles,
-	getMissingLayerStyles, isLabelLayer, getUserLayerId, getUserSourceId, switchCoefValue,
-} from "../utils/Map";
-import { COLORS } from "../utils/Utils";
-import MarkerBaseSVG from "../img/marker.svg";
-import MarkerSelectedSVG from "../img/marker_blue.svg";
-import ArrowFlatSVG from "../img/arrow_flat.svg";
-import Arrow360SVG from "../img/arrow_360.svg";
+	VECTOR_STYLES, TILES_PICTURES_ZOOM, getThumbGif, RASTER_LAYER_ID, combineStyles,
+	getMissingLayerStyles, isLabelLayer, getUserLayerId, getUserSourceId,
+} from "../../utils/map";
+import { COLORS } from "../../utils/utils";
+import MarkerBaseSVG from "../../img/marker.svg";
+import MarkerSelectedSVG from "../../img/marker_blue.svg";
+import ArrowFlatSVG from "../../img/arrow_flat.svg";
+import Arrow360SVG from "../../img/arrow_360.svg";
 
 // MapLibre imports
 import "maplibre-gl/dist/maplibre-gl.css";
@@ -18,33 +17,34 @@ import * as pmtiles from "pmtiles";
 maplibregl.workerClass = maplibreglWorker;
 maplibregl.addProtocol("pmtiles", new pmtiles.Protocol().tile);
 
-const MAPLIBRE_OPTIONS = [	// No "style" option as it's handled by combineStyles function
-	"antialias", "attributionControl", "bearing", "bearingSnap", "bounds",
-	"boxZoom", "center", "clickTolerance", "collectResourceTiming",
-	"cooperativeGestures", "crossSourceCollisions", "doubleClickZoom", "dragPan",
-	"dragRotate", "fadeDuration", "failIfMajorPerformanceCaveat", "fitBoundsOptions",
-	"hash", "interactive", "keyboard", "localIdeographFontFamily", "locale", "logoPosition",
-	"maplibreLogo", "maxBounds", "maxCanvasSize", "maxPitch", "maxTileCacheSize",
-	"maxTileCacheZoomLevels", "maxZoom", "minPitch", "minZoom", "pitch", "pitchWithRotate",
-	"pixelRatio", "preserveDrawingBuffer", "refreshExpiredTiles", "renderWorldCopies",
-	"scrollZoom", "touchPitch", "touchZoomRotate", "trackResize",
-	"transformCameraUpdate", "transformRequest", "validateStyle", "zoom"
-];
-const filterMapLibreOptions = opts => Object.fromEntries(Object.entries(opts).filter(([key]) => MAPLIBRE_OPTIONS.includes(key)));
-
 
 /**
  * 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.
  * 
- * @param {CoreView} parent The parent view
+ * A more complete version of Map (with filters & themes) is available through [MapMore class](#Panoramax.components.ui.MapMore)
+ * 
+ * ⚠️ 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/map/#map-parameters) or any supplementary option defined here)
+ * @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 {string} [options.background] Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
- * @param {object} [options.geocoder] Optional geocoder settings
- * @param {string} [options.geocoder.engine] Set the geocoder engine to use (nominatim, ban)
+ * @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.
+ * @fires Panoramax.components.ui.Map#background-changed
+ * @fires Panoramax.components.ui.Map#users-changed
+ * @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}});
  */
 export default class Map extends maplibregl.Map {
 	constructor(parent, container, options = {}) {
@@ -59,16 +59,20 @@ export default class Map extends maplibregl.Map {
 			pitchWithRotate: false,
 			touchZoomRotate: true,
 			touchPitch: false,
-			preserveDrawingBuffer: !parent.isWidthSmall(),
-			transformRequest: parent._api._getMapRequestTransform(),
+			doubleClickZoom: false,
+			canvasContextAttributes: {
+				preserveDrawingBuffer: !parent.isWidthSmall(),
+			},
+			transformRequest: parent.api._getMapRequestTransform(),
 			locale: parent._t.maplibre,
-			...filterMapLibreOptions(options)
+			hash: false,
+			...options
 		});
 		this._loadMarkerImages();
 
 		this._parent = parent;
 		this._options = options;
-		this.getContainer().classList.add("gvs-map");
+		this.getContainer().classList.add("pnx-map");
 
 		// Disable touch rotate
 		if(options.touchZoomRotate === undefined) {
@@ -80,10 +84,9 @@ export default class Map extends maplibregl.Map {
 			this._options.background = this._options.background || "streets";
 		}
 
-		this._attribution = new maplibregl.AttributionControl({ compact: false });
+		this._attribution = new maplibregl.AttributionControl({ compact: false, ...options.attributionControl });
 		this.addControl(this._attribution);
 
-		this._initGeocoder();
 		this._initMapPosition();
 
 		// Widgets and markers
@@ -97,16 +100,16 @@ export default class Map extends maplibregl.Map {
 		// Sequences and pictures per users
 		this._userLayers = new Set();
 
-		// Hover event
-		this.on("mousemove", "sequences", this._onSequenceHover.bind(this));
-
 		// Parent selection
 		this._parent.addEventListener("select", this.reloadLayersStyles.bind(this));
 
 		// Timeout for initial loading
 		setTimeout(() => {
-			if(!this.loaded() && this._parent._loader.isVisible()) {
-				this._parent._loader.dismiss({}, this._parent._t.map.slow_loading, () => {});
+			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);
 
@@ -118,12 +121,21 @@ export default class Map extends maplibregl.Map {
 	 */
 	async _postLoad() {
 		this.resize();
-		await this.setVisibleUsers(this._parent._options.users);
+		await this.setVisibleUsers(this._parent.users);
 		this.reloadLayersStyles();
+
+		/**
+		 * 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");
 	}
 
 	/**
 	 * Destroy any form of life in this component
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	destroy() {
 		this.remove();
@@ -140,6 +152,7 @@ export default class Map extends maplibregl.Map {
 	/**
 	 * 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) => {
@@ -173,7 +186,7 @@ export default class Map extends maplibregl.Map {
 			};
 
 			const checkEnoughLoaded = () => {
-				if(nbLoadedBgTiles / nbBgTiles >= 0.75 && nbLoadedFgTiles / nbFgTiles >= 0.75) {
+				if(nbLoadedBgTiles / nbBgTiles >= 0.75 && (nbFgTiles === 0 || nbLoadedFgTiles / nbFgTiles >= 0.75)) {
 					this.off("sourcedata", onSourceData);
 					this.off("sourcedataloading", onSourceDataLoading);
 					resolve();
@@ -188,6 +201,7 @@ export default class Map extends maplibregl.Map {
 	/**
 	 * Sets map view based on returned API bbox (if no precise option given by user).
 	 * @private
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	_initMapPosition() {
 		if(
@@ -195,8 +209,8 @@ export default class Map extends maplibregl.Map {
 			&& (!this._options.zoom || this._options.zoom === 0)
 			&& (!this._options.hash)
 		) {
-			this._parent._api.onceReady().then(() => {
-				let bbox = this._parent?._api?.getDataBbox();
+			this._parent.onceAPIReady().then(() => {
+				let bbox = this._parent?.api?.getDataBbox();
 				if(bbox) {
 					try {
 						bbox = new maplibregl.LngLatBounds(bbox);
@@ -211,35 +225,16 @@ export default class Map extends maplibregl.Map {
 		}
 	}
 
-	/**
-	 * Creates the geocoder search bar
-	 * @private
-	 */
-	_initGeocoder() {
-		const engines = { "ban": forwardGeocodingBAN, "nominatim": forwardGeocodingNominatim };
-		const engine = this._options?.geocoder?.engine || "nominatim";
-		this.geocoder = engines[engine];
-		this._geolocate = new maplibregl.GeolocateControl({
-			positionOptions: {
-				enableHighAccuracy: true,
-				timeout: 60000, // Max 1 minute for first position
-				maximumAge: 300000, // Accepts 5 minutes old position
-			},
-			showAccuracyCircle: true,
-			showUserLocation: true,
-			trackUserLocation: true,
-		}).onAdd(this);
-	}
-
 	/**
 	 * Load markers into map for use in map layers.
 	 * @private
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	_loadMarkerImages() {
 		[
-			{ id: "gvs-marker", img: MarkerBaseSVG },
-			{ id: "gvs-arrow-flat", img: ArrowFlatSVG },
-			{ id: "gvs-arrow-360", img: Arrow360SVG },
+			{ id: "pnx-marker", img: MarkerBaseSVG },
+			{ id: "pnx-arrow-flat", img: ArrowFlatSVG },
+			{ id: "pnx-arrow-360", img: Arrow360SVG },
 		].forEach(m => {
 			const img = new Image(64, 64);
 			img.onload = () => this.addImage(m.id, img);
@@ -250,6 +245,7 @@ export default class Map extends maplibregl.Map {
 	/**
 	 * Is Quality Score available in vector tiles ?
 	 * @private
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	_hasQualityScore() {
 		const fields = this.getStyle()?.metadata?.["panoramax:fields"] || {};
@@ -259,6 +255,7 @@ export default class Map extends maplibregl.Map {
 	/**
 	 * 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"] || {};
@@ -268,6 +265,7 @@ export default class Map extends maplibregl.Map {
 
 	/**
 	 * Force refresh of vector tiles data
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	reloadVectorTiles() {
 		[...this._userLayers].forEach(dl => {
@@ -279,6 +277,7 @@ export default class Map extends maplibregl.Map {
 	/**
 	 * Check if map offers aerial imagery as well as streets rendering.
 	 * @returns {boolean} True if aerial imagery is available for display
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	hasTwoBackgrounds() {
 		return this.getLayer(RASTER_LAYER_ID) !== undefined;
@@ -287,6 +286,7 @@ export default class Map extends maplibregl.Map {
 	/**
 	 * Get the currently selected map background
 	 * @returns {string} aerial or streets
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	getBackground() {
 		if(!this.getLayer(RASTER_LAYER_ID)) {
@@ -300,6 +300,8 @@ export default class Map extends maplibregl.Map {
 	/**
 	 * Change the shown background in map.
 	 * @param {string} bg The new background to display (aerial or streets)
+	 * @memberof Panoramax.components.ui.Map#
+	 * @throws {Error} If not aerial imagery is available
 	 */
 	setBackground(bg) {
 		if(!this.getLayer(RASTER_LAYER_ID) && bg === "aerial") { throw new Error("No aerial imagery available"); }
@@ -309,20 +311,18 @@ export default class Map extends maplibregl.Map {
 			/**
 			 * Event for map background changes
 			 *
-			 * @event map:background-changed
-			 * @memberof CoreView
-			 * @type {object}
-			 * @property {object} detail Event information
-			 * @property {string} [detail.background] The new selected background (aerial, streets)
+			 * @event Panoramax.components.ui.Map#background-changed
+			 * @type {maplibregl.util.evented.Event}
+			 * @property {string} [background] The new selected background (aerial, streets)
 			 */
-			const event = new CustomEvent("map:background-changed", { detail: { background: bg || "streets" }});
-			this._parent.dispatchEvent(event);
+			this.fire("background-changed", { background: bg || "streets" });
 		}
 	}
 
 	/**
 	 * Get the currently visible users
 	 * @returns {string[]} List of visible users
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	getVisibleUsers() {
 		return [...this._userLayers].filter(l => (
@@ -332,11 +332,12 @@ export default class Map extends maplibregl.Map {
 
 	/**
 	 * Make given user layers visible on map, and hide all others (if any)
-	 * 
+	 * @memberof Panoramax.components.ui.Map#
 	 * @param {string|string[]} visibleIds The user layers IDs to display
 	 */
 	async setVisibleUsers(visibleIds = []) {
 		if(typeof visibleIds === "string") { visibleIds = [visibleIds]; }
+		else if(visibleIds === null) { visibleIds = []; }
 
 		// Create any missing user layer
 		await Promise.all(
@@ -359,20 +360,18 @@ export default class Map extends maplibregl.Map {
 		/**
 		 * Event for visible users changes
 		 *
-		 * @event map:users-changed
-		 * @memberof CoreView
-		 * @type {object}
-		 * @property {object} detail Event information
-		 * @property {string[]} [detail.usersIds] The list of newly selected users
+		 * @event Panoramax.components.ui.Map#users-changed
+		 * @type {maplibregl.util.evented.Event}
+		 * @property {string[]} [usersIds] The list of newly selected users
 		 */
-		const event = new CustomEvent("map:users-changed", { detail: { usersIds: visibleIds }});
-		this._parent.dispatchEvent(event);
+		this.fire("users-changed", { usersIds: visibleIds });
 	}
 
 	/**
 	 * Filter the visible data content in all visible map layers
 	 * @param {string} dataType sequences or pictures
 	 * @param {object} filter The MapLibre GL filter rule to apply
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	filterUserLayersContent(dataType, filter) {
 		[...this._userLayers].forEach(l => {
@@ -388,12 +387,13 @@ export default class Map extends maplibregl.Map {
 
 	/**
 	 * Shows on map a picture position and heading.
-	 * 
+	 * @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
 	 */
-	displayPictureMarker(lon, lat, heading) {
+	displayPictureMarker(lon, lat, heading, skipCenter = false) {
 		this._picMarkerPreview.remove();
 
 		// Show marker corresponding to selection
@@ -411,7 +411,7 @@ export default class Map extends maplibregl.Map {
 		this.reloadLayersStyles();
 
 		// Move map to picture coordinates
-		if(lon !== undefined && lat !== undefined) {
+		if(!skipCenter && lon !== undefined && lat !== undefined) {
 			this.flyTo({
 				center: [lon, lat],
 				zoom: this.getZoom() < TILES_PICTURES_ZOOM+2 ? TILES_PICTURES_ZOOM+2 : this.getZoom(),
@@ -423,6 +423,7 @@ export default class Map extends maplibregl.Map {
 	/**
 	 * Forces reload of pictures/sequences layer styles.
 	 * This is useful after a map theme change.
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	reloadLayersStyles() {
 		const updateStyle = (layer, style) => {
@@ -438,30 +439,12 @@ export default class Map extends maplibregl.Map {
 		["pictures", "pictures_symbols", "sequences"].forEach(l => {
 			updateStyle(l, this._getLayerStyleProperties(l));
 		});
-
-		// Also handle the grid stats
-		if(this._hasGridStats() && this._parent?._mapFilters) {
-			let newType = "coef";
-			if(this._parent._mapFilters?.type) {
-				newType = this._parent._mapFilters.type == "flat" ? "coef_flat_pictures" : "coef_360_pictures";
-			}
-			this.getStyle().layers
-				.filter(l => l.id.endsWith("_grid"))
-				.forEach(l => {
-					const newl = switchCoefValue(l, newType);
-					for(let p in newl.layout) {
-						this.setLayoutProperty(l.id, p, newl.layout[p]);
-					}
-					for(let p in newl.paint) {
-						this.setPaintProperty(l.id, p, newl.paint[p]);
-					}
-				});
-		}
 	}
 
 	/**
 	 * Creates source and layers for pictures and sequences.
 	 * @private
+	 * @memberof Panoramax.components.ui.Map#
 	 * @param {string} id The source and layer ID prefix
 	 */
 	async _createPicturesTilesLayer(id) {
@@ -470,7 +453,7 @@ export default class Map extends maplibregl.Map {
 
 		// Load style from API
 		if(id !== "geovisio" && !this.getSource(`geovisio_${id}`)) {
-			const style = await this._parent._api.getUserMapStyle(id);
+			const style = await this._parent.api.getUserMapStyle(id);
 			Object.entries(style.sources).forEach(([sId, s]) => this.addSource(sId, s));
 			style.layers = style.layers || [];
 			const layers = style.layers.concat(getMissingLayerStyles(style.sources, style.layers));
@@ -511,6 +494,7 @@ export default class Map extends maplibregl.Map {
 		// Sequences
 		const seqPlusLayerId = getUserLayerId(id, "sequences_plus");
 		this.on("mousemove", seqPlusLayerId, e => {
+			this._onSequenceHover(e);
 			if(this.getZoom() <= TILES_PICTURES_ZOOM+1) {
 				this.getCanvas().style.cursor = "pointer";
 				if(e.features[0].properties.id) {
@@ -580,6 +564,7 @@ export default class Map extends maplibregl.Map {
 	 *
 	 * @returns {object} Paint/layout properties
 	 * @private
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	_getLayerStyleProperties(layer) {
 		if(layer === "pictures_symbols") {
@@ -587,9 +572,9 @@ export default class Map extends maplibregl.Map {
 				"paint": {},
 				"layout": {
 					"icon-image": ["case",
-						["==", ["get", "id"], this._parent._selectedPicId], "",
-						["==", ["get", "type"], "equirectangular"], "gvs-arrow-360",
-						"gvs-arrow-flat"
+						["==", ["get", "id"], this._parent.picture], "",
+						["==", ["get", "type"], "equirectangular"], "pnx-arrow-360",
+						"pnx-arrow-flat"
 					],
 					"symbol-sort-key": this._getLayerSortStyle(layer),
 				},
@@ -614,6 +599,7 @@ export default class Map extends maplibregl.Map {
 	/**
 	 * Retrieve map layer color scheme according to selected theme.
 	 * @private
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	_getLayerColorStyle(layer) {
 		// Hidden style
@@ -623,7 +609,7 @@ export default class Map extends maplibregl.Map {
 		];
 
 		// Selected sequence style
-		const seqId = this._parent._selectedSeqId;
+		const seqId = this._parent.sequence;
 		if(layer == "sequences" && seqId) {
 			s.push(["==", ["get", "id"], seqId], COLORS.SELECTED);
 		}
@@ -640,6 +626,7 @@ export default class Map extends maplibregl.Map {
 	/**
 	 * Retrieve map sort key according to selected theme.
 	 * @private
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	_getLayerSortStyle(layer) {
 		// Values
@@ -654,7 +641,7 @@ export default class Map extends maplibregl.Map {
 		];
 
 		// Selected sequence style
-		const seqId = this._parent._selectedSeqId;
+		const seqId = this._parent.sequence;
 		if(layer == "sequences" && seqId) {
 			s.push(["==", ["get", "id"], seqId], 100);
 		}
@@ -671,6 +658,7 @@ export default class Map extends maplibregl.Map {
 	 * @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();
@@ -720,7 +708,7 @@ export default class Map extends maplibregl.Map {
 
 				if(thumbUrl) {
 					let content = document.createElement("img");
-					content.classList.add("gvs-map-thumb");
+					content.classList.add("pnx-map-thumb");
 					content.alt = this._parent._t.map.thumbnail;
 					let img = new Image();
 					img.src = thumbUrl;
@@ -737,7 +725,7 @@ export default class Map extends maplibregl.Map {
 
 					if(f.properties.hidden) {
 						const legend = document.createElement("div");
-						legend.classList.add("gvs-map-thumb-legend");
+						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);
@@ -772,11 +760,12 @@ export default class Map extends maplibregl.Map {
 	 * @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._api.getPicturesAroundCoordinates(coordinates[1], coordinates[0], 0.1, 1).then(res => {
+		return this._parent.api.getPicturesAroundCoordinates(coordinates[1], coordinates[0], 0.1, 1).then(res => {
 			const p = res?.features?.pop();
-			return p ? this._parent._api.findThumbnailInPictureFeature(p) : null;
+			return p ? this._parent.api.findThumbnailInPictureFeature(p) : null;
 		});
 	}
 	
@@ -788,21 +777,22 @@ export default class Map extends maplibregl.Map {
 	 * @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._api.getPicturesAroundCoordinates(coordinates.lat, coordinates.lng, 1, 1, seqId)
+			return this._parent.api.getPicturesAroundCoordinates(coordinates.lat, coordinates.lng, 1, 1, seqId)
 				.then(results => {
 					if(results?.features?.length > 0) {
-						return this._parent._api.findThumbnailInPictureFeature(results.features[0]);
+						return this._parent.api.findThumbnailInPictureFeature(results.features[0]);
 					}
 					else {
-						return this._parent._api.getPictureThumbnailURLForSequence(seqId);
+						return this._parent.api.getPictureThumbnailURLForSequence(seqId);
 					}
 				});
 		}
 		else {
-			return this._parent._api.getPictureThumbnailURLForSequence(seqId);
+			return this._parent.api.getPictureThumbnailURLForSequence(seqId);
 		}
 	}
 
@@ -813,7 +803,7 @@ export default class Map extends maplibregl.Map {
 	 * @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) {
@@ -824,7 +814,7 @@ export default class Map extends maplibregl.Map {
 				res = typeof this._picThumbUrl[picId] === "string" ? Promise.resolve(this._picThumbUrl[picId]) : this._picThumbUrl[picId];
 			}
 			else {
-				this._picThumbUrl[picId] = this._parent._api.getPictureThumbnailURL(picId, seqId).then(url => {
+				this._picThumbUrl[picId] = this._parent.api.getPictureThumbnailURL(picId, seqId).then(url => {
 					if(url) {
 						this._picThumbUrl[picId] = url;
 						return url;
@@ -849,6 +839,7 @@ export default class Map extends maplibregl.Map {
 	 *
 	 * @returns {maplibregl.Marker} The generated marker
 	 * @private
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	_getPictureMarker(selected = true) {
 		const img = document.createElement("img");
@@ -863,6 +854,7 @@ export default class Map extends maplibregl.Map {
 	 * Event handler for sequence hover
 	 * @private
 	 * @param {object} e Event data
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	_onSequenceHover(e) {
 		e.preventDefault();
@@ -870,17 +862,11 @@ export default class Map extends maplibregl.Map {
 			/**
 			 * Event when a sequence on map is hovered (not selected)
 			 *
-			 * @event map:sequence-hover
-			 * @memberof CoreView
-			 * @type {object}
-			 * @property {object} detail Event information
-			 * @property {string} detail.seqId The hovered sequence ID
+			 * @event Panoramax.components.ui.Map#sequence-hover
+			 * @type {maplibregl.util.evented.Event}
+			 * @property {string} seqId The hovered sequence ID
 			 */
-			this._parent.dispatchEvent(new CustomEvent("map:sequence-hover", {
-				detail: {
-					seqId: e.features[0].properties.id
-				}
-			}));
+			this.fire("sequence-hover", { seqId: e.features[0].properties.id });
 		}
 	}
 
@@ -888,26 +874,22 @@ export default class Map extends maplibregl.Map {
 	 * Event handler for sequence click
 	 * @private
 	 * @param {object} e Event data
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	_onSequenceClick(e) {
 		e.preventDefault();
 		if(e.features.length > 0 && e.features[0].properties?.id) {
 			/**
 			 * Event when a sequence on map is clicked
-			 *
-			 * @event map:sequence-click
-			 * @memberof CoreView
-			 * @type {object}
-			 * @property {object} detail Event information
-			 * @property {string} detail.seqId The clicked sequence ID
-			 * @property {maplibregl.LngLat} detail.coordinates The coordinates of user click
+			 * @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._parent.dispatchEvent(new CustomEvent("map:sequence-click", {
-				detail: {
-					seqId: e.features[0].properties.id,
-					coordinates: e.lngLat
-				}
-			}));
+			this.fire("sequence-click", {
+				seqId: e.features[0].properties.id,
+				coordinates: e.lngLat
+			});
 		}
 	}
 
@@ -915,6 +897,7 @@ export default class Map extends maplibregl.Map {
 	 * Event handler for picture click
 	 * @private
 	 * @param {object} e Event data
+	 * @memberof Panoramax.components.ui.Map#
 	 */
 	_onPictureClick(e) {
 		e.preventDefault();
@@ -935,21 +918,30 @@ export default class Map extends maplibregl.Map {
 			/**
 			 * Event when a picture on map is clicked
 			 *
-			 * @event map:picture-click
-			 * @memberof CoreView
-			 * @type {object}
-			 * @property {object} detail Event information
-			 * @property {string} detail.picId The clicked picture ID
-			 * @property {string} detail.seqId The clicked picture's sequence ID
-			 * @property {object} detail.feature The GeoJSON feature of the picture
+			 * @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._parent.dispatchEvent(new CustomEvent("map:picture-click", {
-				detail: {
-					picId: f.properties.id,
-					seqId,
-					feature: f
-				}
-			}));
+			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); }
+	}
 }