@panoramax/web-viewer 4.0.3 → 4.1.0

package/src/components/menus/PictureMetadata.js

@@ -1,6 +1,6 @@
 import { LitElement, nothing, css } from "lit";
 import { html, unsafeStatic } from "lit/static-html.js";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
 import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
 import { faCamera } from "@fortawesome/free-solid-svg-icons/faCamera";
@@ -14,7 +14,8 @@ import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
 import { faSvg, titles, textarea, hidden } from "../styles";
 import { createWebComp } from "../../utils/widgets";
-import { getGPSPrecision } from "../../utils/picture";
+import { getGPSPrecision, getHashTags } from "../../utils/picture";
+import { PanoramaxMetaCatalogURL } from "../../utils/services";
 import {
 	getGrade, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_RES_360_VALUES,
 	QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_POND_GPS, QUALITYSCORE_POND_RES
@@ -81,14 +82,16 @@ export default class PictureMetadata extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
-		this._meta = this._parent?.psv?.getPictureMetadata();
-		this._parent?.oncePSVReady?.().then(() => {
-			this._parent.psv.addEventListener("picture-loaded", () => {
-				this._meta = this._parent.psv.getPictureMetadata();
-			});
-			this._parent.psv.addEventListener("annotation-click", () => {
-				const tabs = this.shadowRoot.querySelector("pnx-tabs");
-				if(tabs) { tabs.setAttribute("activeTabIndex", 4); }
+		onceParentAvailable(this).then(() => {
+			this._meta = this._parent?.psv?.getPictureMetadata();
+			this._parent?.oncePSVReady?.().then(() => {
+				this._parent.psv.addEventListener("picture-loaded", () => {
+					this._meta = this._parent.psv.getPictureMetadata();
+				});
+				this._parent.psv.addEventListener("annotation-click", () => {
+					const tabs = this.shadowRoot.querySelector("pnx-tabs");
+					if(tabs) { tabs.setAttribute("activeTabIndex", 4); }
+				});
 			});
 		});
 	}
@@ -101,6 +104,14 @@ export default class PictureMetadata extends LitElement {
 		}
 	}
 
+	/** @private */
+	_onCaptureDateClick() {
+		const qsTab = this.shadowRoot.querySelector("pnx-tabs");
+		if(qsTab) {
+			qsTab.setAttribute("activeTabIndex", 1);
+		}
+	}
+
 	/** @private */
 	_toTab(title, data) {
 		return html`
@@ -108,7 +119,7 @@ export default class PictureMetadata extends LitElement {
 			<div slot="content" class="data-blocks">
 				${data.filter(b => b).map(b => html`<div class="data-block" style=${b.style}>
 					<h5>${b.title}</h5>
-					<div style=${b.content_style}>${b.content}</div>
+					<div style=${b.content_style} @click=${b.click}>${b.content}</div>
 				</div>`)}
 			</div>
 		`;
@@ -234,6 +245,16 @@ export default class PictureMetadata extends LitElement {
 		);
 		let semanticsData = [];
 		if(hasSemantics) {
+			// Hashtags
+			const hashtags = getHashTags(this._meta);
+			if(hashtags.length > 0) {
+				semanticsData.push({
+					title: this._parent?._t.pnx.semantics_hashtags,
+					style: "width: 100%",
+					content: hashtags.join(" ")
+				});
+			}
+			
 			// Full list of picture tags
 			semanticsData.push({
 				title: this._parent?._t.pnx.semantics_tags_picture,
@@ -284,7 +305,7 @@ export default class PictureMetadata extends LitElement {
 				}
 				return {
 					title: key,
-					content: value.length > 30 ? html`<textarea readonly>${value}</textarea>`: value,
+					content: value.length > 30 ? html`<textarea readonly .value=${value}></textarea>`: value,
 					style: value.length > 30 ? "width: 100%" : undefined
 				};
 			});
@@ -313,9 +334,11 @@ export default class PictureMetadata extends LitElement {
 			// Capture date
 			this._meta?.caption?.date && {
 				title: this._parent?._t.pnx.metadata_general_date,
+				click: this._onCaptureDateClick,
+				content_style: "cursor: pointer",
 				content: html`
 					<strong>${new Intl.DateTimeFormat(lang, {timeZone: this._meta.caption.tz, dateStyle: "long"}).format(this._meta.caption.date)}</strong>
-					<br />${new Intl.DateTimeFormat(lang, {timeZone: this._meta.caption.tz, hour: "numeric",minute:"numeric"}).format(this._meta.caption.date)}
+					<br />${new Intl.DateTimeFormat(lang, {timeZone: this._meta.caption.tz, hour: "numeric",minute:"numeric", second: "numeric"}).format(this._meta.caption.date)}
 				`
 			},
 			// Camera
@@ -334,10 +357,10 @@ export default class PictureMetadata extends LitElement {
 			// Quality score
 			hasQualityScore && {
 				title: this._parent?._t.pnx.metadata_quality,
+				click: this._onQualityScoreClick,
 				content: html`<pnx-quality-score
 					grade=${generalGrade}
 					style="font-size: 14px; cursor: pointer"
-					@click=${this._onQualityScoreClick}
 				/>`
 			},
 			// Copy ID
@@ -367,9 +390,18 @@ export default class PictureMetadata extends LitElement {
 			},
 			this._meta?.origInstance && {
 				title: this._parent?._t.pnx.metadata_general_instance,
-				content: html`<strong><a href=${this._meta.origInstance.href+window.location.search} target="_blank">
-					${this._meta.origInstance.instance_name || this._meta.origInstance.href.replace(/^http.?:\/\//, "")}
-				</a></strong>`
+				content: html`<strong>
+					<a href=${this._meta.origInstance.href+window.location.search} target="_blank" style="text-decoration: none">
+						<img
+							src=${PanoramaxMetaCatalogURL()+"/api/instances/"+this._meta.origInstance.instance_name+"/logo"}
+							style="height: 30px; max-width: 150px; vertical-align: middle"
+							alt=""
+						/>
+						<span style="text-decoration: underline">
+							${this._meta.origInstance.instance_name || this._meta.origInstance.href.replace(/^http.?:\/\//, "")}
+						</span>
+					</a>
+				</strong>`
 			}
 		];
 

package/src/components/menus/PlayerOptions.js

@@ -4,7 +4,7 @@ import { faRocket } from "@fortawesome/free-solid-svg-icons/faRocket";
 import { faLightbulb } from "@fortawesome/free-solid-svg-icons/faLightbulb";
 import { faPersonBiking } from "@fortawesome/free-solid-svg-icons/faPersonBiking";
 import { PIC_MAX_STAY_DURATION } from "../ui/Photo";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 
 /**
  * Player Options menu displays player speed and contrast settings.
@@ -40,9 +40,9 @@ export default class PlayerOptions extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.psv?.addEventListener("transition-duration-changed", e => {
+		onceParentAvailable(this).then(() => this._parent?.psv?.addEventListener("transition-duration-changed", e => {
 			this.renderRoot.querySelector("#pnx-player-speed").value = PIC_MAX_STAY_DURATION - e.detail.value;
-		});
+		}));
 	}
 
 	/** @private */

package/src/components/menus/Share.js

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from "lit";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 import { faSvg, textarea, titles, input } from "../styles";
 import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
@@ -47,7 +47,7 @@ export default class ShareMenu extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.onceReady().then(() => {
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
 			this._onUrlChange();
 			this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
 		});
@@ -85,7 +85,7 @@ export default class ShareMenu extends LitElement {
 						>
 							${fa(faCircleInfo)} ${this._parent?._t.pnx.share_embed_docs}
 						</pnx-link-button>
-						<textarea readonly>${iframe}</textarea>
+						<textarea readonly .value=${iframe}></textarea>
 						<pnx-copy-button
 							._t=${this._parent?._t}
 							text=${iframe}

package/src/components/menus/index.js

@@ -4,13 +4,14 @@
  */
 
 export {default as AnnotationsList} from "./AnnotationsList";
+export {default as MapBackground} from "./MapBackground";
 export {default as MapFilters} from "./MapFilters";
 export {default as MapLayers} from "./MapLayers";
-export {default as MapBackground} from "./MapBackground";
+export {default as MapLegend} from "./MapLegend";
+export {default as MiniPictureLegend} from "./MiniPictureLegend";
+export {default as PictureLegend} from "./PictureLegend";
+export {default as PictureMetadata} from "./PictureMetadata";
 export {default as PlayerOptions} from "./PlayerOptions";
 export {default as QualityScoreDoc} from "./QualityScoreDoc";
 export {default as ReportForm} from "./ReportForm";
 export {default as Share} from "./Share";
-export {default as PictureLegend} from "./PictureLegend";
-export {default as MapLegend} from "./MapLegend";
-export {default as PictureMetadata} from "./PictureMetadata";

package/src/components/styles.js

@@ -212,6 +212,17 @@ export const btn = css`
 		background-color: var(--widget-bg-primary-hover);
 	}
 
+	/* Fully-filled warning style */
+	.pnx-btn-fullwarn {
+		background-color: var(--widget-bg-warn);
+		color: var(--widget-font-warn);
+		border: none;
+	}
+
+	.pnx-btn-fullwarn:not(:disabled):hover {
+		background-color: var(--widget-bg-warn);
+	}
+
 	/* Outline style */
 	.pnx-btn-outline {
 		border: 1px solid var(--widget-border-btn);

package/src/components/ui/AnnotationsSwitch.js

@@ -0,0 +1,169 @@
+import { LitElement, html, css, nothing } from "lit";
+import { fa } from "../../utils/widgets";
+import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
+import { hasAnnotations } from "../../utils/picture";
+import { classMap } from "lit/directives/class-map.js";
+import { panel } from "../styles";
+
+const DISABLE_ANNOTATIONS_PARAM = "pnx-disable-annotations";
+
+/**
+ * AnnotationsSwitch component allows to switch on/off pictures annotations.
+ * @class Panoramax.components.ui.AnnotationsSwitch
+ * @element pnx-annotations-switch
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-annotations-switch ._parent=${viewer} />
+ * ```
+ */
+export default class AnnotationsSwitch extends LitElement {
+	/** @private */
+	static styles = [ panel, css`
+		.pnx-panel {
+			padding: 5px;
+			margin-top: 5px;
+			width: max-content;
+  			min-width: unset;
+		}
+
+		/* Custom button look */
+		pnx-button::part(btn) {
+			border-radius: 8px;
+			height: 26px;
+			width: 26px;
+		}
+
+		pnx-button[size="xl"]::part(btn) {
+			border-radius: 8px;
+			height: 38px;
+			width: 38px;
+		}
+
+		pnx-button[active]::part(btn),
+		pnx-button[active]:hover::part(btn) {
+			background-color: var(--widget-bg-active) !important;
+			border-color: var(--widget-bg-active) !important;
+			color: var(--widget-font-active) !important;
+		}
+
+		/* No-annotations badge */
+		.pnx-annotations-switch-empty {
+			position: absolute;
+			top: 1px;
+			right: 1px;
+			color: var(--orange);
+			height: 8px;
+		}
+
+		pnx-button[size="xl"] .pnx-annotations-switch-empty {
+			top: 2px;
+			right: 2px;
+			height: 12px;
+		}
+
+		pnx-button[active] .pnx-annotations-switch-empty {
+			color: var(--yellow);
+		}
+	`];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.AnnotationsSwitch#
+	 * @type {Object}
+	 * @property {string} [size=xl] Button size (md, xl)
+	 */
+	/** @private */
+	static properties = {
+		size: {type: String},
+		_annotationsToggled: {state: true},
+		_warnNoAnnot: {state: true},
+		_warnNoAnnotTooltip: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._annotationsToggled = false;
+		this._warnNoAnnot = false;
+		this._warnNoAnnotTooltip = false;
+		this.size = "xl";
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		// Check if annotations have been explicitly disabled
+		const annotsDisabled = localStorage.getItem(DISABLE_ANNOTATIONS_PARAM) === "true";
+
+		this._parent.onceReady().then(() => {
+			this._parent.psv.addEventListener("annotations-toggled", e => {
+				this._annotationsToggled = e.detail.visible;
+				this._persistAnnotationsLocalStorage(this._annotationsToggled);
+			});
+
+			this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
+			this._parent.psv.addEventListener("picture-loaded", () => {
+				this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
+			});
+		});
+
+		this._parent.onceFirstPicLoaded().then(() => {
+			this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
+
+			if(!this._annotationsToggled && !annotsDisabled) {
+				this._parent.psv.toggleAllAnnotations(true);
+				this._annotationsToggled = true;
+			}
+			this._persistAnnotationsLocalStorage(this._annotationsToggled);
+		});
+	}
+
+	/** @private */
+	_persistAnnotationsLocalStorage(isAnnotToggled) {
+		localStorage.setItem(DISABLE_ANNOTATIONS_PARAM, isAnnotToggled ? "false": "true");
+	}
+
+	/** @private */
+	_onClick() {
+		if(!this._annotationsToggled && this._warnNoAnnot) {
+			this._warnNoAnnotTooltip = true;
+			setTimeout(() => this._warnNoAnnotTooltip = false, 2000);
+		}
+		this._persistAnnotationsLocalStorage(!this._annotationsToggled);
+		this._parent.psv.toggleAllAnnotations(!this._annotationsToggled);
+	}
+
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		const panelClasses = {
+			"pnx-panel": true,
+			"pnx-hidden": !this._warnNoAnnotTooltip,
+		};
+
+		return html`
+			<pnx-button
+				kind="superflat"
+				size=${this.size}
+				style="vertical-align: middle"
+				class="pnx-print-hidden"
+				title=${this._annotationsToggled ? this._parent._t?.pnx.semantics_hide_annotations : this._parent._t?.pnx.semantics_show_annotations}
+				active=${this._annotationsToggled ? "" : nothing}
+				@click=${this._onClick}
+			>
+				${fa(faTags, { styles: { "height": "20px" }})}
+				${this._warnNoAnnot ? fa(faTriangleExclamation, { classes: "pnx-annotations-switch-empty" }) : nothing}
+			</pnx-button>
+			<div
+				class=${classMap(panelClasses)}
+				@click=${() => this._warnNoAnnotTooltip = false}
+			>
+				${this._parent._t?.pnx.semantics_zero_annotations}
+			</div>
+		`;
+	}
+}
+
+customElements.define("pnx-annotations-switch", AnnotationsSwitch);

package/src/components/ui/Button.js

@@ -23,7 +23,7 @@ export default class Button extends LitElement {
 	 * @memberof Panoramax.components.ui.Button#
 	 * @type {Object}
 	 * @property {boolean} [active=false] Whether the button is in an active state.
-	 * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat, inline, superinline)
+	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline)
 	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
 	 * @property {boolean} [disabled=false] Whether the button is disabled.
 	 * @property {string} [type] The button type (e.g., 'submit').

package/src/components/ui/CopyButton.js

@@ -38,7 +38,7 @@ export default class CopyButton extends LitElement {
      * @type {Object}
      * @property {string} [text] Text to copy in clipboard on click (use either this parameter or input, not both)
 	 * @property {input} [input] ID of a HTML input field to copy content from in clipboard (use either this parameter or text, not both)
-	 * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat, inline, superinline)
+	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline)
 	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
 	 * @property {boolean} [unstyled=false] Disable all styling (for list group integration)
 	 * @property {string} [title] Tooltip text displayed when hovering over the button

package/src/components/ui/LinkButton.js

@@ -31,7 +31,7 @@ export default class LinkButton extends LitElement {
 	 * @property {string} [title] Tooltip text displayed when hovering over the button
 	 * @property {string} [download] Indicates if the linked resource should be downloaded
 	 * @property {string} [class] Custom CSS class for additional styling
-	 * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat)
+	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, outline, flat, superflat)
 	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
 	 */
 	static properties = {

package/src/components/ui/Map.css

@@ -1,3 +1,7 @@
+.maplibregl-map.pnx-map {
+	background: white;
+}
+
 /* Picture thumbnail on map */
 .maplibregl-popup-content {
 	padding: 5px !important;

package/src/components/ui/Map.js

@@ -1,7 +1,7 @@
 import "./Map.css";
 import {
 	VECTOR_STYLES, TILES_PICTURES_ZOOM, getThumbGif, RASTER_LAYER_ID, combineStyles,
-	getMissingLayerStyles, isLabelLayer, getUserLayerId, getUserSourceId,
+	getMissingLayerStyles, isLabelLayer, getUserLayerId, getUserSourceId, isNullCoordinates,
 } from "../../utils/map";
 import { COLORS } from "../../utils/utils";
 import MarkerBaseSVG from "../../img/marker.svg";
@@ -37,6 +37,7 @@ maplibregl.addProtocol("pmtiles", new pmtiles.Protocol().tile);
  * @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=streets] Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
  * @param {string} [options.attributionControl.customAttribution] To override default map attribution.
+ * @param {boolean} [options.picMarkerDraggable] To make the picture marker draggable, default to false.
  * @fires Panoramax.components.ui.Map#background-changed
  * @fires Panoramax.components.ui.Map#users-changed
  * @fires Panoramax.components.ui.Map#sequence-hover
@@ -205,7 +206,7 @@ export default class Map extends maplibregl.Map {
 	 */
 	_initMapPosition() {
 		if(
-			(!this._options.center || this._options.center == [0,0])
+			isNullCoordinates(this._options.center)
 			&& (!this._options.zoom || this._options.zoom === 0)
 			&& (!this._options.hash)
 		) {
@@ -379,6 +380,9 @@ export default class Map extends maplibregl.Map {
 			});
 		});
 
+		// Force style reload
+		this.reloadLayersStyles();
+
 		/**
 		 * Event for visible users changes
 		 *
@@ -413,13 +417,16 @@ export default class Map extends maplibregl.Map {
 
 	/**
 	 * Shows on map a picture position and heading.
+	 * 
+	 * If no longitude & latitude are set, marker is removed from map.
 	 * @memberof Panoramax.components.ui.Map#
 	 * @param {number} lon The longitude
 	 * @param {number} lat The latitude
 	 * @param {number} heading The heading
 	 * @param {boolean} [skipCenter=false] Set to true to avoid map centering on marker
+	 * @param {string} [picId=null] The picture Id
 	 */
-	displayPictureMarker(lon, lat, heading, skipCenter = false) {
+	displayPictureMarker(lon, lat, heading, skipCenter = false, picId = null) {
 		this._picMarkerPreview.remove();
 
 		// Show marker corresponding to selection
@@ -428,6 +435,7 @@ export default class Map extends maplibregl.Map {
 				.setLngLat([lon, lat])
 				.setRotation(heading)
 				.addTo(this);
+			this._picMarker.picId = picId ;
 		}
 		else {
 			this._picMarker.remove();
@@ -877,8 +885,12 @@ export default class Map extends maplibregl.Map {
 		img.src = selected ? MarkerSelectedSVG : MarkerBaseSVG;
 		img.alt = "";
 		return new maplibregl.Marker({
-			element: img
-		});
+			element: img,
+			picId: null
+		})
+			// only picMarker could be draggable, don't for picMarkerPreview.
+			.setDraggable(selected && this._options.picMarkerDraggable)
+		;
 	}
 
 	/**

package/src/components/ui/MapMore.js

@@ -198,32 +198,21 @@ export default class MapMore extends Map {
 		return s;
 	}
 
-	/**
-	 * Change the map 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 {string} [filters.camera] Camera make and model to keep
-	 * @param {string} [filters.theme] Map theme to use
-	 * @param {number[]} [filters.qualityscore] QualityScore values, as a list of 1 to 5 grades
-	 * @param {boolean} [skipZoomIn=false] If true, doesn't force zoom in to map level >= 7
-	 * @memberof Panoramax.components.core.MapMore#
-	 */
-	setFilters(filters, skipZoomIn = false) {
+	/** @private */
+	_mapFiltersToLayersFilters(filters) {
+		let mapFilters = {};
 		let mapSeqFilters = [];
 		let mapPicFilters = [];
 		let reloadMapStyle = false;
-		this._mapFilters = {};
 
 		if(filters.minDate && filters.minDate !== "") {
-			this._mapFilters.minDate = filters.minDate;
+			mapFilters.minDate = filters.minDate;
 			mapSeqFilters.push([">=", ["get", "date"], filters.minDate]);
 			mapPicFilters.push([">=", ["get", "ts"], filters.minDate]);
 		}
 
 		if(filters.maxDate && filters.maxDate !== "") {
-			this._mapFilters.maxDate = filters.maxDate;
+			mapFilters.maxDate = filters.maxDate;
 			mapSeqFilters.push(["<=", ["get", "date"], filters.maxDate]);
 
 			// Get tomorrow date for pictures filtering
@@ -235,16 +224,16 @@ export default class MapMore extends Map {
 		}
 
 		if(filters.pic_type && filters.pic_type !== "") {
-			this._mapFilters.pic_type = filters.pic_type === "flat" ? "flat" : "equirectangular";
-			mapSeqFilters.push(["==", ["get", "type"], this._mapFilters.pic_type]);
-			mapPicFilters.push(["==", ["get", "type"], this._mapFilters.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(this._hasGridStats()) {
 			reloadMapStyle = true;
 		}
 
 		if(filters.camera && filters.camera !== "") {
-			this._mapFilters.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";
@@ -256,13 +245,13 @@ export default class MapMore extends Map {
 		}
 
 		if(filters.qualityscore && filters.qualityscore.length > 0) {
-			this._mapFilters.qualityscore = filters.qualityscore;
-			mapSeqFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", this._mapFilters.qualityscore]]);
-			mapPicFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", this._mapFilters.qualityscore]]);
+			mapFilters.qualityscore = filters.qualityscore;
+			mapSeqFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", mapFilters.qualityscore]]);
+			mapPicFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", mapFilters.qualityscore]]);
 		}
 
 		if(filters.theme && Object.values(MAP_THEMES).includes(filters.theme)) {
-			this._mapFilters.theme = filters.theme;
+			mapFilters.theme = filters.theme;
 			reloadMapStyle = true;
 		}
 
@@ -280,6 +269,25 @@ export default class MapMore extends Map {
 			];
 		}
 
+		return { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle };
+	}
+
+	/**
+	 * Change the map 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 {string} [filters.camera] Camera make and model to keep
+	 * @param {string} [filters.theme] Map theme to use
+	 * @param {number[]} [filters.qualityscore] QualityScore values, as a list of 1 to 5 grades
+	 * @param {boolean} [skipZoomIn=false] If true, doesn't force zoom in to map level >= 7
+	 * @memberof Panoramax.components.core.MapMore#
+	 */
+	setFilters(filters, skipZoomIn = false) {
+		let { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle } = this._mapFiltersToLayersFilters(filters);
+
+		this._mapFilters = mapFilters;
 		if(reloadMapStyle) {
 			this.reloadLayersStyles();
 		}
@@ -291,9 +299,10 @@ export default class MapMore extends Map {
 				7, mapSeqFilters
 			];
 		}
-		
+
 		this.filterUserLayersContent("sequences", mapSeqFilters);
 		this.filterUserLayersContent("pictures", mapPicFilters);
+
 		if(
 			!skipZoomIn
 			&& (
@@ -321,4 +330,31 @@ export default class MapMore extends Map {
 		 */
 		this.fire("filters-changed", Object.assign({}, this._mapFilters));
 	}
+
+	/**
+	 * 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 = []) {
+		await super.setVisibleUsers(visibleIds);
+		
+		// Force reload of styles & filters
+		let { mapSeqFilters, mapPicFilters, reloadMapStyle } = this._mapFiltersToLayersFilters(this._mapFilters);
+
+		if(reloadMapStyle) {
+			this.reloadLayersStyles();
+		}
+
+		const allUsers = visibleIds.includes("geovisio");
+		if(mapSeqFilters && allUsers) {
+			mapSeqFilters = ["step", ["zoom"],
+				true,
+				7, mapSeqFilters
+			];
+		}
+
+		this.filterUserLayersContent("sequences", mapSeqFilters);
+		this.filterUserLayersContent("pictures", mapPicFilters);
+	}
 }

package/src/components/ui/Photo.css

@@ -35,7 +35,16 @@
 	height: auto;
 }
 
-/* No virtual tour arrows if photo is reduced */
-pnx-mini .psv-virtual-tour-arrows {
+.pnx-psv-tour-arrows svg:hover {
+	filter: drop-shadow(0 0 15px var(--blue));
+}
+
+.pnx-psv-playing .pnx-psv-tour-arrows {
+	display: none;
+}
+
+/* No virtual tour arrows or annotations if photo is reduced */
+pnx-mini .psv-virtual-tour-arrows,
+pnx-mini .pnx-psv-annotation {
 	display: none;
 }