@panoramax/web-viewer 4.0.3 → 4.1.0-develop-55fdf56c

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;
 }

package/src/components/ui/Photo.js

@@ -94,7 +94,7 @@ export default class Photo extends PSViewer {
 				resolution: parent.isWidthSmall() ? 32 : 64,
 				shouldGoFast: options.shouldGoFast,
 			}],
-			withCredentials: parent?.fetchOptions?.credentials == "include",
+			withCredentials: parent.api._getPSVWithCredentials(),
 			requestHeaders: parent?.fetchOptions?.headers,
 			panorama: BASE_PANORAMA,
 			lang: parent._t.psv,
@@ -803,6 +803,7 @@ export default class Photo extends PSViewer {
 	 */
 	playSequence() {
 		this._sequencePlaying = true;
+		this.container.classList.add("pnx-psv-playing");
 
 		/**
 		 * Event for sequence starting to play
@@ -841,6 +842,7 @@ export default class Photo extends PSViewer {
 	 */
 	stopSequence() {
 		this._sequencePlaying = false;
+		this.container.classList.remove("pnx-psv-playing");
 
 		// Next picture timer is pending
 		if(this._playTimer) {
@@ -952,8 +954,8 @@ export default class Photo extends PSViewer {
 
 		if(!visible) { this._myMarkers.clearMarkers(); }
 		else {
-			let annotations = meta.properties.annotations;
-			if(annotations.length === 0) { console.warn("No annotation available on picture", meta.id); }
+			let annotations = meta.properties.annotations || [];
+			if(annotations?.length === 0) { console.warn("No annotation available on picture", meta.id); }
 
 			const picBData = this.state.textureData.panoData?.baseData;
 
@@ -990,6 +992,7 @@ export default class Photo extends PSViewer {
 					id: `annotation-${a.id}`,
 					polygon: shape,
 					data: { id: a.id },
+					className: "pnx-psv-annotation",
 					svgStyle: {
 						stroke: "var(--orange)",
 						strokeWidth: "3px",

package/src/components/ui/SemanticsEditor.js

@@ -0,0 +1,157 @@
+import { LitElement, html, css } from "lit";
+import Basic from "../core/Basic";
+import { parseSemanticsString, computeDiffTags } from "../../utils/semantics";
+import { textarea } from "../styles";
+import JSON5 from "json5";
+
+/**
+ * Semantics Editor offer an easy-to-use input for adding or editing semantics tags.
+ * 
+ * It manipulates list of `{key: "mypanokey", value: "myvalue"}` entries through `semantics` attribute.
+ * 
+ * @class Panoramax.components.ui.SemanticsEditor
+ * @element pnx-semantics-editor
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @fires Panoramax.components.ui.SemanticsEditor#change
+ * @example
+ * ```html
+ * <!-- Basic example -->
+ * <pnx-semantics-editor
+ *    id="editor"
+ *    semantics=${mypic.semantics}
+ *    ._t=${viewer._t}
+ *    onchange=${e => console.log(e.detail.semantics)}
+ * />
+ * 
+ * <!-- You can access editor and check its validity through native web browser functions -->
+ * <script>
+ *    const editor = document.getElementById("editor");
+ *    console.log(editor.checkValidity()); // True if input is valid
+ * </script>
+ * 
+ * <!-- You can change specifically style of textarea -->
+ * <style>
+ *   pnx-semantics-editor::part(text) {
+ *      color: blue;
+ *   }
+ * </style>
+ * ```
+ */
+export default class SemanticsEditor extends LitElement {
+	static styles = [textarea, css`
+		textarea:invalid {
+			border: 2px solid var(--red);
+			background-color:var(--beige);
+		}
+	`];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.SemanticsEditor#
+	 * @type {Object}
+	 * @property {object} [semantics] The `semantics` field of a picture or annotation feature. It is updated when field changes, but reflect the whole list of new tags (not delta needed by API). If you want delta, please use getDiff function.
+	 * @property {number} [rows=3] The amount of rows shown for textarea
+	 */
+	static properties = {
+		semantics: {converter: Basic.GetJSONConverter(), reflect: true},
+		rows: {type: Number},
+		_valid: {state: true},
+		_t: {converter: Basic.GetJSONConverter()},
+		_firstSemantics: {state: true},
+	};
+
+	constructor() {
+		super();
+		this.semantics = null;
+		this._valid = true;
+		this._firstSemantics = null;
+		this.rows = 3;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		this._firstSemantics = this.semantics === null ? [] : JSON5.parse(JSON5.stringify(this.semantics));
+	}
+
+	/**
+	 * Get current delta between initial tags and user changes.
+	 * @memberof Panoramax.components.ui.SemanticsEditor#
+	 * @returns {object[]} The list of tag changes (in API format)
+	 */
+	getDiff() {
+		return computeDiffTags(this._firstSemantics || [], this.semantics);
+	}
+
+	/**
+	 * Check if input is having a valid value.
+	 * @memberof Panoramax.components.ui.SemanticsEditor#
+	 * @returns {boolean} True if it's valid
+	 */
+	checkValidity() {
+		return this._valid;
+	}
+	
+	/** @private */
+	_onInput(e) {
+		const tarea = e.target;
+		try {
+			this.semantics = parseSemanticsString(tarea.value) || [];
+			this._valid = true;
+		} catch (err) {
+			if(err.message !== "Invalid tags") { console.error(err); }
+			this._valid = false;
+		}
+	}
+	
+	/** @private */
+	_onBlur(e) {
+		const prevValidity = e.target.checkValidity();
+
+		if(this._valid) {
+			e.target.setCustomValidity("");
+
+			/**
+			 * Event for value change.
+			 * 
+			 * Note that this event is launched only on valid input.
+			 *
+			 * @event Panoramax.components.ui.SemanticsEditor#change
+			 * @type {CustomEvent}
+			 * @property {object[]} detail.semantics The new tags list (in API semantics property format)
+			 * @property {object[]} detail.delta The delta between old and current tags (expected by API)
+			 */
+			this.dispatchEvent(new CustomEvent("change", {
+				detail: {
+					semantics: this.semantics || [],
+					delta: computeDiffTags(this._firstSemantics || [], this.semantics),
+				}
+			}));
+		}
+		else if(prevValidity) { // Do not call again if already shows up, to fix Chrome issue
+			e.target.setCustomValidity(this._t?.pnx.semantics_editor_error || "Invalid syntax");
+			e.target.reportValidity();
+		}
+	}
+	
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		return html`
+			<textarea
+				part="text"
+				autocomplete="off"
+				autocorrect="off"
+				autocapitalize="off"
+				spellcheck="false"
+				placeholder="key1=value1\nprefix|key2=value2"
+				@input=${this._onInput}
+  				@blur=${this._onBlur}
+				rows=${this.rows}
+				.value=${(this.semantics || []).map(s => `${s.key}=${s.value}`).join("\n")}
+			></textarea>
+		`;
+	}
+}
+
+customElements.define("pnx-semantics-editor", SemanticsEditor);

package/src/components/ui/index.js

@@ -7,7 +7,7 @@ export {default as ButtonGroup} from "./ButtonGroup";
 export {default as Button} from "./Button";
 export {default as CopyButton} from "./CopyButton";
 export {default as Grade} from "./Grade";
-export {default as HashTags} from "./HashTags";
+export {default as AnnotationsSwitch} from "./AnnotationsSwitch";
 export {default as LinkButton} from "./LinkButton";
 export {default as ListGroup} from "./ListGroup";
 export {default as ListItem} from "./ListItem";
@@ -19,6 +19,7 @@ export {default as Popup} from "./Popup";
 export {default as ProgressBar} from "./ProgressBar";
 export {default as QualityScore} from "./QualityScore";
 export {default as SearchBar} from "./SearchBar";
+export {default as SemanticsEditor} from "./SemanticsEditor";
 export {default as SemanticsTable} from "./SemanticsTable";
 export {default as TogglableGroup} from "./TogglableGroup";
 import * as widgets from "./widgets";

package/src/components/ui/widgets/GeoSearch.js

@@ -3,6 +3,7 @@ import maplibregl from "!maplibre-gl";
 
 import { LitElement, html } from "lit";
 import { forwardGeocodingBAN, forwardGeocodingStandard, forwardGeocodingNominatim } from "../../../utils/geocoder";
+import { onceParentAvailable } from "../../../utils/widgets";
 import "./GeoSearch.css";
 
 const GEOCODER_ENGINES = {
@@ -63,10 +64,10 @@ export default class GeoSearch extends LitElement {
 		super.connectedCallback();
 
 		this._geocoderEngine = GEOCODER_ENGINES[this.geocoder] || (config => GEOCODER_ENGINES.standard(config, this.geocoder));
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
 			this._geolocate = this._geolocateCtrl.onAdd(this._parent.map);
 			this._geolocate.setAttribute("slot", "pre");
-		});
+		}));
 	}
 
 	/** @private */

package/src/components/ui/widgets/Legend.js

@@ -1,9 +1,10 @@
-import {LitElement, html, css} from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { panel } from "../../styles";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
 import PanoramaxImg from "../../../img/panoramax.svg";
 import { classMap } from "lit/directives/class-map.js";
+import { PanoramaxWebsiteURL } from "../../../utils/services";
 
 /**
  * Legend widget, handling switch between map and photo components.
@@ -37,7 +38,7 @@ export default class Legend extends LitElement {
 		.pnx-panel[part="panel"] {
 			border-radius: 10px;
 			position: relative;
-			max-width: 80vw;
+			max-width: 450px;
 			z-index: 121; /* To appear above mini component */
 			min-width: unset;
 		}
@@ -46,7 +47,8 @@ export default class Legend extends LitElement {
 			width: 250px;
 		}
 		.presentation {
-			font-size: 0.9em;
+			font-size: 0.85em;
+			line-height: 1em;
 			display: flex;
 			gap: 5px;
 			align-items: center;
@@ -54,6 +56,40 @@ export default class Legend extends LitElement {
 		.logo {
 			width: 45px;
 		}
+		pnx-map-legend {
+			display: block;
+			margin-top: 5px;
+		}
+
+		/* Lighter/smaller version */
+		.pnx-panel[part="panel"].pnx-legend-light {
+			display: flex;
+			gap: 3px;
+			padding: 3px 8px 3px 3px;
+			width: unset;
+			min-width: unset;
+			align-items: center;
+			font-size: 10px;
+			margin-right: -10px;
+			margin-bottom: -10px;
+			border-radius: 0;
+			border-top-left-radius: 5px;
+			border-right: none;
+  			border-bottom: none;
+		}
+		.pnx-legend-light a,
+		.pnx-legend-light .presentation {
+			font-size: 10px;
+		}
+		.pnx-legend-light .logo {
+			width: 15px;
+		}
+
+		.pnx-legend-light pnx-map-legend {
+			width: max-content;
+			margin-top: unset;
+			font-size: 10px;
+		}
 	`];
 
 	/**
@@ -62,41 +98,65 @@ export default class Legend extends LitElement {
 	 * @type {Object}
 	 * @property {string} [focus] The focused main component (map, pic)
 	 * @property {string} [picture] The picture ID
+	 * @property {boolean} [light=false] Lighter version (for iframes)
 	 */
 	static properties = {
 		focus: {type: String},
 		picture: {type: String},
+		light: {type: Boolean},
 	};
 
+	constructor() {
+		super();
+		this.light = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		onceParentAvailable(this).then(() => this.requestUpdate());
+	}
+
 	render() {
 		const classes = {
 			"pnx-panel": true,
 			"pnx-padded": this.focus == "map",
+			"pnx-legend-light": this.light,
 		};
 
 		return html`<div class=${classMap(classes)} part="panel">
 			<div
 				class="presentation"
-				style=${this.focus != "map" && this.picture ? "display: none": ""}
+				style=${!this.light && this.focus != "map" && this.picture ? "display: none": ""}
 			>
 				<img class="logo" src=${PanoramaxImg} alt="" />
-				<div>
-					${this._parent?._t.pnx.whats_panoramax}
-					<pnx-link-button
+
+				${this.light ? html`
+					&copy; <a
+						href=${PanoramaxWebsiteURL()}
 						title=${this._parent?._t.map.more_panoramax}
-						kind="superinline"
-						href="https://panoramax.fr"
 						target="_blank"
-						size="sm"
-					>
-						${fa(faInfoCircle)}
-					</pnx-link-button>
-				</div>
+					>${this._parent?._t.pnx.panoramax}</a> |
+				` : html`
+					<div>
+						${this._parent?._t.pnx.whats_panoramax}
+						<pnx-link-button
+							title=${this._parent?._t.map.more_panoramax}
+							kind="superinline"
+							href=${PanoramaxWebsiteURL()}
+							target="_blank"
+							size="sm"
+						>
+							${fa(faInfoCircle)}
+						</pnx-link-button>
+					</div>
+				`}
 			</div>
 			<pnx-picture-legend
 				._parent=${this._parent}
 				style=${this.focus == "map" ? "display: none": ""}
 				collapsable
+				light=${this.light || nothing}
 			>
 				<slot slot="editors" name="editors">
 					<pnx-widget-osmeditors ._parent=${this._parent} />
@@ -105,6 +165,7 @@ export default class Legend extends LitElement {
 			<pnx-map-legend
 				._parent=${this._parent}
 				style=${this.focus != "map" ? "display: none": ""}
+				light=${this.light || nothing}
 			></pnx-map-legend>
 		</div>`;
 	}

package/src/components/ui/widgets/MapFiltersButton.js

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing } from "lit";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets";
 import { faSliders } from "@fortawesome/free-solid-svg-icons/faSliders";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
 import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
@@ -45,7 +45,7 @@ export default class MapFiltersButton extends LitElement {
 		super.connectedCallback();
 
 		// Listen to user visibility changes to switch the filter active icon
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
 			this._active = (
 				Object.keys(this._parent.map._mapFilters).filter(d => d && d !== "theme").length > 0
 				|| this._parent.map.getVisibleUsers().filter(u => u !== "geovisio").length > 0
@@ -64,7 +64,7 @@ export default class MapFiltersButton extends LitElement {
 					|| e.usersIds.filter(u => u !== "geovisio").length > 0
 				);
 			});
-		});
+		}));
 	}
 
 	/** @private */

package/src/components/ui/widgets/MapLayersButton.js

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing } from "lit";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets";
 import { faLayerGroup } from "@fortawesome/free-solid-svg-icons/faLayerGroup";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
 import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
@@ -35,12 +35,12 @@ export default class MapLayersButton extends LitElement {
 
 		const nullThemes = [undefined, null, "", "default"];
 
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
 			this._active = !nullThemes.includes(this._parent.map._mapFilters.theme);
 			this._parent.map.on("filters-changed", e => {
 				this._active = !nullThemes.includes(e.theme);
 			});
-		});
+		}));
 	}
 
 	/** @private */