@panoramax/web-viewer/src/components/menus/MapLegend.js

Panoramax web viewer for geolocated pictures

import {LitElement, html, nothing, css} from "lit";

/**
 * Map legend displays information about map sources.
 * @class Panoramax.components.menus.MapLegend
 * @element pnx-map-legend
 * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
 * @example
 * ```html
 * <pnx-map-legend ._parent=${viewer} />
 * ```
 */
export default class MapLegend extends LitElement {
	/** @private */
	static styles = css`
		:host {
			font-size: 0.7em;
		}
		small {
			font-size: 1em;
		}
		.maplibregl-ctrl-attrib-inner {
			display: inline-block;
		}
	`;

	/**
	 * Component properties.
	 * @memberof Panoramax.components.menus.MapLegend#
	 * @type {Object}
	 * @property {boolean} [light=false] Lighter version (for iframes)
	 */
	static properties = {
		light: {type: Boolean},
	};

	constructor() {
		super();
		this.light = false;
	}

	/** @private */
	render() {
		/* eslint-disable indent */
		const mapAttrib = this._parent?.map?._attribution?._innerContainer;
		const mapLabelParts = this._parent?._t.map.map_data.split("{m}");

		return this.light ?
			(mapAttrib && mapAttrib.innerHTML.length > 0 ? mapAttrib : nothing)
			: html`
				${mapAttrib && mapAttrib.innerHTML.length > 0
					? html`${mapLabelParts.shift()}${mapAttrib}${mapLabelParts.shift()}`
					: nothing}
			`;
	}
}

customElements.define("pnx-map-legend", MapLegend);