@ecogis/maps-style-switcher 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import { IControl, Map as MapboxMap } from "mapbox-gl";
+export declare type VnptMapStyleDefinition = {
+    title: string;
+    uri: string;
+};
+export declare type VnptMapStyleSwitcherOptions = {
+    defaultStyle?: string;
+    eventListeners?: VnptMapStyleSwitcherEvents;
+};
+declare type VnptMapStyleSwitcherEvents = {
+    onOpen?: (event: MouseEvent) => boolean;
+    onSelect?: (event: MouseEvent) => boolean;
+    onChange?: (event: MouseEvent, style: string) => boolean;
+};
+export declare class VnptMapStyleSwitcherControl implements IControl {
+    private static readonly DEFAULT_STYLE;
+    private static readonly DEFAULT_STYLES;
+    private controlContainer;
+    private events?;
+    private map?;
+    private mapStyleContainer;
+    private styleButton;
+    private styles;
+    private defaultStyle;
+    constructor(styles?: VnptMapStyleDefinition[], options?: VnptMapStyleSwitcherOptions | string);
+    getDefaultPosition(): string;
+    onAdd(map: MapboxMap): HTMLElement;
+    onRemove(): void;
+    private closeModal;
+    private openModal;
+    private onDocumentClick;
+}
+export {};

package/dist/index.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class VnptMapStyleSwitcherControl {
+    constructor(styles, options) {
+        this.styles = styles || VnptMapStyleSwitcherControl.DEFAULT_STYLES;
+        const defaultStyle = typeof (options) === "string" ? options : options ? options.defaultStyle : undefined;
+        this.defaultStyle = defaultStyle || VnptMapStyleSwitcherControl.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");
+        this.controlContainer.classList.add("ecogis-ctrl-group");
+        this.mapStyleContainer = document.createElement("div");
+        this.styleButton = document.createElement("button");
+        this.styleButton.type = "button";
+        this.mapStyleContainer.classList.add("ecogis-style-list");
+        for (const style of this.styles) {
+            const styleElement = document.createElement("button");
+            styleElement.type = "button";
+            styleElement.innerText = style.title;
+            styleElement.classList.add(style.title.replace(/[^a-z0-9-]/gi, '_'));
+            styleElement.dataset.uri = JSON.stringify(style.uri);
+            styleElement.addEventListener("click", event => {
+                const srcElement = event.srcElement;
+                this.closeModal();
+                if (srcElement.classList.contains("active")) {
+                    return;
+                }
+                if (this.events && this.events.onOpen && this.events.onOpen(event)) {
+                    return;
+                }
+                const style = JSON.parse(srcElement.dataset.uri);
+                this.map.setStyle(style);
+                const elms = this.mapStyleContainer.getElementsByClassName("active");
+                while (elms[0]) {
+                    elms[0].classList.remove("active");
+                }
+                srcElement.classList.add("active");
+                if (this.events && this.events.onChange && this.events.onChange(event, style)) {
+                    return;
+                }
+            });
+            if (style.title === this.defaultStyle) {
+                styleElement.classList.add("active");
+            }
+            this.mapStyleContainer.appendChild(styleElement);
+        }
+        this.styleButton.classList.add("ecogis-ctrl-icon");
+        this.styleButton.classList.add("ecogis-style-switcher");
+        this.styleButton.addEventListener("click", event => {
+            if (this.events && this.events.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();
+        }
+    }
+}
+VnptMapStyleSwitcherControl.DEFAULT_STYLE = "Streets";
+VnptMapStyleSwitcherControl.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" }
+];
+exports.VnptMapStyleSwitcherControl = VnptMapStyleSwitcherControl;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@ecogis/maps-style-switcher",
+  "version": "0.0.1",
+  "description": "Ecogis Style Switcher",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "ecogis",
+    "maps",
+    "style-switcher"
+  ],
+  "license": "GPL-3.0",
+  "dependencies": {
+    "mapbox-gl": "^1.11.1"
+  },
+  "devDependencies": {
+    "@types/mapbox-gl": "^1.9.0",
+    "typescript": "^3.1.3",
+    "minimist": ">=0.2.1"
+  }
+}

