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

package/build/utils/map.js

@@ -0,0 +1,788 @@
+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);
+}