@panoramax/web-viewer 5.2.0-develop-6a40c2ee → 5.2.0-develop-434137e7

package/build/esm/components/menus/MapLayers.js

@@ -1,12 +1,12 @@
 import { LitElement, css, html, nothing } from "lit";
 import { fa, onceParentAvailable } from "../../utils/widgets.js";
-import { faSvg, select, titles } from "../styles.js";
+import { faSvg, select, titles, panel } from "../styles.js";
 import { COLORS, GPS_VALUES } from "../../utils/utils.js";
-import { faEarthEurope, faInfoCircle, faPalette } from "@fortawesome/free-solid-svg-icons";
+import { faEarthEurope, faInfoCircle, faPalette, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { MAP_THEMES_STYLES } from "../../utils/map.js";
-import { DISABLED_LEVEL, initIndoorEqualOnMap } from "../../utils/indoor.js";
-import { BASEMAPS_DEFAULT_IDS } from "../../utils/MapStyleComposer.js";
 import { classMap } from "lit/directives/class-map.js";
+import { DISABLED_LEVEL, initIndoorEqualOnMap } from "../../utils/indoor.js";
+
 
 /**
  * Map Layers menu allows user to select background and map theme.
@@ -20,16 +20,67 @@ import { classMap } from "lit/directives/class-map.js";
  */
 export default class MapLayers extends LitElement {
 	/** @private */
-	static styles = [ faSvg, titles, select, css`
+	static styles = [ panel, faSvg, titles, select, css`
+		:host {
+			display: flex;
+			flex-direction: column;
+			align-items: end;
+			gap: 5px;
+			max-width: calc(100vw - 20px);
+		}
+
+		.btn-close {
+			position: absolute;
+			top: 8px;
+			right: 5px;
+			z-index: 10;
+		}
+
+		.btn-close svg {
+			height: 16px;
+		}
+
+		.pnx-panel {
+			position: relative;
+			min-width: unset;
+		}
+
+		.map-layers {
+			max-width: 100%;
+			overflow-x: auto;
+			padding: 10px 0;
+		}
+		
+		.map-layers-blocks { display: flex; }
+
+		.map-layers-block {
+			border-right: 2px solid var(--grey-pale);
+  			padding: 0 15px;
+		}
+
+		.map-layers-block:last-child { border-right: none; }
+		.map-layers-block-bg { padding-left: 18px; }
+
+		.map-layers-block h4 {
+			margin: 0 0 10px 0;
+		}
+
+		pnx-switch {
+			padding: 0 15px 0 0;
+			box-sizing: border-box;
+			float: right;
+		}
+
 		.legend {
 			display: flex;
 			flex-wrap: wrap;
-			margin-top: 5px;
 			justify-content: space-evenly;
+			padding: 5px 10px;
+  			gap: 10px;
+			align-items: center;
 		}
 
 		.legend-entry {
-			margin: 10px 8px 5px 0px;
 			line-height: 12px;
 			display: flex;
 			align-items: center;
@@ -52,6 +103,37 @@ export default class MapLayers extends LitElement {
 			justify-content: center;
 			gap: 0;
 		}
+
+		@media screen and (max-width: 576px) {
+			:host {
+				max-width: 100%;
+				align-items: center;
+			}
+			.map-layers {
+				border: none;
+				width: 100%;
+				padding: 0 20px;
+			}
+			.map-layers-blocks {
+				flex-direction: column-reverse;
+				gap: 20px;
+				text-align: center;
+			}
+			.map-layers-block {
+				padding: 0;
+				border: none;
+			}
+			pnx-switch {
+				float: unset;
+				padding: 0;
+			}
+			.legend {
+				border: none;
+				margin: 10px 0;
+				min-height: 50px;
+				background: var(--grey-very-pale);
+			}
+		}
 	` ];
 
 	/** @private */
@@ -82,94 +164,67 @@ export default class MapLayers extends LitElement {
 		}
 	}
 
-	/** @private */
-	_onThemeSelect(e) {
-		this.theme = e.target.value;
-		this._parent?.mapStyleComposer.setPanoramaxTheme(this.theme);
-	}
-
-	/** @private */
-	_onBgChange(e) {
-		this._parent?.mapStyleComposer.switchBasemap(e.target.value || "streets");
-	}
 
 	/** @private */
 	render() {
-		const parts = [];
-		const hasIndoor = this._parent?.map?.indoorEqual || this._parent?.map?._options?.indoor?.visible === false;
 		const isV2 = this._parent?.mapStyleComposer?._getPanoramaxStyleVersion() === 2;
-
-		// Background selector
-		if(this._parent?.mapStyleComposer?.hasManyBasemaps?.()) {
-			parts.push(html`
-				<h4>${fa(faEarthEurope)} ${this._parent?._t.pnx.map_background}</h4>
-			`);
-
-			if(this._parent.mapStyleComposer.hasStreetsAerialBasemaps()) {
-				parts.push(html`
-					<pnx-map-background ._parent=${this._parent} style="margin-bottom: 10px"></pnx-map-background>
-				`);
-			}
-			if(this._parent.mapStyleComposer.hasComplementaryBasemaps()) {
-				const defaultOpt = html`
-					<option value="" .selected=${BASEMAPS_DEFAULT_IDS.includes(this._parent.mapStyleComposer.basemap)}>
-						${this._parent.mapStyleComposer.hasStreetsAerialBasemaps()
-							? this._parent?._t.pnx.map_background_more
-							: this._parent?._t.pnx.map_background_default
-						}
-					</option>
-				`;
-				const layers = Object
-					.entries(this._parent.mapStyleComposer.layerRanges.basemaps)
-					.filter(([bid,]) => !BASEMAPS_DEFAULT_IDS.includes(bid))
-					.map(([bid, b]) => html`
-						<option value="${bid}" .selected=${this._parent.mapStyleComposer.basemap === bid}>
-							${b.layers[0]?.metadata?.name || bid}
-						</option>
-					`);
-				parts.push(html`
-					<select id="pnx-map-bg-more" style="width: 100%;" @change=${this._onBgChange}>
-						${defaultOpt}
-						${layers}
-					</select>
-				`);
-			}
-		}
-
-		// Level selector for indoor=
+		const hasIndoor = this._parent?.map?.indoorEqual || this._parent?.map?._options?.indoor?.visible === false;
+		let ieq, ieqSwitch;
 		if(hasIndoor) {
-			const ieq = this._parent.map.indoorEqual;
-			parts.push(html`
+			ieq = this._parent.map.indoorEqual;
+			ieqSwitch = html`
 				<pnx-switch
 					.checked=${ieq && ieq.level !== DISABLED_LEVEL}
 					.disabled=${ieq && ieq.levels.length === 0}
 					@change=${this._onIndoorSwitchChange.bind(this)}
-					style="display: block; margin: 15px 0;"
 					name="pnx-level-switch"
 				>
 					${this._parent?._t.pnx.indoor_switch}
 				</pnx-switch>
-			`);
-		}
-
-		// Map theme selector
-		parts.push(html`
-			<h4>${fa(faPalette)} ${this._parent?._t.pnx.map_theme}</h4>
-			<select id="pnx-map-theme" style="width: 100%;" @change=${this._onThemeSelect}>
-				<option value=${MAP_THEMES_STYLES.default.id} .selected=${this.theme === MAP_THEMES_STYLES.default.id}>${this._parent?._t.pnx.map_theme_default}</option>
-				<option value=${MAP_THEMES_STYLES.age.id} .selected=${this.theme === MAP_THEMES_STYLES.age.id}>${this._parent?._t.pnx.map_theme_age}</option>
-				<option value=${MAP_THEMES_STYLES.type.id} .selected=${this.theme === MAP_THEMES_STYLES.type.id}>${this._parent?._t.pnx.map_theme_type}</option>
-				${this._parent?.map?._hasQualityScore?.() && html`
-					<option value=${MAP_THEMES_STYLES.score.id} .selected=${this.theme === MAP_THEMES_STYLES.score.id}>${this._parent?._t.pnx.map_theme_score}</option>
-					<option value=${MAP_THEMES_STYLES.gps.id} .selected=${this.theme === MAP_THEMES_STYLES.gps.id}>${this._parent?._t.pnx.map_theme_gps}</option>
-				`}
-			</select>
-		`);
-
-		// Map legend
-		parts.push(html`<div class=${classMap({"legend": true, "style-v2": isV2})}>
-			${this.theme === MAP_THEMES_STYLES.age.id ? html`
-				<div>
+			`;
+		}
+		const isSmall = this._parent?.isWidthSmall();
+		const parentClose = () => this.parentNode.close();
+
+		return html`
+			${isSmall ? nothing : html`
+				<pnx-button
+					class="btn-close"
+					kind="inline"
+					size="l"
+					@click=${parentClose}
+				>
+					${fa(faXmark)}
+				</pnx-button>
+			`}
+
+			<div class="pnx-panel map-layers">
+				<div class="map-layers-blocks">
+					<div class="map-layers-block">
+						<h4>${fa(faPalette)} ${this._parent?._t.pnx.map_theme}</h4>
+						<pnx-map-theme ._parent=${this._parent}></pnx-map-theme>
+					</div>
+
+					${ieq && this._parent?.isWidthSmall() ? ieqSwitch : nothing}
+
+					${this._parent?.mapStyleComposer?.hasManyBasemaps?.() ? html`
+						<div class="map-layers-block map-layers-block-bg">
+							<h4>${fa(faEarthEurope)} ${this._parent?._t.pnx.map_background}</h4>
+							<pnx-map-background ._parent=${this._parent}></pnx-map-background>
+						</div>
+					` : nothing}
+				</div>
+
+				${ieq && !this._parent?.isWidthSmall() ? ieqSwitch : nothing}
+			</div>
+
+			<div class=${classMap({
+				"pnx-panel": true,
+				"legend": true,
+				"style-v2": isV2,
+				"pnx-hidden": this.theme === MAP_THEMES_STYLES.default.id,
+			})}>
+				${this.theme === MAP_THEMES_STYLES.age.id ? html`
 					<div class="legend-entry">
 						<span class="legend-color" style="background-color: ${COLORS["PALETTE_4"]}"></span>
 						${this._parent?._t.pnx["map_theme_age_4"]}
@@ -178,8 +233,6 @@ export default class MapLayers extends LitElement {
 						<span class="legend-color" style="background-color: ${COLORS["PALETTE_3"]}"></span>
 						${this._parent?._t.pnx["map_theme_age_3"]}
 					</div>
-				</div>
-				<div>
 					<div class="legend-entry">
 						<span class="legend-color" style="background-color: ${COLORS["PALETTE_2"]}"></span>
 						${this._parent?._t.pnx["map_theme_age_2"]}
@@ -188,30 +241,31 @@ export default class MapLayers extends LitElement {
 						<span class="legend-color" style="background-color: ${COLORS["PALETTE_1"]}"></span>
 						${this._parent?._t.pnx["map_theme_age_1"]}
 					</div>
-				</div>` : nothing}
-
-			${this.theme === MAP_THEMES_STYLES.type.id ? html`
-			 	<div class="legend-entry">
-			 		<span class="legend-color" style="background-color: ${COLORS.QUALI_1}"></span>
-			 		${this._parent?._t.pnx.picture_360}
-			 	</div>
-			 	<div class="legend-entry">
-			 		<span class="legend-color" style="background-color: ${COLORS.QUALI_2}"></span>
-			 		${this._parent?._t.pnx.picture_flat}
-			 	</div>` : nothing}
-
-			${this.theme === MAP_THEMES_STYLES.score.id ? html`<div>
-				<pnx-quality-score></pnx-quality-score>
-				<pnx-button
-					title="${this._parent?._t.pnx.metadata_quality_help}"
-					kind="superinline"
-					@click=${() => this._parent?._showQualityScoreDoc()}
-				>
-					${fa(faInfoCircle)}
-				</pnx-button></div>` : nothing}
+				` : nothing}
 
-			${this.theme === MAP_THEMES_STYLES.gps.id ? html`
-				<div>
+				${this.theme === MAP_THEMES_STYLES.type.id ? html`
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${COLORS.QUALI_1}"></span>
+						${this._parent?._t.pnx.picture_360}
+					</div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${COLORS.QUALI_2}"></span>
+						${this._parent?._t.pnx.picture_flat}
+					</div>
+				` : nothing}
+
+				${this.theme === MAP_THEMES_STYLES.score.id ? html`
+					<pnx-quality-score></pnx-quality-score>
+					<pnx-button
+						title="${this._parent?._t.pnx.metadata_quality_help}"
+						kind="superinline"
+						@click=${() => this._parent?._showQualityScoreDoc()}
+					>
+						${fa(faInfoCircle)}
+					</pnx-button>
+				` : nothing}
+
+				${this.theme === MAP_THEMES_STYLES.gps.id ? html`
 					<div class="legend-entry">
 						<span class="legend-color" style="background-color: ${GPS_VALUES[0].color}"></span>
 						${GPS_VALUES[0].label}
@@ -224,8 +278,6 @@ export default class MapLayers extends LitElement {
 						<span class="legend-color" style="background-color: ${GPS_VALUES[4].color}"></span>
 						${GPS_VALUES[4].label}
 					</div>
-				</div>
-				<div>
 					<div class="legend-entry">
 						<span class="legend-color" style="background-color: ${GPS_VALUES[1].color}"></span>
 						${GPS_VALUES[1].label}
@@ -234,10 +286,9 @@ export default class MapLayers extends LitElement {
 						<span class="legend-color" style="background-color: ${GPS_VALUES[3].color}"></span>
 						${GPS_VALUES[3].label}
 					</div>
-			</div>` : nothing}
-		</div>`);
-
-		return parts;
+				` : nothing}
+			</div>
+		`;
 	}
 }
 

package/build/esm/components/menus/MapTheme.js

@@ -0,0 +1,186 @@
+import { LitElement, css, html } from "lit";
+import { onceParentAvailable } from "../../utils/widgets.js";
+import { MAP_THEMES_STYLES } from "../../utils/map.js";
+import { COLORS, GPS_VALUES, QUALITYSCORE_VALUES } from "../../utils/utils.js";
+
+/**
+ * Map Theme menu allows user to select map colouring scheme.
+ * @class Panoramax.components.menus.MapTheme
+ * @element pnx-map-theme
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-map-theme _parent=${viewer} />
+ * ```
+ */
+export default class MapTheme extends LitElement {
+	/** @private */
+	static styles = css`
+		:host {
+			justify-content: space-evenly;
+			box-sizing: border-box;
+			display: flex;
+		}
+		input { display: none; }
+		label {
+			cursor: pointer;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: 3px;
+			font-size: 0.7rem;
+			color: var(--grey-dark);
+			width: 50px;
+			text-align: center;
+		}
+
+		.colors-scheme {
+			width: 40px;
+			height: 40px;
+			border-radius: 22px;
+			vertical-align: middle;
+			border: 2px solid var(--widget-bg);
+			display: flex;
+			flex-direction: row;
+			overflow: hidden;
+		}
+
+		@media screen and (max-width: 576px) {
+			label {
+				width: 42px;
+				font-size: 0.6rem;
+			}
+
+			.colors-scheme {
+				width: 32px;
+				height: 32px;
+			}
+		}
+
+		.colors-scheme .color-entry {
+			display: block;
+			width: 100%;
+			height: 100%;
+		}
+
+		input:checked + label .colors-scheme {
+			outline: 3px solid var(--widget-border-btn);
+		}
+	`;
+
+	/** @private */
+	static properties = {
+		theme: {state: true},
+	};
+	
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
+			this.requestUpdate();
+			this._parent.mapStyleComposer?.addEventListener("theme-changed", e => this.theme = e.detail.theme);
+			this.theme = this._parent.mapStyleComposer.panoramaxTheme;
+		}));
+	}
+
+	/** @private */
+	_onThemeSelect(e) {
+		this.theme = e.target.value;
+		this._parent?.mapStyleComposer.setPanoramaxTheme(this.theme);
+	}
+
+	/** @private */
+	render() {
+		const isSmall = this._parent?.isWidthSmall();
+		
+		return html`
+			<input
+				type="radio"
+				id="pnx-map-theme-default"
+				name="pnx-map-theme"
+				value=${MAP_THEMES_STYLES.default.id}
+				@change=${this._onThemeSelect}
+				.checked=${this.theme === MAP_THEMES_STYLES.default.id}
+			/>
+			<label for="pnx-map-theme-default">
+				<div class="colors-scheme">
+					<span class="color-entry" style="background-color: ${COLORS.BASE}"></span>
+				</div>
+				${isSmall ? this._parent?._t.pnx.map_theme_default_short : this._parent?._t.pnx.map_theme_default}
+			</label>
+
+			<input
+				type="radio"
+				id="pnx-map-theme-age"
+				name="pnx-map-theme"
+				value=${MAP_THEMES_STYLES.age.id}
+				@change=${this._onThemeSelect}
+				.checked=${this.theme === MAP_THEMES_STYLES.age.id}
+			/>
+			<label for="pnx-map-theme-age">
+				<div class="colors-scheme">
+					<span class="color-entry" style="background-color: ${COLORS.PALETTE_4}"></span>
+					<span class="color-entry" style="background-color: ${COLORS.PALETTE_3}"></span>
+					<span class="color-entry" style="background-color: ${COLORS.PALETTE_2}"></span>
+					<span class="color-entry" style="background-color: ${COLORS.PALETTE_1}"></span>
+				</div>
+				${isSmall ? this._parent?._t.pnx.map_theme_age_short : this._parent?._t.pnx.map_theme_age}
+			</label>
+
+			<input
+				type="radio"
+				id="pnx-map-theme-type"
+				name="pnx-map-theme"
+				value=${MAP_THEMES_STYLES.type.id}
+				@change=${this._onThemeSelect}
+				.checked=${this.theme === MAP_THEMES_STYLES.type.id}
+			/>
+			<label for="pnx-map-theme-type">
+				<div class="colors-scheme">
+					<span class="color-entry" style="background-color: ${COLORS.QUALI_1}"></span>
+					<span class="color-entry" style="background-color: ${COLORS.QUALI_2}"></span>
+				</div>
+				${isSmall ? this._parent?._t.pnx.map_theme_type_short : this._parent?._t.pnx.map_theme_type}
+			</label>
+
+			${this._parent?.map?._hasQualityScore?.() && html`
+				<input
+					type="radio"
+					id="pnx-map-theme-score"
+					name="pnx-map-theme"
+					value=${MAP_THEMES_STYLES.score.id}
+					@change=${this._onThemeSelect}
+					.checked=${this.theme === MAP_THEMES_STYLES.score.id}
+				/>
+				<label for="pnx-map-theme-score">
+					<div class="colors-scheme">
+						${QUALITYSCORE_VALUES.map(qv => html`
+							<span class="color-entry" style="background-color: ${qv.color}"></span>
+						`)}
+					</div>
+					${isSmall ? this._parent?._t.pnx.map_theme_score_short : this._parent?._t.pnx.map_theme_score}
+				</label>
+
+				<input
+					type="radio"
+					id="pnx-map-theme-gps"
+					name="pnx-map-theme"
+					value=${MAP_THEMES_STYLES.gps.id}
+					@change=${this._onThemeSelect}
+					.checked=${this.theme === MAP_THEMES_STYLES.gps.id}
+				/>
+				<label for="pnx-map-theme-gps">
+					<div class="colors-scheme">
+						<span class="color-entry" style="background-color: ${GPS_VALUES[0].color}"></span>
+						<span class="color-entry" style="background-color: ${GPS_VALUES[2].color}"></span>
+						<span class="color-entry" style="background-color: ${GPS_VALUES[4].color}"></span>
+					</div>
+					${isSmall ? this._parent?._t.pnx.map_theme_gps_short : this._parent?._t.pnx.map_theme_gps}
+				</label>
+			`}
+		`;
+	}
+}
+
+customElements.define("pnx-map-theme", MapTheme);

