@ecogis/maps-style-switcher/dist/index.js

Ecogis Style Switcher

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EcoGisStyleSwitcherControl = void 0;
class EcoGisStyleSwitcherControl {
    constructor(styles, options) {
        this.styles = styles || EcoGisStyleSwitcherControl.DEFAULT_STYLES;
        const defaultStyle = typeof (options) === "string" ? options : options ? options.defaultStyle : undefined;
        this.defaultStyle = defaultStyle || EcoGisStyleSwitcherControl.DEFAULT_STYLE;
        this.onDocumentClick = this.onDocumentClick.bind(this);
        this.events = typeof (options) !== "string" && options ? options.eventListeners : undefined;
    }
    getDefaultPosition() {
        const defaultPosition = "top-right";
        return defaultPosition;
    }
    onAdd(map) {
        this.map = map;
        this.controlContainer = document.createElement("div");
        this.controlContainer.classList.add("ecogis-ctrl", "ecogis-ctrl-group");
        this.mapStyleContainer = document.createElement("div");
        this.mapStyleContainer.classList.add("ecogis-style-list");
        this.styleButton = document.createElement("button");
        this.styleButton.type = "button";
        for (const style of this.styles) {
            const styleElement = document.createElement("button");
            styleElement.type = "button";
            styleElement.dataset.uri = JSON.stringify(style.uri);
            if (style.icon) {
                const iconContainer = document.createElement("span");
                iconContainer.classList.add("ecogis-style-icon");
                if (/\.(png|jpg|jpeg|gif|svg)$/.test(style.icon)) {
                    const imgElement = document.createElement("img");
                    imgElement.src = style.icon;
                    imgElement.alt = style.title;
                    imgElement.title = style.title;
                    iconContainer.appendChild(imgElement);
                }
                else {
                    iconContainer.innerHTML = style.icon;
                }
                styleElement.appendChild(iconContainer);
            }
            if (!style.useIconOnly) {
                const titleSpan = document.createElement("span");
                titleSpan.innerText = style.title;
                titleSpan.classList.add("ecogis-style-title");
                styleElement.appendChild(titleSpan);
                styleElement.classList.add(style.title.replace(/[^a-z0-9-]/gi, "_"));
            }
            styleElement.addEventListener("click", (event) => {
                var _a, _b;
                const srcElement = event.currentTarget;
                this.closeModal();
                if (srcElement.classList.contains("active"))
                    return;
                if (((_a = this.events) === null || _a === void 0 ? void 0 : _a.onOpen) && this.events.onOpen(event))
                    return;
                const selectedStyle = JSON.parse(srcElement.dataset.uri);
                this.map.setStyle(selectedStyle);
                this.mapStyleContainer.querySelectorAll(".active").forEach(el => el.classList.remove("active"));
                srcElement.classList.add("active");
                if (((_b = this.events) === null || _b === void 0 ? void 0 : _b.onChange) && this.events.onChange(event, selectedStyle))
                    return;
            });
            if (style.title === this.defaultStyle) {
                styleElement.classList.add("active");
            }
            this.mapStyleContainer.appendChild(styleElement);
        }
        this.styleButton.classList.add("ecogis-ctrl-icon", "ecogis-style-switcher");
        this.styleButton.addEventListener("click", (event) => {
            var _a;
            if (((_a = this.events) === null || _a === void 0 ? void 0 : _a.onSelect) && this.events.onSelect(event))
                return;
            this.openModal();
        });
        document.addEventListener("click", this.onDocumentClick);
        this.controlContainer.appendChild(this.styleButton);
        this.controlContainer.appendChild(this.mapStyleContainer);
        return this.controlContainer;
    }
    onRemove() {
        if (!this.controlContainer || !this.controlContainer.parentNode || !this.map || !this.styleButton) {
            return;
        }
        this.styleButton.removeEventListener("click", this.onDocumentClick);
        this.controlContainer.parentNode.removeChild(this.controlContainer);
        document.removeEventListener("click", this.onDocumentClick);
        this.map = undefined;
    }
    closeModal() {
        if (this.mapStyleContainer && this.styleButton) {
            this.mapStyleContainer.style.display = "none";
            this.styleButton.style.display = "block";
        }
    }
    openModal() {
        if (this.mapStyleContainer && this.styleButton) {
            this.mapStyleContainer.style.display = "block";
            this.styleButton.style.display = "none";
        }
    }
    onDocumentClick(event) {
        if (this.controlContainer && !this.controlContainer.contains(event.target)) {
            this.closeModal();
        }
    }
}
exports.EcoGisStyleSwitcherControl = EcoGisStyleSwitcherControl;
EcoGisStyleSwitcherControl.DEFAULT_STYLE = "Streets";
EcoGisStyleSwitcherControl.DEFAULT_STYLES = [
    { title: "Dark", uri: "mapbox://styles/mapbox/dark-v10" },
    { title: "Light", uri: "mapbox://styles/mapbox/light-v10" },
    { title: "Outdoors", uri: "mapbox://styles/mapbox/outdoors-v11" },
    { title: "Satellite", uri: "mapbox://styles/mapbox/satellite-streets-v11" },
    { title: "Streets", uri: "mapbox://styles/mapbox/streets-v11" }
];
//# sourceMappingURL=index.js.map