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

package/build/utils/MapStyleComposer.js

@@ -1,889 +0,0 @@
-import {
-	MAP_EXPR_QUALITYSCORE, MAP_EXPR_QUALITYSCORE_GPS, MAP_THEMES_STYLES, RASTER_LAYER_ID,
-	TILES_PICTURES_ZOOM, getPanoramaxLayers, hasStyleLoggedGridStats,
-	isLabelLayer, isPanoramaxEndpointSingleUser, switchCoefValue,
-} from "./map.js";
-import { autoDetectLocale } from "./i18n.js";
-import { COLORS, getUserAccount } from "./utils.js";
-
-export const BASEMAPS_DEFAULT_IDS = ["streets", "aerial"];
-
-/**
- * Map Style Composer allows an easy management of MapLibre styles.
- * As Panoramax Viewer composes with many sources and layers, it's helpful.
- * There are several "Layer Ranges" (from bottom to top):
- *   - Basemap: contextual background, either raster of vector
- *   - Data Underlay: vector data below Panoramax data (indoor maps)
- *   - Panoramax: pictures, sequences, grid statistics
- *   - Data Overlay: vector data on top of Panoramax data (traffic signs...)
- * The composer offers helpers to switch between any layer in a specific range.
- * @class Panoramax.utils.MapStyleComposer
- * @param {Panoramax.components.core.basic} parent The parent view
- * @property {string} basemap The selected basemap
- * @property {Set} dataUnderlays The visible data underlays
- * @property {string} panoramax The selected Panoramax endpoint
- * @property {Set} dataOverlays The visible data overlays
- * @fires Panoramax.utils.MapStyleComposer#basemap-added
- * @fires Panoramax.utils.MapStyleComposer#basemap-changed
- * @fires Panoramax.utils.MapStyleComposer#dataunderlay-added
- * @fires Panoramax.utils.MapStyleComposer#dataunderlay-changed
- * @fires Panoramax.utils.MapStyleComposer#panoramax-added
- * @fires Panoramax.utils.MapStyleComposer#panoramax-changed
- * @fires Panoramax.utils.MapStyleComposer#theme-changed
- * @fires Panoramax.utils.MapStyleComposer#filters-changed
- * @fires Panoramax.utils.MapStyleComposer#dataoverlay-added
- * @fires Panoramax.utils.MapStyleComposer#dataoverlay-changed
- * @example
- * const msc = new Panoramax.utils.MapStyleComposer(viewer)
- */
-export default class MapStyleComposer extends EventTarget {
-	constructor(parent) {
-		super();
-
-		this._parent = parent;
-		this.map = null;
-		this._mapUpdateDebounce = null;
-
-		// Layers range storage
-		this.layerRanges = {
-			basemaps: {},
-			dataUnderlays: {},
-			panoramax: {},
-			dataOverlays: {}
-		};
-
-		// Selected/visible layers
-		this.basemap = null;
-		this.dataUnderlays = new Set();
-		this.panoramax = null;
-		this.dataOverlays = new Set();
-
-		// Detached sources = for layers not passing through MapStyleComposer
-		this.detachedSources = {};
-
-		// Panoramax themes & filters
-		this.panoramaxTheme = MAP_THEMES_STYLES.default.id;
-		this.panoramaxFilters = {};
-	}
-
-	/**
-	 * Gives MapLibre JSON style to pass to Map constructor or setStyle function.
-	 * This gives ready-to-use sources and layers.
-	 * @returns {object} The MapLibre style object
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	getMapStyle() {
-		let sources = {};
-		let layers = [];
-		let labelLayers = [];
-		let metadata = {};
-		let sprite = [];
-
-		// Helper to register layers split into classic/labels
-		const preserveFilters = ll => {
-			if(this.map) {
-				(ll || [])
-					.filter(l => this.map.getLayer(l.id))
-					.forEach(l => {
-						const f = this.map.getFilter(l.id);
-						if(f) { l.filter = f; }
-					});
-			}
-			return ll;
-		};
-		const addLayers = ll => {
-			(ll || []).forEach(l => {
-				if(isLabelLayer(l)) { labelLayers.push(l); }
-				else { layers.push(l); }
-			});
-		};
-		const addSprite = (s, id) => {
-			if(Array.isArray(s)) {
-				sprite = sprite.concat(s);
-			}
-			// eslint-disable-next-line eqeqeq
-			else if(typeof s === "object" && s != null) {
-				sprite.push(s);
-			}
-			else if(typeof s === "string") {
-				sprite.push({id, url: s});
-			}
-		};
-
-		// Detached sources
-		Object
-			.entries(this.detachedSources)
-			.forEach(([sid,s]) => sources[sid] = s);
-
-		// Basemap
-		if(this.basemap && this.layerRanges.basemaps[this.basemap]) {
-			sources = Object.assign(sources, this.layerRanges.basemaps[this.basemap].sources);
-			addLayers(this.layerRanges.basemaps[this.basemap].layers);
-			metadata = this.layerRanges.basemaps[this.basemap].metadata || {};
-			addSprite(this.layerRanges.basemaps[this.basemap].sprite, this.basemap);
-			if(!metadata?.["panoramax:locales"]) {
-				metadata["panoramax:locales"] = ["fr", "en", "de", "es", "ru", "pt", "zh", "hi", "latin"];
-			}
-		}
-
-		// Data underlays
-		[...this.dataUnderlays].forEach(did => {
-			if(this.layerRanges.dataUnderlays[did]) {
-				sources = Object.assign(sources, this.layerRanges.dataUnderlays[did].sources);
-				addLayers(preserveFilters(this.layerRanges.dataUnderlays[did].layers));
-				addSprite(this.layerRanges.dataUnderlays[did].sprite, did);
-			}
-		});
-
-		// Panoramax vector tile endpoint
-		if(this.panoramax && this.layerRanges.panoramax[this.panoramax]) {
-			metadata = Object.assign(metadata, this.layerRanges.panoramax[this.panoramax].metadata);
-			sources = Object.assign(sources, this.layerRanges.panoramax[this.panoramax].sources);
-			addSprite(this.layerRanges.panoramax[this.panoramax].sprite, this.panoramax);
-			let pnxLayers = this._applyPanoramaxThemeOnLayers(this.layerRanges.panoramax[this.panoramax]);
-			pnxLayers = this._applyPanoramaxFiltersOnLayers(pnxLayers);
-			addLayers(pnxLayers);
-		}
-
-		// Data overlays
-		[...this.dataOverlays].forEach(did => {
-			if(this.layerRanges.dataOverlays[did]) {
-				sources = Object.assign(sources, this.layerRanges.dataOverlays[did].sources);
-				addLayers(preserveFilters(this.layerRanges.dataOverlays[did].layers));
-				addSprite(this.layerRanges.dataOverlays[did].sprite, did);
-			}
-		});
-
-		// Override label layers to use preferred language
-		if(metadata["panoramax:locales"]) {
-			let prefLang = this._parent.lang || autoDetectLocale(metadata["panoramax:locales"], "latin");
-			if(prefLang.includes("-")) { prefLang = prefLang.split("-")[0]; }
-			if(prefLang.includes("_")) { prefLang = prefLang.split("_")[0]; }
-			labelLayers.forEach(l => {
-				if(l.layout["text-field"].includes("name:latin")) {
-					l.layout["text-field"] = [
-						"coalesce",
-						["get", `name:${prefLang}`],
-						["get", "name:latin"],
-						["get", "name"]
-					];
-				}
-			});
-		}
-
-		/*
-		 * Various fixes for background providers
-		 */
-
-		// OSMFR PMTiles (capital cities)
-		const citiesLayer = labelLayers.find(l => l.id === "place_label_city");
-		let capitalLayer = labelLayers.find(l => l.id === "place_label_capital");
-		if(citiesLayer && !capitalLayer) {
-			// Create capital layer from original city style
-			citiesLayer.paint = {
-				"text-color": "hsl(0, 0%, 0%)",
-				"text-halo-blur": 0,
-				"text-halo-color": "hsla(0, 0%, 100%, 1)",
-				"text-halo-width": 3,
-			};
-			citiesLayer.layout["text-letter-spacing"] = 0.1;
-			capitalLayer = JSON.parse(JSON.stringify(citiesLayer));
-			capitalLayer.id = "place_label_capital";
-			capitalLayer.filter = capitalLayer.filter.filter(f => !(f[0] === ">" && f[1] === "capital"));
-			capitalLayer.filter.push(["<=", "capital", 2]);
-
-			// Edit original city to make it less important
-			if(!citiesLayer.filter.find(f => f[0] === ">" && f[1] === "capital")) {
-				citiesLayer.filter.push([">", "capital", 2]);
-			}
-			labelLayers.push(capitalLayer);
-		}
-
-		// IGN FR Maxzoom
-		if(sources.plan_ign) { sources.plan_ign.maxzoom = 18;}
-
-		// OpenMapTiles styles
-		if(sources.openmaptiles && !(sources.openmaptiles.attribution || "").includes("OpenMapTiles")) {
-			sources.openmaptiles.attribution += " | © <a href='https://openmaptiles.org/'>OpenMapTiles</a>";
-		}
-
-		return {
-			version: 8,
-			name: "Panoramax Map Style",
-			sources,
-			layers: layers.concat(labelLayers).filter(l => l.id),
-			metadata,
-			sprite: sprite.length > 0 ? sprite : undefined,
-		};
-	}
-
-	/**
-	 * Throttled function to force map data refresh.
-	 * This allows to make actual effect of layers adds/switches.
-	 * @param {boolean} [reloadSem=false] Force reload of semantics layers (in case of API switch)
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	updateMapStyle(reloadSem = false) {
-		clearTimeout(this._mapUpdateDebounce);
-		this._mapUpdateDebounce = setTimeout(() => {
-			this.map?.setStyle(this.getMapStyle(), {diff: true});
-
-			if(reloadSem) {
-				this.map._semMapProtocol.clearCache();
-				Object
-					.entries(this.map?.getStyle()?.sources || {})
-					.filter(([,v]) => v.tiles && v.tiles[0].startsWith("sem"))
-					.forEach(([k,]) => {
-						const s = this.map.getSource(k);
-						s.setTiles(s.tiles);
-					});
-			}
-		}, 10);
-	}
-
-	/**
-	 * Checks if given source already exists in composer, or add it as detached to wait.
-	 * This is useful for sources added directly to MapLibre not through the MapStyleComposer.
-	 * @param {string} id The source ID
-	 * @param {object} source The MapLibre source definition
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	registerSource(id, source) {
-		let found = false;
-		const lrids = Object.keys(this.layerRanges);
-		for(let i=0; i < lrids.length; i++) {
-			const lr = this.layerRanges[lrids[i]];
-			const styles = Object.keys(lr);
-			for(let j=0; j < styles.length; j++) {
-				const styleId = styles[j];
-				if(styleId === id) {
-					found = true;
-					break;
-				}
-			}
-			if(found) { break; }
-		}
-
-		if(!found) {
-			// Shorten indoor= attribution
-			if(id === "indoorequal") {
-				source.attribution = "<a href=\"https://indoorequal.org/\" target=\"_blank\">© indoor=</a>";
-			}
-
-			this.detachedSources[id] = source;
-		}
-	}
-
-	/**
-	 * Checks if given layer already exists in composer, or add it as data under/overlay.
-	 * This is useful for layers added directly to MapLibre not through the MapStyleComposer.
-	 * @param {object} layer The MapLibre layer definition
-	 * @param {string} [beforeId] The ID of an existing layer to put this one before
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	registerLayer(layer, beforeId) {
-		let layerRange = "dataOverlays";
-		if(layer.source === "indoorequal" || beforeId) {
-			layerRange = "dataUnderlays";
-		}
-
-		// Skip indoorequal heatmap if disabled
-		if(layer.source === "indoorequal" && layer.id === "indoor-heat" && this._parent?._initParams?.getMapInit()?.indoor?.heatmap === false) {
-			return;
-		}
-
-		// Look for source in existing layers for appropriate layerRange
-		let found = false;
-		Object
-			.values(this.layerRanges[layerRange])
-			.forEach(s => {
-				if(s.sources[layer.source]) {
-					if(!s.layers) { s.layers = []; }
-					s.layers.push(layer);
-					found = true;
-				}
-			});
-
-		if(found) { return; }
-
-		// If none found, add it
-		let style = { sources: {}, layers: [layer] };
-		if(this.detachedSources[layer.source]) {
-			style.sources[layer.source] = this.detachedSources[layer.source];
-			delete this.detachedSources[layer.source];
-
-			if(layerRange === "dataOverlays") {
-				this.addDataOverlay(layer.id, style, true);
-			}
-			else if(layerRange === "dataUnderlays") {
-				this.addDataUnderlay(layer.id, style, true);
-			}
-		}
-	}
-
-	/**
-	 * Wait for some layer to be available
-	 * @param {string} type The kind of layer (panoramax, dataOverlays, dataUnderlays, basemaps)
-	 * @param {string} id The ID of layer to wait for
-	 * @returns {Promise} Resolves when layer is ready
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	async waitFor(type, id) {
-		if(this.layerRanges[type][id]) {
-			return await Promise.resolve();
-		}
-		else {
-			return await new Promise(resolve => setTimeout(resolve, 250)).then(() => this.waitFor(type, id));
-		}
-	}
-
-	/**
-	 * Creates a new basemap
-	 * @param {string} id Identifier for this basemap
-	 * @param {object} style The MapLibre-like style definition (object with sources and layers)
-	 * @param {boolean} [switchOn=false] Immediate map display ?
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	async addBasemap(id, style, switchOn = false) {
-		// Load from string URL
-		if(typeof style === "string") { style = await fetch(style).then(res => res.json()); }
-
-		this.layerRanges.basemaps[id] = style;
-
-		/**
-		 * Event for basemap added
-		 * @event Panoramax.utils.MapStyleComposer#basemap-added
-		 * @type {CustomEvent}
-		 * @property {string} [detail.basemap] The added basemap ID
-		 */
-		this.dispatchEvent(new CustomEvent("basemap-added", { detail: { basemap: id }}));
-
-		if(switchOn) { this.switchBasemap(id); }
-	}
-
-	/**
-	 * Makes this basemap now visible, instead of current one.
-	 * @param {string} id The basemap ID
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	async switchBasemap(id) {
-		if(id && !this.layerRanges.basemaps[id]) {
-			await this.waitFor("basemaps", id);
-		}
-		if(this.basemap === id || !id) { return; }
-		this.basemap = id;
-		this.updateMapStyle();
-
-		/**
-		 * Event for basemap changes
-		 * @event Panoramax.utils.MapStyleComposer#basemap-changed
-		 * @type {CustomEvent}
-		 * @property {string} [detail.basemap] The basemap ID
-		 */
-		this.dispatchEvent(new CustomEvent("basemap-changed", { detail: { basemap: id } }));
-	}
-
-	/**
-	 * Does this style contain many different basemaps ?
-	 * @returns {boolean} True if 2 or more basemaps are available
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	hasManyBasemaps() {
-		return Object.keys(this.layerRanges.basemaps).length >= 2;
-	}
-
-	/**
-	 * Does this style contains two main basemaps "aerial" & "streets" ?
-	 * @returns {boolean} True if two main basemaps available
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	hasStreetsAerialBasemaps() {
-		// eslint-disable-next-line eqeqeq
-		return this.layerRanges.basemaps.aerial != null && this.layerRanges.basemaps.streets != null;
-	}
-
-	/**
-	 * Does this style contains any other basemaps than two main ones (aerial/streets)
-	 * @returns {boolean} True if other basemaps available
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	hasComplementaryBasemaps() {
-		// eslint-disable-next-line eqeqeq
-		return Object.keys(this.layerRanges.basemaps).find(b => !BASEMAPS_DEFAULT_IDS.includes(b)) != null;
-	}
-
-	/**
-	 * Creates a new data underlay
-	 * @param {string} id Identifier for this basemap
-	 * @param {object} style The MapLibre-like style definition (object with sources and layers)
-	 * @param {boolean} [switchOn=false] Immediate map display ?
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	addDataUnderlay(id, style, switchOn = false) {
-		this.layerRanges.dataUnderlays[id] = style;
-
-		/**
-		 * Event for data underlay added
-		 * @event Panoramax.utils.MapStyleComposer#dataunderlay-added
-		 * @type {CustomEvent}
-		 * @property {string} [detail.dataUnderlay] The added data underlay ID
-		 */
-		this.dispatchEvent(new CustomEvent("dataunderlay-added", { detail: { dataUnderlay: id }}));
-
-		if(switchOn) { this.switchDataUnderlayVisibility(id, true); }
-	}
-
-	/**
-	 * Change visibility of a given data underlay.
-	 * @param {string} id The Identifier of data underlay to change
-	 * @param {boolean} visible Set to true to make visible, false to hide
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	async switchDataUnderlayVisibility(id, visible) {
-		if(id && !this.layerRanges.dataUnderlays[id]) {
-			await this.waitFor("dataUnderlays", id);
-		}
-
-		if(visible) { this.dataUnderlays.add(id); }
-		else { this.dataUnderlays.delete(id); }
-		this.updateMapStyle();
-
-		/**
-		 * Event for data underlays changes
-		 * @event Panoramax.utils.MapStyleComposer#dataunderlay-changed
-		 * @type {CustomEvent}
-		 * @property {string} [detail.dataUnderlay] The data underlay ID
-		 * @property {boolean} [detail.visible] True if visible
-		 */
-		this.dispatchEvent(new CustomEvent("dataunderlay-changed", { detail: { dataUnderlay: id , visible } }));
-	}
-
-	/**
-	 * Creates a new Panoramax Vector Tile endpoint.
-	 * @param {string} id The identifier for this endpoint
-	 * @param {object} style The MapLibre Style JSON object
-	 * @param {boolean} [switchOn=false] Immediate map display ?
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	addPanoramaxEndpoint(id, style, switchOn = false) {
-		// Override tiles protocol (for tile crowdiness)
-		Object
-			.values(style?.sources || {})
-			.filter(s => s.tiles)
-			.forEach(s => s.tiles = s.tiles.map(t => t.replace(/^http/, "panora")));
-
-		this.layerRanges.panoramax[id] = style;
-
-		// Add layers styles
-		this.layerRanges.panoramax[id].layers = getPanoramaxLayers(style);
-
-		/**
-		 * Event for Panoramax endpoint added
-		 * @event Panoramax.utils.MapStyleComposer#panoramax-added
-		 * @type {CustomEvent}
-		 * @property {string} [detail.endpoint] The added Panoramax endpoint ID
-		 */
-		this.dispatchEvent(new CustomEvent("panoramax-added", { detail: { endpoint: id }}));
-
-		if(switchOn) { this.switchPanoramaxEndpoint(id); }
-	}
-
-	/**
-	 * Uses this Panoramax Vector Tile endpoint instead of current one.
-	 * @param {string} id The endpoint ID
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	async switchPanoramaxEndpoint(id) {
-		if(id && !this.layerRanges.panoramax[id]) {
-			await this.waitFor("panoramax", id);
-		}
-		if(!id || id === this.panoramax) { return; }
-		this.panoramax = id;
-
-		this.updateMapStyle(true);
-
-		/**
-		 * Event for Panoramax endpoint changes
-		 * @event Panoramax.utils.MapStyleComposer#panoramax-changed
-		 * @type {CustomEvent}
-		 * @property {string} [detail.endpoint] The new selected Panoramax endpoint
-		 */
-		this.dispatchEvent(new CustomEvent("panoramax-changed", { detail: { endpoint: id } }));
-	}
-
-	/**
-	 * Is the currently selected Panoramax endpoint showing data of a single user ?
-	 * @returns {boolean} True if single user
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	isPanoramaxEndpointSingleUser() {
-		return isPanoramaxEndpointSingleUser(this.panoramax);
-	}
-
-	/**
-	 * Changes the selected Panoramax map theme
-	 * @param {string} theme One of "default", "age", "type", "score", "gps"
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	setPanoramaxTheme(theme) {
-		if(theme === this.panoramaxTheme) { return; }
-		this.panoramaxTheme = theme;
-		this.updateMapStyle();
-
-		/**
-		 * Event for Panoramax theme changes
-		 * @event Panoramax.utils.MapStyleComposer#theme-changed
-		 * @type {CustomEvent}
-		 * @property {string} [detail.theme] The new selected theme
-		 */
-		this.dispatchEvent(new CustomEvent("theme-changed", { detail: { theme } }));
-	}
-
-	/**
-	 * Changes the selected Panoramax filters
-	 * @param {object} filters Filtering values
-	 * @param {string} [filters.minDate] Start date for pictures (format YYYY-MM-DD)
-	 * @param {string} [filters.maxDate] End date for pictures (format YYYY-MM-DD)
-	 * @param {string} [filters.pic_type] Type of picture to keep (flat, equirectangular)
-	 * @param {number[]} [filters.qualityscore] QualityScore values, as a list of 1 to 5 grades
-	 * @param {number[]} [filters.gps] GPS precision grades, as a list of 1 to 5 grades
-	 * @param {object} [filters.featuresRestrictions] Rules to restrict display of pictures & sequences
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	setPanoramaxFilters(filters) {
-		this.panoramaxFilters = filters;
-		this.updateMapStyle();
-
-		/**
-		 * Event for Panoramax filters changes
-		 * @event Panoramax.utils.MapStyleComposer#filters-changed
-		 * @type {CustomEvent}
-		 * @property {string} [detail.minDate] The minimum date in time range (ISO format)
-		 * @property {string} [detail.maxDate] The maximum date in time range (ISO format)
-		 * @property {string} [detail.pic_type] Camera type (equirectangular, flat, null/empty string for both)
-		 * @property {number[]} [detail.qualityscore] QualityScore values, as a list of 1 to 5 grades
-		 * @property {number[]} [detail.gps] GPS precision grades, as a list of 1 to 5 grades
-		 * @property {object} [detail.featuresRestrictions] Rules to restrict display of pictures & sequences
-		 */
-		this.dispatchEvent(new CustomEvent("filters-changed", { detail: filters }));
-	}
-
-	/**
-	 * Creates a new data overlay
-	 * @param {string} id Identifier for this basemap
-	 * @param {object} style The MapLibre-like style definition (object with sources and layers)
-	 * @param {boolean} [switchOn=false] Immediate map display ?
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	addDataOverlay(id, style, switchOn = false) {
-		this.layerRanges.dataOverlays[id] = style;
-
-		/**
-		 * Event for data overlay added
-		 * @event Panoramax.utils.MapStyleComposer#dataoverlay-added
-		 * @type {CustomEvent}
-		 * @property {string} [detail.dataOverlay] The added data overlay ID
-		 */
-		this.dispatchEvent(new CustomEvent("dataoverlay-added", { detail: { dataOverlay: id }}));
-
-		if(switchOn) { this.switchDataOverlayVisibility(id, true); }
-	}
-
-	/**
-	 * Change visibility of a given data Overlay.
-	 * @param {string} id The Identifier of data Overlay to change
-	 * @param {boolean} visible Set to true to make visible, false to hide
-	 * @memberof Panoramax.utils.MapStyleComposer#
-	 */
-	async switchDataOverlayVisibility(id, visible) {
-		if(id && !this.layerRanges.dataOverlays[id]) {
-			await this.waitFor("dataOverlays", id);
-		}
-
-		if(visible) { this.dataOverlays.add(id); }
-		else { this.dataOverlays.delete(id); }
-		this.updateMapStyle();
-
-		/**
-		 * Event for data overlays changes
-		 * @event Panoramax.utils.MapStyleComposer#dataoverlay-changed
-		 * @type {CustomEvent}
-		 * @property {string} [detail.dataOverlay] The data overlay ID
-		 * @property {boolean} [detail.visible] True if visible
-		 */
-		this.dispatchEvent(new CustomEvent("dataoverlay-changed", { detail: { dataOverlay: id , visible } }));
-	}
-
-	/** @private */
-	async _createPanoramaxEndpointFromAPI(id, api, switchOn = true) {
-		let style;
-
-		if(api._endpoints.style) { // API Style JSON
-			style = api._endpoints.style;
-		}
-		else if(api._endpoints.tiles) { // API tiles
-			style = { "sources": { "geovisio": { "tiles": [ api._endpoints.tiles ] } } };
-		}
-
-		// Load from URL
-		if(style && typeof style === "string") {
-			style = await fetch(style, api._getFetchOptions()).then(res => res.json());
-		}
-
-		if(style && style.sources) {
-			this.addPanoramaxEndpoint(id, style, switchOn);
-		}
-	}
-
-	/** @private */
-	async _createPanoramaxEndpointForUser(userId) {
-		// Skip if user ID is invalid
-		if(!isPanoramaxEndpointSingleUser(userId)) { return; }
-
-		// Skip if it already exist
-		if(this.layerRanges.panoramax[userId]) {
-			this.switchPanoramaxEndpoint(userId);
-			return;
-		}
-
-		let style, api, apiUserId;
-
-		// User from metacatalog
-		if(userId.startsWith("metacatalog_")) {
-			api = this._parent.apiMC;
-			apiUserId = userId.replace(/^metacatalog_/, "");
-		}
-		// User from local API
-		else {
-			api = this._parent.api;
-			apiUserId = userId;
-		}
-
-		// Find style from API
-		if(api._endpoints.user_style) { // API user style JSON
-			style = api._endpoints.user_style.replace(/\{userId\}/g, apiUserId);
-		}
-		else if(api._endpoints.user_tiles) { // API user tiles
-			style = { "sources": { [`geovisio_${apiUserId}`]: {
-				"tiles": [ api._endpoints.user_tiles.replace(/\{userId\}/g, apiUserId) ]
-			} } };
-		}
-
-		// Load from URL
-		if(style && typeof style === "string") {
-			style = await fetch(style, api._getFetchOptions()).then(res => res.json());
-		}
-
-		if(style && style.sources) {
-			this.addPanoramaxEndpoint(userId, style, true);
-		}
-	}
-
-	/** @private */
-	_createManyBasemaps(basemaps, switchId) {
-		const maxzoomRgx = /\{z:(\d+)\}/;
-		Object
-			.entries(basemaps)
-			.forEach(([id, def]) => {
-				// Transform shortcuts for TMS into classic definition
-				if(typeof def === "string" && def.includes(".png")) {
-					let maxzoom, attribution;
-
-					// Look for maxzoom if embed
-					const maxzoomMatcher = def.match(maxzoomRgx);
-					if(maxzoomMatcher && maxzoomMatcher.length > 1) {
-						maxzoom = parseInt(maxzoomMatcher[1]);
-						def = def.replace(maxzoomRgx, "{z}");
-					}
-
-					// Auto append OSM attribution
-					if(def.includes("osm") || def.includes("openstreetmap")) {
-						attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>";
-					}
-
-					def = {
-						sources: {
-							[id]: {
-								type: "raster",
-								tiles: [def],
-								tileSize: 256,
-								maxzoom,
-								attribution,
-							}
-						},
-						layers: [{
-							"id": id,
-							"type": "raster",
-							"source": id,
-						}]
-					};
-				}
-
-				this.addBasemap(id, def, id === switchId);
-			});
-	}
-
-	/** @private */
-	_createRasterBasemap(raster) {
-		this.addBasemap("aerial", {
-			sources: { [RASTER_LAYER_ID]: raster },
-			layers: [{
-				"id": RASTER_LAYER_ID,
-				"type": "raster",
-				"source": RASTER_LAYER_ID,
-			}]
-		});
-		return RASTER_LAYER_ID;
-	}
-
-	/** @private */
-	_applyPanoramaxThemeOnLayers(style) {
-		const picId = this._parent.psv ? (this._parent.psv?._myVTour?.state?.loadingNode || this._parent.psv?._myVTour?.state?.currentNode?.id) : this._parent.picture;
-		const seqId = this._parent.psv ? (picId ? this._parent.psv?._picturesSequences[picId] : null) : this._parent.sequence;
-
-		style.layers = style.layers.map(layer => {
-			const isPictures = layer.id.endsWith("_pictures");
-			const isSequences = layer.id.endsWith("_sequences");
-			const isGrid = layer.id.endsWith("_grid");
-
-			if(!layer.layout) { layer.layout = {}; }
-			if(!layer.paint) { layer.paint = {}; }
-
-			if(isPictures || isSequences) {
-				// -- Sort --
-				// Values
-				//  - 100 : on top / selected feature
-				//  - 90  : hidden feature
-				//  - 20-80 : custom ranges
-				//  - 10  : basic feature
-				//  - 0   : on bottom / feature with undefined property
-
-				const layerSort = ["case", ["==", ["get", "hidden"], true], 90];
-
-				// Selected sequence style
-				if(isSequences && seqId) {
-					layerSort.push(["==", ["get", "id"], seqId], 100);
-				}
-				else if(isPictures && seqId) {
-					layerSort.push(["in", seqId, ["get", "sequences"]], 100);
-				}
-
-				layerSort.push(...MAP_THEMES_STYLES[this.panoramaxTheme].sort);
-				layerSort.push(10);
-				layer.layout[`${isPictures ? "circle" : "line"}-sort-key`] = layerSort;
-
-
-				// -- Color --
-				const layerColor = ["case", ["==", ["get", "hidden"], true], COLORS.HIDDEN];
-
-				// Selected sequence style
-				if(isSequences && seqId) {
-					layerColor.push(["==", ["get", "id"], seqId], COLORS.SELECTED);
-				}
-				else if(isPictures && seqId) {
-					layerColor.push(["in", seqId, ["get", "sequences"]], COLORS.SELECTED);
-				}
-
-				layerColor.push(...MAP_THEMES_STYLES[this.panoramaxTheme].color);
-				layer.paint[`${isPictures ? "circle" : "line"}-color`] = layerColor;
-				if(isPictures) { layer.paint["circle-stroke-color"] = layerColor; }
-			}
-
-			if(isGrid) {
-				let newType = "coef";
-				if(this.panoramaxFilters.pic_type) {
-					newType = this.panoramaxFilters.pic_type === "flat" ? "coef_flat_pictures" : "coef_360_pictures";
-					if(hasStyleLoggedGridStats(style) && getUserAccount()) {
-						newType = "logged_" + newType;
-					}
-				}
-				layer = switchCoefValue(layer, newType);
-			}
-
-			return layer;
-		});
-
-		return style.layers;
-	}
-
-	/** @private */
-	_applyPanoramaxFiltersOnLayers(layers) {
-		const pf = this.panoramaxFilters;
-
-		layers.forEach(layer => {
-			const isPictures = layer.id.endsWith("_pictures");
-			const isSequences = layer.id.endsWith("_sequences") || layer.id.endsWith("_sequences_plus");
-
-			if(!isPictures && !isSequences) { return; }
-			let layerFilters = [];
-
-			if(pf.minDate && pf.minDate !== "") {
-				if(isPictures)       { layerFilters.push([">=", ["get", "ts"], pf.minDate]); }
-				else if(isSequences) { layerFilters.push([">=", ["get", "date"], pf.minDate]); }
-			}
-
-			if(pf.maxDate && pf.maxDate !== "") {
-				if(isSequences) { layerFilters.push(["<=", ["get", "date"], pf.maxDate]); }
-
-				// Get tomorrow date for pictures filtering
-				// (because ts is date+time, so comparing date only string would fail otherwise)
-				if(isPictures) {
-					let d = new Date(pf.maxDate);
-					d.setDate(d.getDate() + 1);
-					d = d.toISOString().split("T")[0];
-					layerFilters.push(["<=", ["get", "ts"], d]);
-				}
-			}
-
-			if(pf.pic_type && pf.pic_type !== "") {
-				pf.pic_type = pf.pic_type === "flat" ? "flat" : "equirectangular";
-				if(isSequences)     { layerFilters.push(["==", ["get", "type"], pf.pic_type]); }
-				else if(isPictures) { layerFilters.push(["==", ["get", "type"], pf.pic_type]); }
-			}
-
-			if(pf.qualityscore && pf.qualityscore.length > 0) {
-				if(isSequences)      { layerFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", pf.qualityscore]]); }
-				else if (isPictures) { layerFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", pf.qualityscore]]); }
-			}
-
-			if(pf.gps && pf.gps.length > 0) {
-				if(isSequences)     { layerFilters.push(["in", MAP_EXPR_QUALITYSCORE_GPS, ["literal", pf.gps]]); }
-				else if(isPictures) { layerFilters.push(["in", MAP_EXPR_QUALITYSCORE_GPS, ["literal", pf.gps]]); }
-			}
-
-			if(isPictures && pf.featuresRestrictions?.pictures && pf.featuresRestrictions.pictures.features?.length >= 0) {
-				if(pf.featuresRestrictions.pictures.rule === "keep") {
-					layerFilters.push(["in", ["get", "id"], ["literal", pf.featuresRestrictions.pictures.features]]);
-				}
-				else if(pf.featuresRestrictions.pictures.features.length > 0) {
-					layerFilters.push(["!", ["in", ["get", "id"], ["literal", pf.featuresRestrictions.pictures.features]]]);
-				}
-			}
-
-			if(isSequences && pf.featuresRestrictions?.sequences && pf.featuresRestrictions.sequences.features?.length >= 0) {
-				if(pf.featuresRestrictions.sequences.rule === "keep") {
-					layerFilters.push(["in", ["get", "id"], ["literal", pf.featuresRestrictions.sequences.features]]);
-				}
-				else if(pf.featuresRestrictions.sequences.features.length > 0) {
-					layerFilters.push(["!", ["in", ["get", "id"], ["literal", pf.featuresRestrictions.sequences.features]]]);
-				}
-			}
-
-
-			if(layerFilters.length === 0) { layerFilters = ["literal", true]; }
-			else {
-				layerFilters.unshift("all");
-				if(isPictures) {
-					layerFilters = ["step", ["zoom"],
-						true,
-						TILES_PICTURES_ZOOM, layerFilters
-					];
-				}
-			}
-
-			if(layerFilters) { layer.filter = layerFilters; }
-		});
-
-		return layers;
-	}
-}