package/build/esm/components/menus/index.js

@@ -8,6 +8,7 @@ export {default as MapBackground} from "./MapBackground.js";
 export {default as MapFilters} from "./MapFilters.js";
 export {default as MapLayers} from "./MapLayers.js";
 export {default as MapLegend} from "./MapLegend.js";
+export {default as MapTheme} from "./MapTheme.js";
 export {default as MiniPictureLegend} from "./MiniPictureLegend.js";
 export {default as PictureLegend} from "./PictureLegend.js";
 export {default as PictureMetadata} from "./PictureMetadata.js";

package/build/esm/components/styles.js

@@ -5,7 +5,7 @@ export const panel = css`
 	.pnx-panel {
 		position: absolute;
 		transition: opacity 0.2s 0.1s;
-		border-radius: 25px;
+		border-radius: 20px;
 		border: 1px solid var(--widget-border-div);
 		background-color: var(--widget-bg);
 		color: var(--widget-font);

package/build/esm/components/ui/TogglableGroup.js

@@ -30,6 +30,11 @@ export default class TogglableGroup extends LitElement {
 
 		.pnx-panel { z-index: 130; }
 		.pnx-panel-fixed { position: fixed; }
+
+		.pnx-panel.pnx-panel-nobg {
+			border: none;
+			background: none;
+		}
 	` ];
 
 	/**
@@ -37,10 +42,14 @@ export default class TogglableGroup extends LitElement {
 	 * @memberof Panoramax.components.ui.TogglableGroup#
 	 * @type {Object}
 	 * @property {string} [padded] If set, adds a 15px padding to the menu panel.
+	 * @property {boolean} [nobg] If set, removes default panel background.
+	 * @property {boolean} [over-button=false] If set, panel shows up over button (to reduce taken space)
 	 */
 	static properties = {
 		_opened: {state: true},
 		padded: {type: String},
+		nobg: {type: Boolean},
+		"over-button": {type: Boolean},
 	};
 
 	constructor() {
@@ -111,11 +120,11 @@ export default class TogglableGroup extends LitElement {
 
 		// No overflow = space a bit under button
 		if(fitsWidth && fitsHeight) {
-			menu.style.top = `${btnRect.bottom+btnMenuMargin}px`;
+			menu.style.top = this["over-button"] ? `${btnRect.top}px` : `${btnRect.bottom+btnMenuMargin}px`;
 		}
 		// Overflows width+height = put at button's top+left
 		else if(!fitsWidth && !fitsHeight) {
-			menu.style.right = `${window.innerWidth - btnRect.left + btnMenuMargin}px`;
+			menu.style.right  = this["over-button"] ? `${window.innerWidth - btnRect.right}px` : `${window.innerWidth - btnRect.left + btnMenuMargin}px`;
 			menu.style.bottom = `${window.innerHeight - btnRect.bottom}px`;
 
 			// Check if it doesn't overflow on top
@@ -129,12 +138,16 @@ export default class TogglableGroup extends LitElement {
 		// Overflows height = limit height
 		else if(!fitsHeight) {
 			menu.style.bottom = `${borderMargin}px`;
-			menu.style.top = `${btnRect.bottom+btnMenuMargin}px`;
+			menu.style.top = this["over-button"] ? `${btnRect.top}px` : `${btnRect.bottom+btnMenuMargin}px`;
 			menu.style.overflowY = "auto";
 		}
 		// Overflows width = move to left
 		else if(!fitsWidth) {
-			menu.style.marginTop = `${btnMenuMargin}px`;
+			if(this["over-button"]) {
+				menu.style.top = `${btnRect.top}px`;
+			} else {
+				menu.style.marginTop = `${btnMenuMargin}px`;
+			}
 			menu.style.right = `${window.innerWidth - btnRect.right}px`;
 		}
 	}
@@ -144,6 +157,7 @@ export default class TogglableGroup extends LitElement {
 		const panelClasses = {
 			"pnx-panel": true,
 			"pnx-panel-fixed": true,
+			"pnx-panel-nobg": this.nobg,
 			"pnx-hidden": !this._opened,
 			"pnx-padded": this.padded !== "false",
 		};

package/build/esm/components/ui/widgets/MapLayersButton.js

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing } from "lit";
-import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import { fa, onceParentAvailable, createWebComp } from "../../../utils/widgets.js";
 import {
 	faChevronDown, faLayerGroup, faXmark
 } from "@fortawesome/free-solid-svg-icons";
@@ -43,29 +43,51 @@ export default class MapLayersButton extends LitElement {
 		}));
 	}
 