package/styles.css

@@ -0,0 +1,40 @@
+.ecogis-style-list
+{
+    display: none;
+}
+
+.ecogis-ctrl-group .ecogis-style-list button
+{
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: block;
+    font-size: 14px;
+    padding: 8px 8px 6px;
+    text-align: right;
+    width: 100%;
+    height: auto;
+}
+
+.ecogis-style-list button.active
+{
+    font-weight: bold;
+}
+
+.ecogis-style-list button:hover
+{
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.ecogis-style-list button + button
+{
+    border-top: 1px solid #ddd;
+}
+
+.ecogis-style-switcher
+{ 
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTQuODQ5cHgiIGhlaWdodD0iNTQuODQ5cHgiIHZpZXdCb3g9IjAgMCA1NC44NDkgNTQuODQ5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NC44NDkgNTQuODQ5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PGc+PGc+PHBhdGggZD0iTTU0LjQ5NywzOS42MTRsLTEwLjM2My00LjQ5bC0xNC45MTcsNS45NjhjLTAuNTM3LDAuMjE0LTEuMTY1LDAuMzE5LTEuNzkzLDAuMzE5Yy0wLjYyNywwLTEuMjU0LTAuMTA0LTEuNzktMC4zMThsLTE0LjkyMS01Ljk2OEwwLjM1MSwzOS42MTRjLTAuNDcyLDAuMjAzLTAuNDY3LDAuNTI0LDAuMDEsMC43MTZMMjYuNTYsNTAuODFjMC40NzcsMC4xOTEsMS4yNTEsMC4xOTEsMS43MjksMEw1NC40ODgsNDAuMzNDNTQuOTY0LDQwLjEzOSw1NC45NjksMzkuODE3LDU0LjQ5NywzOS42MTR6Ii8+PHBhdGggZD0iTTU0LjQ5NywyNy41MTJsLTEwLjM2NC00LjQ5MWwtMTQuOTE2LDUuOTY2Yy0wLjUzNiwwLjIxNS0xLjE2NSwwLjMyMS0xLjc5MiwwLjMyMWMtMC42MjgsMC0xLjI1Ni0wLjEwNi0xLjc5My0wLjMyMWwtMTQuOTE4LTUuOTY2TDAuMzUxLDI3LjUxMmMtMC40NzIsMC4yMDMtMC40NjcsMC41MjMsMC4wMSwwLjcxNkwyNi41NiwzOC43MDZjMC40NzcsMC4xOSwxLjI1MSwwLjE5LDEuNzI5LDBsMjYuMTk5LTEwLjQ3OUM1NC45NjQsMjguMDM2LDU0Ljk2OSwyNy43MTYsNTQuNDk3LDI3LjUxMnoiLz48cGF0aCBkPSJNMC4zNjEsMTYuMTI1bDEzLjY2Miw1LjQ2NWwxMi41MzcsNS4wMTVjMC40NzcsMC4xOTEsMS4yNTEsMC4xOTEsMS43MjksMGwxMi41NDEtNS4wMTZsMTMuNjU4LTUuNDYzYzAuNDc3LTAuMTkxLDAuNDgtMC41MTEsMC4wMS0wLjcxNkwyOC4yNzcsNC4wNDhjLTAuNDcxLTAuMjA0LTEuMjM2LTAuMjA0LTEuNzA4LDBMMC4zNTEsMTUuNDFDLTAuMTIxLDE1LjYxNC0wLjExNiwxNS45MzUsMC4zNjEsMTYuMTI1eiIvPjwvZz48L2c+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 70%;
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "alwaysStrict": true,
+        "baseUrl": ".",
+        "declaration": true,
+        "experimentalDecorators": true,
+        "lib": [
+            "dom",
+            "es2017"
+        ],
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "noImplicitThis": true,
+        "noUnusedLocals": true,
+        "outDir": "./dist/",
+        "preserveConstEnums": true,
+        "removeComments": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "sourceMap": true,
+        "target": "es6"
+    }
+}