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

package/build/utils/map.js

@@ -1,788 +0,0 @@
-import {
-	COLORS, GPS_VALUES, QUALITYSCORE_GPS_VALUES,
-	QUALITYSCORE_POND_GPS, QUALITYSCORE_POND_RES, QUALITYSCORE_RES_360_VALUES,
-	QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_VALUES, isNullId, svgToImg,
-} from "./utils.js";
-
-const LoaderImg = await fetch(new URL("../img/marker.svg", import.meta.url).href).then(res => res.text());
-
-export const RASTER_LAYER_ID = "pnx-aerial";
-
-export const TILES_PICTURES_ZOOM = 15;
-export const TILES_PICTURES_SYMBOL_ZOOM = 19;
-
-const CROWDED_TILE_COND = ["!", ["has", "uncrowded"]];
-const EQUIRECT_COND = ["==", ["get", "type"], "equirectangular"];
-
-function getVectorStyles(noCrowded) {
-	return {
-		PICTURES: {
-			"paint": {
-				"circle-radius": ["interpolate", ["linear"], ["zoom"],
-					TILES_PICTURES_ZOOM,     0,
-					TILES_PICTURES_ZOOM+0.5, noCrowded ? 1 : ["case", CROWDED_TILE_COND, 0, 1],
-					TILES_PICTURES_ZOOM+1.5, noCrowded ? 2 : ["case", CROWDED_TILE_COND, 0, 2],
-					TILES_PICTURES_ZOOM+2,   noCrowded ? 4 : ["case", CROWDED_TILE_COND, 1, 4],
-					TILES_PICTURES_ZOOM+3,   noCrowded ? 5 : ["case", CROWDED_TILE_COND, 3, 5],
-					TILES_PICTURES_ZOOM+5,   noCrowded ? 7 : ["case", CROWDED_TILE_COND, 5, 7],
-					TILES_PICTURES_ZOOM+7,   noCrowded ? 7 : ["case", CROWDED_TILE_COND, 7, 7],
-				],
-				"circle-opacity": ["interpolate", ["linear"], ["zoom"],
-					TILES_PICTURES_ZOOM,     0,
-					TILES_PICTURES_ZOOM+0.5, noCrowded ? 1 : ["case", CROWDED_TILE_COND, 0, 1],
-					TILES_PICTURES_ZOOM+1.5, noCrowded ? 1 : ["case", CROWDED_TILE_COND, 0, 1],
-					TILES_PICTURES_ZOOM+2,   1
-				],
-				"circle-stroke-opacity": ["case",
-					["all", CROWDED_TILE_COND, EQUIRECT_COND], 0.2,
-					EQUIRECT_COND, 0.4,
-					0
-				],
-				"circle-stroke-width": ["interpolate", ["linear"], ["zoom"],
-					TILES_PICTURES_ZOOM+2.5, 0,
-					TILES_PICTURES_ZOOM+3.5, noCrowded ? ["case",
-						EQUIRECT_COND, 10,
-						2
-					] : ["case",
-						["all", CROWDED_TILE_COND, EQUIRECT_COND], 0,
-						EQUIRECT_COND, 10,
-						CROWDED_TILE_COND, 0,
-						2
-					],
-					TILES_PICTURES_ZOOM+4.5, noCrowded ? ["case",
-						EQUIRECT_COND, 10,
-						2
-					]: ["case",
-						["all", CROWDED_TILE_COND, EQUIRECT_COND], 10,
-						EQUIRECT_COND, 10,
-						CROWDED_TILE_COND, 0,
-						2
-					]
-				],
-			},
-			"layout": {}
-		},
-		SEQUENCES: {
-			"paint": {
-				"line-width": ["interpolate", ["linear"], ["zoom"],
-					0,                       0.5,
-					10,                      1.5,
-					TILES_PICTURES_ZOOM-0.5, 1.5,
-					TILES_PICTURES_ZOOM+0.5, noCrowded ? 2 : ["case", CROWDED_TILE_COND, 0.5, 2],
-					22,                      noCrowded ? 4 : ["case", CROWDED_TILE_COND, 1, 4],
-				],
-			},
-			"layout": {
-				"line-cap": "square",
-			}
-		},
-		SEQUENCES_PLUS: {
-			"paint": {
-				"line-width": ["interpolate", ["linear"], ["zoom"], 0, 15, TILES_PICTURES_ZOOM+1, 30],
-				"line-opacity": 0,
-				"line-color": "#ff0000",
-			},
-			"layout": {
-				"line-cap": "square",
-			}
-		},
-		GRID: {
-			"layout": {
-				"circle-sort-key": ["get","coef"]
-			},
-			"paint": {
-				"circle-color": ["interpolate",["linear"],["get","coef"],
-					0,   "#FFA726",
-					0.5, "#E65100",
-					1,   "#3E2723"
-				],
-				"circle-opacity": ["interpolate",["linear"],["zoom"],
-					4,    0.5,
-					5,    1,
-					6.75, 1,
-					7,    0
-				],
-				"circle-radius": ["interpolate",["linear"],["zoom"],
-					1, ["match",["get","coef"], 0, 0, 1],
-					5, ["match",["get","coef"], 0, 0, 2.5],
-					7, ["match",["get","coef"], 0, 0, 7]
-				]
-			},
-		}
-	};
-}
-
-export const VECTOR_STYLES = getVectorStyles(false);
-export const VECTOR_STYLES_NOCROWD = getVectorStyles(true);
-
-// See MapLibre docs for explanation of expressions magic: https://maplibre.org/maplibre-style-spec/expressions/
-const MAP_EXPR_QUALITYSCORE_RES_360  = ["case", ["has", "h_pixel_density"], ["step", ["get", "h_pixel_density"], ...QUALITYSCORE_RES_360_VALUES], 1];
-const MAP_EXPR_QUALITYSCORE_RES_FLAT = ["case", ["has", "h_pixel_density"], ["step", ["get", "h_pixel_density"], ...QUALITYSCORE_RES_FLAT_VALUES], 1];
-const MAP_EXPR_QUALITYSCORE_RES = [
-	"case", ["==", ["get", "type"], "equirectangular"],
-	MAP_EXPR_QUALITYSCORE_RES_360, MAP_EXPR_QUALITYSCORE_RES_FLAT
-];
-export const MAP_EXPR_QUALITYSCORE_GPS = ["case", ["has", "gps_accuracy"], ["step", ["get", "gps_accuracy"], ...QUALITYSCORE_GPS_VALUES], 1];
-// Note: score is also calculated in widgets/popup code
-export const MAP_EXPR_QUALITYSCORE = [
-	"round",
-	["+",
-		["*", MAP_EXPR_QUALITYSCORE_RES, QUALITYSCORE_POND_RES],
-		["*", MAP_EXPR_QUALITYSCORE_GPS, QUALITYSCORE_POND_GPS]]
-];
-
-// Themes
-const oneDay = 24 * 60 * 60 * 1000;
-const toDate = d => new Date(d).toISOString().split("T")[0];
-const dayNow = Date.now();
-const day1month = toDate(dayNow - 30 * oneDay);
-const day1year = toDate(dayNow - 365 * oneDay);
-const day2years = toDate(dayNow - 2 * 365 * oneDay);
-
-export const MAP_THEMES_STYLES = {
-	default: {
-		id: "default",
-		sort: [],
-		color: [COLORS.BASE]
-	},
-	age: {
-		id: "age",
-		sort: [
-			["!", ["any", ["has", "date"], ["has", "ts"]]], 0,
-			[">=", ["coalesce", ["get", "date"], ["get", "ts"]], day1month], 50,
-			[">=", ["coalesce", ["get", "date"], ["get", "ts"]], day1year], 49,
-			[">=", ["coalesce", ["get", "date"], ["get", "ts"]], day2years], 48,
-		],
-		color: [
-			["!", ["any", ["has", "date"], ["has", "ts"]]], COLORS.BASE,
-			[">=", ["coalesce", ["get", "date"], ["get", "ts"]], day1month], COLORS.PALETTE_4,
-			[">=", ["coalesce", ["get", "date"], ["get", "ts"]], day1year], COLORS.PALETTE_3,
-			[">=", ["coalesce", ["get", "date"], ["get", "ts"]], day2years], COLORS.PALETTE_2,
-			COLORS.PALETTE_1
-		]
-	},
-	type: {
-		id: "type",
-		sort: [
-			["!", ["has", "type"]], 0,
-			["==", ["get", "type"], "equirectangular"], 50,
-		],
-		color: [
-			["!", ["has", "type"]], COLORS.BASE,
-			["==", ["get", "type"], "equirectangular"], COLORS.QUALI_1,
-			COLORS.QUALI_2
-		]
-	},
-	score: {
-		id: "score",
-		sort: [
-			["==", MAP_EXPR_QUALITYSCORE, 5], 80,
-			["==", MAP_EXPR_QUALITYSCORE, 4], 65,
-			["==", MAP_EXPR_QUALITYSCORE, 3], 50,
-			["==", MAP_EXPR_QUALITYSCORE, 2], 35,
-			["==", MAP_EXPR_QUALITYSCORE, 1], 20,
-		],
-		color: [
-			["==", MAP_EXPR_QUALITYSCORE, 5], QUALITYSCORE_VALUES[0].color,
-			["==", MAP_EXPR_QUALITYSCORE, 4], QUALITYSCORE_VALUES[1].color,
-			["==", MAP_EXPR_QUALITYSCORE, 3], QUALITYSCORE_VALUES[2].color,
-			["==", MAP_EXPR_QUALITYSCORE, 2], QUALITYSCORE_VALUES[3].color,
-			QUALITYSCORE_VALUES[4].color,
-		]
-	},
-	gps: {
-		id: "gps",
-		sort: [
-			["==", MAP_EXPR_QUALITYSCORE_GPS, 5], 80,
-			["==", MAP_EXPR_QUALITYSCORE_GPS, 4], 65,
-			["==", MAP_EXPR_QUALITYSCORE_GPS, 3], 50,
-			["==", MAP_EXPR_QUALITYSCORE_GPS, 2], 35,
-			["==", MAP_EXPR_QUALITYSCORE_GPS, 1], 20,
-		],
-		color: [
-			["==", MAP_EXPR_QUALITYSCORE_GPS, 5], GPS_VALUES[0].color,
-			["==", MAP_EXPR_QUALITYSCORE_GPS, 4], GPS_VALUES[1].color,
-			["==", MAP_EXPR_QUALITYSCORE_GPS, 3], GPS_VALUES[2].color,
-			["==", MAP_EXPR_QUALITYSCORE_GPS, 2], GPS_VALUES[3].color,
-			GPS_VALUES[4].color
-		]
-	},
-};
-
-/**
- * Get the GIF shown while thumbnail loads
- * @param {object} lang Translations
- * @returns The DOM element for this GIF
- * @private
- */
-export function getThumbGif(lang) {
-	const thumbGif = document.createElement("img");
-	svgToImg(LoaderImg, thumbGif);
-	thumbGif.alt = lang.loading;
-	thumbGif.title = lang.loading;
-	thumbGif.classList.add("pnx-map-thumb", "pnx-map-thumb-loader");
-	return thumbGif;
-}
-
-export function isNullCoordinates(c) {
-	return (
-		c === null
-		|| c === undefined
-		|| (Array.isArray(c) && (
-			(c.length === 2 && c[0] === 0 && c[1] === 0)
-			|| c.length < 2
-		))
-	);
-}
-
-/**
- * Is given layer a label layer.
- *
- * This is useful for inserting new vector layer before labels in MapLibre.
- * @param {object} l The layer to check
- * @returns {boolean} True if it's a label layer
- * @private
- */
-export function isLabelLayer(l) {
-	return l.type === "symbol"
-		&& l?.layout?.["text-field"] !== undefined
-		&& (l.minzoom === undefined || l.minzoom < 15);
-}
-
-/**
- * Does given style contain logged-in grid statistics ?
- * @param {object} style The MapLibre JSON style definition
- * @returns {boolean} True if contains fields for logged-in grid statistics.
- * @private
- */
-export function hasStyleLoggedGridStats(style) {
-	const fields = style?.metadata?.["panoramax:fields"] || {};
-	return (fields?.grid?.includes("logged_coef_360_pictures")
-		&& fields?.grid?.includes("logged_coef_flat_pictures")
-		&& fields?.grid?.includes("logged_coef")) || false;
-}
-
-/**
- * Get normalized layers definition for Panoramax data display
- * @param {object} style The MapLibre style JSON
- * @returns {object[]} Complete list of Panoramax layers
- * @private
- */
-export function getPanoramaxLayers(style) {
-	const s = Object.keys(style.sources)[0];
-	const isVT = style.sources[s].type === "vector";
-	const vt = isVT ? VECTOR_STYLES : VECTOR_STYLES_NOCROWD;
-
-	const layers = [
-		// Basic sequences
-		{
-			"id": `${s}_sequences`,
-			"type": "line",
-			"source": s,
-			"source-layer": isVT ? "sequences" : undefined,
-			"layout": {
-				...vt.SEQUENCES.layout
-			},
-			"paint": {
-				...vt.SEQUENCES.paint,
-				"line-color": COLORS.BASE,
-			},
-		},
-
-		// Padded sequence (for easier click)
-		{
-			"id": `${s}_sequences_plus`,
-			"type": "line",
-			"source": s,
-			"source-layer": isVT ? "sequences" : undefined,
-			"layout": {
-				...vt.SEQUENCES_PLUS.layout
-			},
-			"paint": {
-				...vt.SEQUENCES_PLUS.paint
-			},
-		},
-
-		// Pictures
-		{
-			"id": `${s}_pictures`,
-			"type": "circle",
-			"source": s,
-			"source-layer": isVT ? "pictures" : undefined,
-			"layout": {
-				...vt.PICTURES.layout
-			},
-			"paint": {
-				...vt.PICTURES.paint,
-				"circle-color": COLORS.BASE,
-			},
-		}
-	];
-
-	if(style?.metadata?.["panoramax:fields"]?.grid) {
-		layers.push({
-			"id": `${s}_grid`,
-			"type": "circle",
-			"source": s,
-			"source-layer": "grid",
-			"layout": {
-				...vt.GRID.layout
-			},
-			"paint": {
-				...vt.GRID.paint
-			},
-		});
-	}
-
-	return layers;
-}
-
-/**
- * Get comprehensive values from map filters form
- * @param {Element} mapFiltersMenu The MapFilters DOM Element
- * @param {Element} mapThemeSelect The Map Theme select DOM Element
- * @param {boolean} hasQualityScore Set to true if vector tiles embed quality score data
- * @return {object} The map filters as JSON
- */
-export function mapFiltersFormValues(mapFiltersMenu, mapThemeSelect, hasQualityScore) {
-	const fMinDate = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-date-from");
-	const fMaxDate = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-date-end");
-	const fTypes = mapFiltersMenu?.shadowRoot.querySelectorAll("input[name='pnx-filter-type']");
-	const fPicSource = mapFiltersMenu?.shadowRoot.getElementById("pnx-pictures-source");
-
-	let type = "";
-	for(let fTypeId = 0 ; fTypeId < fTypes.length; fTypeId++) {
-		const fType = fTypes[fTypeId];
-		if(fType.checked) {
-			type = fType.value;
-			break;
-		}
-	}
-
-	let qualityscore = [];
-	let gps = [];
-	if(hasQualityScore) {
-		// Quality score itself
-		const fScore = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-qualityscore");
-		qualityscore = (fScore?.grade || "").split(",").map(v => parseInt(v)).filter(v => !isNaN(v));
-
-		// GPS precision
-		const fGPS = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-gps");
-		gps = (fGPS?.grade || "").split(",").map(v => parseInt(v)).filter(v => !isNaN(v));
-	}
-
-	return {
-		minDate: fMinDate?.value,
-		maxDate: fMaxDate?.value,
-		pic_type: type,
-		theme: mapThemeSelect?.value,
-		qualityscore,
-		gps,
-		source: fPicSource?.checked ? "local" : "metacatalog",
-	};
-}
-
-/**
- * Transforms map filters into MapLibre-like JSON filters
- * @param {object} filters Filters returned by MapFilters widgets
- * @param {boolean} [hasGridStats=false] Set to true if vector tiles offer grid statistics
- * @param {object} [featuresRestrictions] Rules to restrict display of pictures & sequences
- * @returns {object} Set of variables { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle }
- */
-export function mapFiltersToLayersFilters(filters, hasGridStats = false, featuresRestrictions = null) {
-	let mapFilters = {};
-	let mapSeqFilters = [];
-	let mapPicFilters = [];
-	let reloadMapStyle = false;
-
-	if(filters.minDate && filters.minDate !== "") {
-		mapFilters.minDate = filters.minDate;
-		mapSeqFilters.push([">=", ["get", "date"], filters.minDate]);
-		mapPicFilters.push([">=", ["get", "ts"], filters.minDate]);
-	}
-
-	if(filters.maxDate && filters.maxDate !== "") {
-		mapFilters.maxDate = filters.maxDate;
-		mapSeqFilters.push(["<=", ["get", "date"], filters.maxDate]);
-
-		// Get tomorrow date for pictures filtering
-		// (because ts is date+time, so comparing date only string would fail otherwise)
-		let d = new Date(filters.maxDate);
-		d.setDate(d.getDate() + 1);
-		d = d.toISOString().split("T")[0];
-		mapPicFilters.push(["<=", ["get", "ts"], d]);
-	}
-
-	if(filters.pic_type && filters.pic_type !== "") {
-		mapFilters.pic_type = filters.pic_type === "flat" ? "flat" : "equirectangular";
-		mapSeqFilters.push(["==", ["get", "type"], mapFilters.pic_type]);
-		mapPicFilters.push(["==", ["get", "type"], mapFilters.pic_type]);
-	}
-
-	if(hasGridStats) {
-		reloadMapStyle = true;
-	}
-
-	if(filters.camera && filters.camera !== "") {
-		mapFilters.camera = filters.camera;
-		// Low/high model hack : to enable fuzzy filtering of camera make and model
-		const lowModel = filters.camera.toLowerCase().trim() + "                    ";
-		const highModel = filters.camera.toLowerCase().trim() + "zzzzzzzzzzzzzzzzzzzz";
-		const collator = ["collator", { "case-sensitive": false, "diacritic-sensitive": false } ];
-		mapSeqFilters.push([">=", ["get", "model"], lowModel, collator]);
-		mapSeqFilters.push(["<=", ["get", "model"], highModel, collator]);
-		mapPicFilters.push([">=", ["get", "model"], lowModel, collator]);
-		mapPicFilters.push(["<=", ["get", "model"], highModel, collator]);
-	}
-
-	if(filters.qualityscore && filters.qualityscore.length > 0) {
-		mapFilters.qualityscore = filters.qualityscore;
-		mapSeqFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", mapFilters.qualityscore]]);
-		mapPicFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", mapFilters.qualityscore]]);
-	}
-
-	if(filters.gps && filters.gps.length > 0) {
-		mapFilters.gps = filters.gps;
-		mapSeqFilters.push(["in", MAP_EXPR_QUALITYSCORE_GPS, ["literal", mapFilters.gps]]);
-		mapPicFilters.push(["in", MAP_EXPR_QUALITYSCORE_GPS, ["literal", mapFilters.gps]]);
-	}
-
-	if(filters.theme && MAP_THEMES_STYLES[filters.theme]) {
-		mapFilters.theme = filters.theme;
-		reloadMapStyle = true;
-	}
-
-	if(featuresRestrictions?.pictures && featuresRestrictions.pictures.features?.length >= 0) {
-		if(featuresRestrictions.pictures.rule === "keep") {
-			mapPicFilters.push(["in", ["get", "id"], ["literal", featuresRestrictions.pictures.features]]);
-		}
-		else if(featuresRestrictions.pictures.features.length > 0) {
-			mapPicFilters.push(["!", ["in", ["get", "id"], ["literal", featuresRestrictions.pictures.features]]]);
-		}
-	}
-
-	if(featuresRestrictions?.sequences && featuresRestrictions.sequences.features?.length >= 0) {
-		if(featuresRestrictions.sequences.rule === "keep") {
-			mapSeqFilters.push(["in", ["get", "id"], ["literal", featuresRestrictions.sequences.features]]);
-		}
-		else if(featuresRestrictions.sequences.features.length > 0) {
-			mapSeqFilters.push(["!", ["in", ["get", "id"], ["literal", featuresRestrictions.sequences.features]]]);
-		}
-	}
-
-
-	if(mapSeqFilters.length == 0) { mapSeqFilters = null; }
-	else {
-		mapSeqFilters.unshift("all");
-	}
-
-	if(mapPicFilters.length == 0) { mapPicFilters = null; }
-	else {
-		mapPicFilters.unshift("all");
-		mapPicFilters = ["step", ["zoom"],
-			true,
-			TILES_PICTURES_ZOOM, mapPicFilters
-		];
-	}
-
-	return { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle };
-}
-
-/**
- * Is the given Panoramax endpoint showing data of a single user ?
- * @param {string} endpoint The endpoint ID
- * @returns {boolean} True if single user
- */
-export function isPanoramaxEndpointSingleUser(endpoint) {
-	return !["default", "metacatalog", "", null, undefined].includes(endpoint);
-}
-
-/**
- * Switches used coef value in MapLibre style JSON expression
- * @param {*} expr The MapLibre style expression
- * @param {string} newCoefVal The new coef value to use
- * @returns {*} The switched expression
- * @private
- */
-export function switchCoefValue(expr, newCoefVal) {
-	if(Array.isArray(expr)) {
-		return expr.map(v => switchCoefValue(v, newCoefVal));
-	}
-	else if(typeof expr === "object" && expr !== null) {
-		const newExpr = {};
-		for (const key in expr) {
-			newExpr[key] = switchCoefValue(expr[key], newCoefVal);
-		}
-		return newExpr;
-	}
-	else if(typeof expr === "string" && (expr.startsWith("coef") || expr.startsWith("logged_coef"))) {
-		return newCoefVal;
-	}
-	return expr;
-}
-
-/**
- * Creates links between map and photo elements.
- * This enable interactions like click on map showing picture.
- *
- * @param {CoreView} parent The view containing both Photo and Map elements
- * @private
- */
-export function linkMapAndPhoto(parent) {
-	// Switched picture
-	const onPicLoad = e => {
-		if(isNullId(e.detail.picId)) {
-			parent.map.displayPictureMarker();
-			if(parent?.isMapWide?.()) {
-				parent?.mini?.setAttribute("collapsed", "");
-			}
-		}
-		else {
-			parent.map.displayPictureMarker(
-				e.detail.lon,
-				e.detail.lat,
-				parent.psv.getXY().x,
-				e.detail.first && !isNullCoordinates(parent._initParams?.getMapPostInit()?.center), // Skip centering if precise coordinates are set from URL
-				e.detail.picId
-			);
-
-			if(parent?.isMapWide?.()) {
-				parent?.mini?.removeAttribute("collapsed");
-			}
-		}
-	};
-	parent.psv.addEventListener("picture-loading", onPicLoad);
-	parent.psv.addEventListener("picture-loaded", onPicLoad);
-
-	// Picture view rotated
-	parent.psv.addEventListener("view-rotated", () => {
-		let x = parent.psv.getPosition().yaw * (180 / Math.PI);
-		x += parent.psv.getPictureOriginalHeading();
-		parent.map._picMarker.setRotation(x);
-	});
-
-	// Picture preview
-	parent.psv.addEventListener("picture-preview-started", e => {
-		// Show marker corresponding to selection
-		parent.map._picMarkerPreview
-			.setLngLat(e.detail.coordinates)
-			.setRotation(e.detail.direction || 0)
-			.addTo(parent.map);
-	});
-
-	parent.psv.addEventListener("picture-preview-stopped", () => {
-		parent.map._picMarkerPreview.remove();
-	});
-
-	parent.psv.addEventListener("picture-loaded", e => {
-		if (parent.isWidthSmall() && parent._picPopup && e.detail.picId == parent._picPopup._picId) {
-			parent._picPopup.remove();
-		}
-	});
-
-	// Picture click
-	parent.map.on("picture-click", e => {
-		parent.select(e.seqId, e.picId);
-		if(!parent.psv._myVTour.state.currentNode && parent?._setFocus) { parent._setFocus("pic"); }
-	});
-
-	// Sequence click
-	parent.map.on("sequence-click", e => {
-		(parent.getAPI?.() || parent.api).getPicturesAroundCoordinates(
-			e.coordinates.lat,
-			e.coordinates.lng,
-			0.01,
-			1,
-			e.seqId
-		).then(results => {
-			if(results?.features?.length > 0) {
-				parent.select(results.features[0]?.collection, results.features[0].id);
-				if(!parent.psv.getPictureMetadata() && parent?._setFocus) { parent._setFocus("pic"); }
-			}
-		});
-	});
-
-	// Focus changes
-	if(parent._setFocus) {
-		// PSV double click
-		parent.psv.addEventListener("dblclick", () => { if(parent.isMapWide()) { parent._setFocus("pic"); } });
-
-		// Map double-click: unselect if focused, toggle focus if unfocused
-		parent.map.on("dblclick", () => {
-			if(!parent.isMapWide()) { parent._setFocus("map"); }
-			else if(parent.psv.getPicturesNavigation() === "any") { parent.select(); }
-		});
-	}
-}
-
-/**
- * Adds events related to keyboard
- * @private
- */
-export function initMapKeyboardHandler(parent) {
-	parent.map.keyboard.keydown = function(e) {
-		if (e.altKey || e.ctrlKey || e.metaKey) {return;}
-
-		// Custom keys
-		switch(e.key) {
-		case "*":
-		case "5":
-			parent.moveCenter();
-			return;
-
-		case "PageUp":
-		case "9":
-			parent.psv.goToNextPicture();
-			return;
-
-		case "PageDown":
-		case "3":
-			parent.psv.goToPrevPicture();
-			return;
-
-		case "Home":
-		case "7":
-			e.stopPropagation();
-			parent._toggleFocus();
-			return;
-
-		case "End":
-		case "1":
-			parent.mini.toggleAttribute("collapsed");
-			return;
-
-		case " ":
-		case "0":
-			parent.psv.toggleSequencePlaying();
-			return;
-		}
-
-		let zoomDir = 0;
-		let bearingDir = 0;
-		let pitchDir = 0;
-		let xDir = 0;
-		let yDir = 0;
-
-		switch (e.keyCode) {
-		case 61:
-		case 107:
-		case 171:
-		case 187:
-			zoomDir = 1;
-			break;
-
-		case 189:
-		case 109:
-		case 173:
-			zoomDir = -1;
-			break;
-
-		case 37:
-		case 100:
-			if (e.shiftKey) {
-				bearingDir = -1;
-			} else {
-				e.preventDefault();
-				xDir = -1;
-			}
-			break;
-
-		case 39:
-		case 102:
-			if (e.shiftKey) {
-				bearingDir = 1;
-			} else {
-				e.preventDefault();
-				xDir = 1;
-			}
-			break;
-
-		case 38:
-		case 104:
-			if (e.shiftKey) {
-				pitchDir = 1;
-			} else {
-				e.preventDefault();
-				yDir = -1;
-			}
-			break;
-
-		case 40:
-		case 98:
-			if (e.shiftKey) {
-				pitchDir = -1;
-			} else {
-				e.preventDefault();
-				yDir = 1;
-			}
-			break;
-
-		default:
-			return;
-		}
-
-		if (this._rotationDisabled) {
-			bearingDir = 0;
-			pitchDir = 0;
-		}
-
-		return {
-			cameraAnimation: (map) => {
-				const tr = this._tr;
-				map.easeTo({
-					duration: 300,
-					easeId: "keyboardHandler",
-					easing: t => t * (2-t),
-					zoom: zoomDir ? Math.round(tr.zoom) + zoomDir * (e.shiftKey ? 2 : 1) : tr.zoom,
-					bearing: tr.bearing + bearingDir * this._bearingStep,
-					pitch: tr.pitch + pitchDir * this._pitchStep,
-					offset: [-xDir * this._panStep, -yDir * this._panStep],
-					center: tr.center
-				}, {originalEvent: e});
-			}
-		};
-	}.bind(parent.map.keyboard);
-}
-
-const MAP_PARAMS_STORAGE = "pnx-map-parameters";
-
-/**
- * Reads map parameters from localStorage
- * @private
- */
-export function getMapParamsFromLocalStorage() {
-	const params = localStorage.getItem(MAP_PARAMS_STORAGE);
-	if(!params) { return {}; }
-	try {
-		return JSON.parse(params);
-	}
-	catch(e) {
-		console.warn("Can't read map parameters stored in localStorage", e);
-		return {};
-	}
-}
-
-/**
- * Save map parameters into localStorage.
- * @private
- */
-export function saveMapParamsToLocalStorage(map) {
-	// Save map state in localStorage
-	const save = () => localStorage.setItem(MAP_PARAMS_STORAGE, JSON.stringify({
-		center: Object.fromEntries(Object.entries(map.getCenter()).map(([k,v]) => ([k,v.toFixed(7)]))),
-		zoom: map.getZoom().toFixed(1),
-		background: map._parent.mapStyleComposer.basemap,
-		theme: map._parent.mapStyleComposer.panoramaxTheme,
-		endpoint: map._parent.mapStyleComposer.panoramax,
-	}));
-
-	// Add events to know when to rewrite info
-	map._parent.mapStyleComposer.addEventListener("filters-changed", save);
-	map._parent.mapStyleComposer.addEventListener("theme-changed", save);
-	map._parent.mapStyleComposer.addEventListener("basemap-changed", save);
-	map._parent.mapStyleComposer.addEventListener("panoramax-changed", save);
-	map.on("moveend", save);
-	map.on("zoomend", save);
-	map.on("dragend", save);
-	map.on("boxzoomend", save);
-}