+	/** @private */
+	_toggleDrawer() {
+		if(this._parent?.isBottomDrawerVisible?.()) {
+			const bottomDrawerContent = this._parent.bottomDrawer.shadowRoot.querySelector("slot")?.assignedNodes();
+			if(bottomDrawerContent.find(c => c.tagName.toLowerCase() === "pnx-map-layers-menu")) {
+				this._parent?.setBottomDrawer(false);
+				return;
+			}
+		}
+
+		this._parent?.setBottomDrawer?.(true, [createWebComp(
+			"pnx-map-layers-menu",
+			{ id: "pnx-map-layers-menu", _parent: this._parent }
+		)], {autoadjust: true, autoclose: true});
+	}
+
 	/** @private */
 	render() {
-		const isSmall = this._parent?.isWidthSmall() || this._parent?.isWidthMedium();
+		const isSmallSized = this._parent?.isWidthSmall();
+		const isMedSized = this._parent?.isWidthMedium();
 		const resetIcon = fa(faXmark, {styles: {"pointer-events": "auto"}});
 		resetIcon.addEventListener("click", e => {
 			e.stopPropagation();
-			const menu = this.shadowRoot.querySelector("pnx-map-layers-menu");
-			menu.shadowRoot.querySelector("#pnx-map-theme").value = "default";
-			menu._onThemeSelect({target: {value: "default"}});
-			this.shadowRoot.querySelector("#pnx-widget-map-layers")._opened = false;
+			this._parent.mapStyleComposer.setPanoramaxTheme("default");
 		});
 
-		return html`
+		return isSmallSized ? html`
+			<pnx-button kind="flat" size="xl" slot="button" @click=${this._toggleDrawer}>
+				${fa(faLayerGroup)}
+				${this._active ? html`<span class="pnx-active-icon"></span>` : nothing}
+			</pnx-button>
+		` : html`
 			<pnx-togglable-group
 				id="pnx-widget-map-layers"
 				class="pnx-print-hidden"
+				nobg
+				padded="false"
+				over-button
 				._parent=${this._parent}
 			>
 				<pnx-button kind="flat" size="xl" slot="button">
 					${fa(faLayerGroup)}
 					${this._active ? html`<span class="pnx-active-icon"></span>` : nothing}
-					${isSmall ? nothing : this._parent?._t.pnx.layers}
-					${isSmall ? nothing : (this._active ? resetIcon : fa(faChevronDown))}
+					${isMedSized ? nothing : this._parent?._t.pnx.layers}
+					${isMedSized ? nothing : (this._active ? resetIcon : fa(faChevronDown))}
 				</pnx-button>
 				<pnx-map-layers-menu
 					id="pnx-map-layers-menu"