diff --git a/README.md b/README.md index 8c7b932..d3020b8 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,6 @@ Adds a style switcher to `mapbox-gl` ![](https://img.shields.io/bundlephobia/min/mapbox-gl-style-switcher) ![](https://img.shields.io/npm/v/mapbox-gl-style-switcher) ![](https://img.shields.io/npm/types/mapbox-gl-style-switcher) ![](https://img.shields.io/npm/l/mapbox-gl-style-switcher) - ## Installation: ```bash @@ -28,31 +27,36 @@ map.addControl(new MapboxStyleSwitcherControl()); ``` ## Options: + If you want to supply your own list of styles, pass them in the constructor. ```ts -import { MapboxStyleDefinition, MapboxStyleSwitcherControl } from "mapbox-gl-style-switcher"; +import { + MapboxStyleDefinition, + MapboxStyleSwitcherControl, +} from "mapbox-gl-style-switcher"; const styles: MapboxStyleDefinition[] = [ - { - title: "Dark", - uri:"mapbox://styles/mapbox/dark-v9" - }, - { - title: "Light", - uri:"mapbox://styles/mapbox/light-v9" - } + { + title: "Dark", + uri: "mapbox://styles/mapbox/dark-v9", + }, + { + title: "Light", + uri: "mapbox://styles/mapbox/light-v9", + }, ]; // Pass options (optional) const options: MapboxStyleSwitcherOptions = { - defaultStyle: "Dark", - eventListeners: { - // return true if you want to stop execution - // onOpen: (event: MouseEvent) => boolean; - // onSelect: (event: MouseEvent) => boolean; - // onChange: (event: MouseEvent, style: string) => boolean; - } + defaultStyle: "Dark", + eventListeners: { + // return true if you want to stop execution + // onOpen: (event: MouseEvent) => boolean; + // onSelect: (event: MouseEvent) => boolean; + // onChange: (event: MouseEvent, style: string) => boolean; + }, + preserveLayers: true, //defaults to true }; map.addControl(new MapboxStyleSwitcherControl(styles, options)); @@ -61,7 +65,7 @@ map.addControl(new MapboxStyleSwitcherControl(styles, options)); If you want to specify a default style, pass them in the constructor as second argument. ```ts -map.addControl(new MapboxStyleSwitcherControl(styles, 'Dark')); +map.addControl(new MapboxStyleSwitcherControl(styles, "Dark")); ``` ## Screenshots diff --git a/dist/index.d.ts b/dist/index.d.ts index 92a5c5f..0a6f5f4 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -1,16 +1,18 @@ -import { IControl, Map as MapboxMap } from "mapbox-gl"; -export declare type MapboxStyleDefinition = { +import { IControl, Map as MapboxMap, Style } from "mapbox-gl"; +export type MapboxStyleDefinition = { title: string; - uri: string; + uri: string | Style; }; -export declare type MapboxStyleSwitcherOptions = { +export type MapboxStyleSwitcherOptions = { defaultStyle?: string; eventListeners?: MapboxStyleSwitcherEvents; + preserveLayers?: boolean; }; -declare type MapboxStyleSwitcherEvents = { +type MapboxStyleSwitcherEvents = { onOpen?: (event: MouseEvent) => boolean; onSelect?: (event: MouseEvent) => boolean; onChange?: (event: MouseEvent, style: string) => boolean; + onBeforeChange?: (event: MouseEvent) => boolean; }; export declare class MapboxStyleSwitcherControl implements IControl { private static readonly DEFAULT_STYLE; @@ -22,6 +24,10 @@ export declare class MapboxStyleSwitcherControl implements IControl { private styleButton; private styles; private defaultStyle; + private preserveLayers; + private defaultLayerList; + private defaultSourcesList; + private styleCache; constructor(styles?: MapboxStyleDefinition[], options?: MapboxStyleSwitcherOptions | string); getDefaultPosition(): string; onAdd(map: MapboxMap): HTMLElement; @@ -29,5 +35,6 @@ export declare class MapboxStyleSwitcherControl implements IControl { private closeModal; private openModal; private onDocumentClick; + private restoreLayers; } export {}; diff --git a/dist/index.js b/dist/index.js index 597779d..f4bfa4f 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,12 +1,27 @@ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); +exports.MapboxStyleSwitcherControl = void 0; class MapboxStyleSwitcherControl { constructor(styles, options) { + var _a; + this.preserveLayers = true; + this.defaultLayerList = new Set(); + this.defaultSourcesList = new Set(); this.styles = styles || MapboxStyleSwitcherControl.DEFAULT_STYLES; - const defaultStyle = typeof (options) === "string" ? options : options ? options.defaultStyle : undefined; - this.defaultStyle = defaultStyle || MapboxStyleSwitcherControl.DEFAULT_STYLE; + const defaultStyle = typeof options === "string" + ? options + : options + ? options.defaultStyle + : undefined; + this.defaultStyle = + defaultStyle || MapboxStyleSwitcherControl.DEFAULT_STYLE; this.onDocumentClick = this.onDocumentClick.bind(this); - this.events = typeof (options) !== "string" && options ? options.eventListeners : undefined; + this.events = + typeof options !== "string" && options + ? options.eventListeners + : undefined; + this.preserveLayers = + (_a = (typeof options !== "string" && (options === null || options === void 0 ? void 0 : options.preserveLayers))) !== null && _a !== void 0 ? _a : true; } getDefaultPosition() { const defaultPosition = "top-right"; @@ -21,13 +36,19 @@ class MapboxStyleSwitcherControl { this.styleButton = document.createElement("button"); this.styleButton.type = "button"; this.mapStyleContainer.classList.add("mapboxgl-style-list"); + this.map.on("load", () => { + var _a; + this.defaultSourcesList = new Set(Object.keys(map.getStyle().sources || {})); + this.defaultLayerList = new Set((_a = map.getStyle().layers) === null || _a === void 0 ? void 0 : _a.map((l) => l.id)); + }); 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.classList.add(style.title.replace(/[^a-z0-9-]/gi, "_")); styleElement.dataset.uri = JSON.stringify(style.uri); - styleElement.addEventListener("click", event => { + styleElement.addEventListener("click", (event) => { + var _a; const srcElement = event.srcElement; this.closeModal(); if (srcElement.classList.contains("active")) { @@ -36,6 +57,12 @@ class MapboxStyleSwitcherControl { if (this.events && this.events.onOpen && this.events.onOpen(event)) { return; } + if (this.events && this.events.onBeforeChange) { + this.events.onBeforeChange(event); + } + else { + this.styleCache = map.getStyle(); + } const style = JSON.parse(srcElement.dataset.uri); this.map.setStyle(style); const elms = this.mapStyleContainer.getElementsByClassName("active"); @@ -43,7 +70,17 @@ class MapboxStyleSwitcherControl { elms[0].classList.remove("active"); } srcElement.classList.add("active"); - if (this.events && this.events.onChange && this.events.onChange(event, style)) { + (_a = this.map) === null || _a === void 0 ? void 0 : _a.once("styledata", () => { + var _a; + this.defaultSourcesList = new Set([...this.defaultSourcesList].concat(Object.keys(map.getStyle().sources || {}))); + this.defaultLayerList = new Set([...this.defaultLayerList].concat(((_a = map.getStyle().layers) === null || _a === void 0 ? void 0 : _a.map((l) => l.id)) || [])); + if (this.preserveLayers) { + this.restoreLayers(); + } + }); + if (this.events && + this.events.onChange && + this.events.onChange(event, style)) { return; } }); @@ -54,7 +91,7 @@ class MapboxStyleSwitcherControl { } this.styleButton.classList.add("mapboxgl-ctrl-icon"); this.styleButton.classList.add("mapboxgl-style-switcher"); - this.styleButton.addEventListener("click", event => { + this.styleButton.addEventListener("click", (event) => { if (this.events && this.events.onSelect && this.events.onSelect(event)) { return; } @@ -66,7 +103,10 @@ class MapboxStyleSwitcherControl { return this.controlContainer; } onRemove() { - if (!this.controlContainer || !this.controlContainer.parentNode || !this.map || !this.styleButton) { + if (!this.controlContainer || + !this.controlContainer.parentNode || + !this.map || + !this.styleButton) { return; } this.styleButton.removeEventListener("click", this.onDocumentClick); @@ -87,18 +127,39 @@ class MapboxStyleSwitcherControl { } } onDocumentClick(event) { - if (this.controlContainer && !this.controlContainer.contains(event.target)) { + if (this.controlContainer && + !this.controlContainer.contains(event.target)) { this.closeModal(); } } + restoreLayers() { + if (this.styleCache) { + const sources = this.styleCache.sources; + if (sources) { + for (const source in sources) { + if (!this.defaultSourcesList.has(source)) { + this.map.addSource(source, sources[source]); + } + } + } + const layers = this.styleCache.layers; + if (layers) { + for (let i = 0; i < layers.length; i++) { + if (!this.defaultLayerList.has(layers[i].id)) { + this.map.addLayer(layers[i]); + } + } + } + } + } } +exports.MapboxStyleSwitcherControl = MapboxStyleSwitcherControl; MapboxStyleSwitcherControl.DEFAULT_STYLE = "Streets"; MapboxStyleSwitcherControl.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" } + { title: "Streets", uri: "mapbox://styles/mapbox/streets-v11" }, ]; -exports.MapboxStyleSwitcherControl = MapboxStyleSwitcherControl; -//# sourceMappingURL=index.js.map \ No newline at end of file +//# sourceMappingURL=index.js.map diff --git a/dist/index.js.map b/dist/index.js.map index c4e2ecc..4d4b1d7 100644 --- a/dist/index.js.map +++ b/dist/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/lib/index.ts b/lib/index.ts index a3f5482..eff9508 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -1,159 +1,227 @@ -import { IControl, Map as MapboxMap } from "mapbox-gl"; +import { IControl, Map as MapboxMap, Style } from "mapbox-gl"; -export type MapboxStyleDefinition = -{ - title: string; - uri: string; -} +export type MapboxStyleDefinition = { + title: string; + uri: string | Style; +}; -export type MapboxStyleSwitcherOptions = -{ - defaultStyle?: string; - eventListeners?: MapboxStyleSwitcherEvents; -} +export type MapboxStyleSwitcherOptions = { + defaultStyle?: string; + eventListeners?: MapboxStyleSwitcherEvents; + preserveLayers?: boolean; +}; -type MapboxStyleSwitcherEvents = -{ - onOpen?: (event: MouseEvent) => boolean; - onSelect?: (event: MouseEvent) => boolean; - onChange?: (event: MouseEvent, style: string) => boolean; -} +type MapboxStyleSwitcherEvents = { + onOpen?: (event: MouseEvent) => boolean; + onSelect?: (event: MouseEvent) => boolean; + onChange?: (event: MouseEvent, style: string) => boolean; + onBeforeChange?: (event: MouseEvent) => boolean; +}; -export class MapboxStyleSwitcherControl implements IControl -{ - private static readonly DEFAULT_STYLE = "Streets"; - private static readonly 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"} - ]; - - private controlContainer: HTMLElement | undefined; - private events?: MapboxStyleSwitcherEvents; - private map?: MapboxMap; - private mapStyleContainer: HTMLElement | undefined; - private styleButton: HTMLButtonElement | undefined; - private styles: MapboxStyleDefinition[]; - private defaultStyle: string; - - constructor(styles?: MapboxStyleDefinition[], options?: MapboxStyleSwitcherOptions | string) - { - this.styles = styles || MapboxStyleSwitcherControl.DEFAULT_STYLES; - const defaultStyle = typeof(options) === "string" ? options : options ? options.defaultStyle : undefined; - this.defaultStyle = defaultStyle || MapboxStyleSwitcherControl.DEFAULT_STYLE; - this.onDocumentClick = this.onDocumentClick.bind(this); - this.events = typeof(options) !== "string" && options ? options.eventListeners : undefined; - } +export class MapboxStyleSwitcherControl implements IControl { + private static readonly DEFAULT_STYLE = "Streets"; + private static readonly 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" }, + ]; - public getDefaultPosition(): string - { - const defaultPosition = "top-right"; - return defaultPosition; - } + private controlContainer: HTMLElement | undefined; + private events?: MapboxStyleSwitcherEvents; + private map?: MapboxMap; + private mapStyleContainer: HTMLElement | undefined; + private styleButton: HTMLButtonElement | undefined; + private styles: MapboxStyleDefinition[]; + private defaultStyle: string; + private preserveLayers: boolean = true; + private defaultLayerList: Set = new Set(); + private defaultSourcesList: Set = new Set(); + private styleCache: Style; + + constructor( + styles?: MapboxStyleDefinition[], + options?: MapboxStyleSwitcherOptions | string + ) { + this.styles = styles || MapboxStyleSwitcherControl.DEFAULT_STYLES; + const defaultStyle = + typeof options === "string" + ? options + : options + ? options.defaultStyle + : undefined; + this.defaultStyle = + defaultStyle || MapboxStyleSwitcherControl.DEFAULT_STYLE; + this.onDocumentClick = this.onDocumentClick.bind(this); + this.events = + typeof options !== "string" && options + ? options.eventListeners + : undefined; + this.preserveLayers = + (typeof options !== "string" && options?.preserveLayers) ?? true; + } - public onAdd(map: MapboxMap): HTMLElement - { - this.map = map; - this.controlContainer = document.createElement("div"); - this.controlContainer.classList.add("mapboxgl-ctrl"); - this.controlContainer.classList.add("mapboxgl-ctrl-group"); - this.mapStyleContainer = document.createElement("div"); - this.styleButton = document.createElement("button"); - this.styleButton.type = "button"; - this.mapStyleContainer.classList.add("mapboxgl-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 as HTMLButtonElement; - 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); + public getDefaultPosition(): string { + const defaultPosition = "top-right"; + return defaultPosition; + } + + public onAdd(map: MapboxMap): HTMLElement { + this.map = map; + this.controlContainer = document.createElement("div"); + this.controlContainer.classList.add("mapboxgl-ctrl"); + this.controlContainer.classList.add("mapboxgl-ctrl-group"); + this.mapStyleContainer = document.createElement("div"); + this.styleButton = document.createElement("button"); + this.styleButton.type = "button"; + this.mapStyleContainer.classList.add("mapboxgl-style-list"); + + this.map.on("load", () => { + //Store all default/pre-existing built-in mapbox layers (and sources) + this.defaultSourcesList = new Set( + Object.keys(map.getStyle().sources || {}) + ); + this.defaultLayerList = new Set(map.getStyle().layers?.map((l) => l.id)); + }); + + 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 as HTMLButtonElement; + this.closeModal(); + if (srcElement.classList.contains("active")) { + return; + } + if (this.events && this.events.onOpen && this.events.onOpen(event)) { + return; + } + //Allow the user to customize onBeforeChange event, but also default to preserving layers + if (this.events && this.events.onBeforeChange) { + this.events.onBeforeChange(event); //TODO pass original fn to be extended rather than overridden? + } else { + this.styleCache = map.getStyle(); + } + 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"); } - this.styleButton.classList.add("mapboxgl-ctrl-icon"); - this.styleButton.classList.add("mapboxgl-style-switcher"); - this.styleButton.addEventListener("click", event => - { - if (this.events && this.events.onSelect && this.events.onSelect(event)) - { - return; - } - this.openModal(); + srcElement.classList.add("active"); + + //NOTE don't try to update the current style until above style is done loading, otherwise map.getStyle returns the old style! + this.map?.once("styledata", () => { + //When the base style changes, there could be additional default (mapbox) sources and layers, so update our default cache + this.defaultSourcesList = new Set( + [...this.defaultSourcesList].concat( + Object.keys(map.getStyle().sources || {}) + ) + ); + this.defaultLayerList = new Set( + [...this.defaultLayerList].concat( + map.getStyle().layers?.map((l) => l.id) || [] + ) + ); + + //Readd all pre-existing layers (and sources), if the user wants to preserve them + if (this.preserveLayers) { + this.restoreLayers(); + } }); - document.addEventListener("click", this.onDocumentClick); + 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("mapboxgl-ctrl-icon"); + this.styleButton.classList.add("mapboxgl-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; + } - this.controlContainer.appendChild(this.styleButton); - this.controlContainer.appendChild(this.mapStyleContainer); - return this.controlContainer; + public onRemove(): void { + 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; + } - public onRemove(): void - { - 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; + private closeModal(): void { + if (this.mapStyleContainer && this.styleButton) { + this.mapStyleContainer.style.display = "none"; + this.styleButton.style.display = "block"; } + } - private closeModal(): void - { - if (this.mapStyleContainer && this.styleButton) - { - this.mapStyleContainer.style.display = "none"; - this.styleButton.style.display = "block"; - } + private openModal(): void { + if (this.mapStyleContainer && this.styleButton) { + this.mapStyleContainer.style.display = "block"; + this.styleButton.style.display = "none"; } + } - private openModal(): void - { - if (this.mapStyleContainer && this.styleButton) - { - this.mapStyleContainer.style.display = "block"; - this.styleButton.style.display = "none"; - } + private onDocumentClick(event: MouseEvent): void { + if ( + this.controlContainer && + !this.controlContainer.contains(event.target as Element) + ) { + this.closeModal(); } + } - private onDocumentClick(event: MouseEvent): void - { - if (this.controlContainer && !this.controlContainer.contains(event.target as Element)) - { - this.closeModal(); + private restoreLayers(): void { + if (this.styleCache) { + //Readd sources + const sources = this.styleCache.sources; + if (sources) { + for (const source in sources) { + if (!this.defaultSourcesList.has(source)) { + this.map!.addSource(source, sources[source]); + } } + } + + //Readd layers + const layers = this.styleCache.layers; + if (layers) { + for (let i = 0; i < layers.length; i++) { + if (!this.defaultLayerList.has(layers[i].id)) { + this.map!.addLayer(layers[i]); + } + } + } } -} \ No newline at end of file + } +} diff --git a/package-lock.json b/package-lock.json index 4566b32..6e11531 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,8 +1,334 @@ { "name": "mapbox-gl-style-switcher", "version": "1.0.11", - "lockfileVersion": 1, + "lockfileVersion": 2, "requires": true, + "packages": { + "": { + "name": "mapbox-gl-style-switcher", + "version": "1.0.11", + "license": "GPL-3.0", + "dependencies": { + "mapbox-gl": "^1.13.0" + }, + "devDependencies": { + "@types/mapbox-gl": "^1.13.4", + "minimist": ">=0.2.1", + "typescript": "^4.9.4" + }, + "peerDependencies": { + "@types/mapbox-gl": "^1.13.4", + "mapbox-gl": "^1.13.0" + } + }, + "node_modules/@mapbox/geojson-rewind": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.0.tgz", + "integrity": "sha512-73l/qJQgj/T/zO1JXVfuVvvKDgikD/7D/rHAD28S9BG1OTstgmftrmqfCx4U+zQAmtsB6HcDA3a7ymdnJZAQgg==", + "dependencies": { + "concat-stream": "~2.0.0", + "minimist": "^1.2.5" + }, + "bin": { + "geojson-rewind": "geojson-rewind" + } + }, + "node_modules/@mapbox/geojson-types": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz", + "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==" + }, + "node_modules/@mapbox/jsonlint-lines-primitives": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz", + "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/@mapbox/mapbox-gl-supported": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz", + "integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==", + "peerDependencies": { + "mapbox-gl": ">=0.32.1 <2.0.0" + } + }, + "node_modules/@mapbox/point-geometry": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", + "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=" + }, + "node_modules/@mapbox/tiny-sdf": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.1.1.tgz", + "integrity": "sha512-Ihn1nZcGIswJ5XGbgFAvVumOgWpvIjBX9jiRlIl46uQG9vJOF51ViBYHF95rEZupuyQbEmhLaDPLQlU7fUTsBg==" + }, + "node_modules/@mapbox/unitbezier": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz", + "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=" + }, + "node_modules/@mapbox/vector-tile": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz", + "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==", + "dependencies": { + "@mapbox/point-geometry": "~0.1.0" + } + }, + "node_modules/@mapbox/whoots-js": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz", + "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@types/geojson": { + "version": "7946.0.7", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz", + "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==", + "dev": true + }, + "node_modules/@types/mapbox-gl": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-1.13.4.tgz", + "integrity": "sha512-yoHSG4J9uNTlpQk5GXzbaC6b+XBHGljT10yM5fX2ZAGcH2CVb96TF2uFdoYFehsmeZqlo3txNsbMWpiGh7oy2g==", + "dev": true, + "dependencies": { + "@types/geojson": "*" + } + }, + "node_modules/buffer-from": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", + "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==" + }, + "node_modules/concat-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz", + "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==", + "engines": [ + "node >= 6.0" + ], + "dependencies": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^3.0.2", + "typedarray": "^0.0.6" + } + }, + "node_modules/csscolorparser": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz", + "integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs=" + }, + "node_modules/earcut": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.2.tgz", + "integrity": "sha512-eZoZPPJcUHnfRZ0PjLvx2qBordSiO8ofC3vt+qACLM95u+4DovnbYNpQtJh0DNsWj8RnxrQytD4WA8gj5cRIaQ==" + }, + "node_modules/geojson-vt": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz", + "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==" + }, + "node_modules/gl-matrix": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.3.0.tgz", + "integrity": "sha512-COb7LDz+SXaHtl/h4LeaFcNdJdAQSDeVqjiIihSXNrkWObZLhDI4hIkZC11Aeqp7bcE72clzB0BnDXr2SmslRA==" + }, + "node_modules/grid-index": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz", + "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==" + }, + "node_modules/ieee754": { + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz", + "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==" + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + }, + "node_modules/kdbush": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz", + "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==" + }, + "node_modules/mapbox-gl": { + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.2.tgz", + "integrity": "sha512-CPjtWygL+f7naL+sGHoC2JQR0DG7u+9ik6WdkjjVmz2uy0kBC2l+aKfdi3ZzUR7VKSQJ6Mc/CeCN+6iVNah+ww==", + "dependencies": { + "@mapbox/geojson-rewind": "^0.5.0", + "@mapbox/geojson-types": "^1.0.2", + "@mapbox/jsonlint-lines-primitives": "^2.0.2", + "@mapbox/mapbox-gl-supported": "^1.5.0", + "@mapbox/point-geometry": "^0.1.0", + "@mapbox/tiny-sdf": "^1.1.1", + "@mapbox/unitbezier": "^0.0.0", + "@mapbox/vector-tile": "^1.3.1", + "@mapbox/whoots-js": "^3.1.0", + "csscolorparser": "~1.0.3", + "earcut": "^2.2.2", + "geojson-vt": "^3.2.1", + "gl-matrix": "^3.2.1", + "grid-index": "^1.1.0", + "minimist": "^1.2.5", + "murmurhash-js": "^1.0.0", + "pbf": "^3.2.1", + "potpack": "^1.0.1", + "quickselect": "^2.0.0", + "rw": "^1.3.3", + "supercluster": "^7.1.0", + "tinyqueue": "^2.0.3", + "vt-pbf": "^3.1.1" + }, + "engines": { + "node": ">=6.4.0" + } + }, + "node_modules/minimist": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", + "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==" + }, + "node_modules/murmurhash-js": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz", + "integrity": "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E=" + }, + "node_modules/pbf": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz", + "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==", + "dependencies": { + "ieee754": "^1.1.12", + "resolve-protobuf-schema": "^2.1.0" + }, + "bin": { + "pbf": "bin/pbf" + } + }, + "node_modules/potpack": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.1.tgz", + "integrity": "sha512-15vItUAbViaYrmaB/Pbw7z6qX2xENbFSTA7Ii4tgbPtasxm5v6ryKhKtL91tpWovDJzTiZqdwzhcFBCwiMVdVw==" + }, + "node_modules/protocol-buffers-schema": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.4.0.tgz", + "integrity": "sha512-G/2kcamPF2S49W5yaMGdIpkG6+5wZF0fzBteLKgEHjbNzqjZQ85aAs1iJGto31EJaSTkNvHs5IXuHSaTLWBAiA==" + }, + "node_modules/quickselect": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz", + "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==" + }, + "node_modules/readable-stream": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/resolve-protobuf-schema": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz", + "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==", + "dependencies": { + "protocol-buffers-schema": "^3.3.1" + } + }, + "node_modules/rw": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", + "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=" + }, + "node_modules/safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "dependencies": { + "safe-buffer": "~5.2.0" + } + }, + "node_modules/supercluster": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.0.tgz", + "integrity": "sha512-LDasImUAFMhTqhK+cUXfy9C2KTUqJ3gucLjmNLNFmKWOnDUBxLFLH9oKuXOTCLveecmxh8fbk8kgh6Q0gsfe2w==", + "dependencies": { + "kdbush": "^3.0.0" + } + }, + "node_modules/tinyqueue": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz", + "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==" + }, + "node_modules/typedarray": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", + "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" + }, + "node_modules/typescript": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", + "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" + }, + "node_modules/vt-pbf": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.1.tgz", + "integrity": "sha512-pHjWdrIoxurpmTcbfBWXaPwSmtPAHS105253P1qyEfSTV2HJddqjM+kIHquaT/L6lVJIk9ltTGc0IxR/G47hYA==", + "dependencies": { + "@mapbox/point-geometry": "0.1.0", + "@mapbox/vector-tile": "^1.3.1", + "pbf": "^3.0.5" + } + } + }, "dependencies": { "@mapbox/geojson-rewind": { "version": "0.5.0", @@ -26,7 +352,8 @@ "@mapbox/mapbox-gl-supported": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz", - "integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==" + "integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==", + "requires": {} }, "@mapbox/point-geometry": { "version": "0.1.0", @@ -63,9 +390,9 @@ "dev": true }, "@types/mapbox-gl": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-1.9.0.tgz", - "integrity": "sha512-9E7tTRwU3Fw1CXj3OGbJpwJABNXWvgMTt78bm006u56eRGfCy/2VGuxjv0+yc1cY43wmot2zWPuVD0/elQ3iww==", + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-1.13.4.tgz", + "integrity": "sha512-yoHSG4J9uNTlpQk5GXzbaC6b+XBHGljT10yM5fX2ZAGcH2CVb96TF2uFdoYFehsmeZqlo3txNsbMWpiGh7oy2g==", "dev": true, "requires": { "@types/geojson": "*" @@ -128,9 +455,9 @@ "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==" }, "mapbox-gl": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.11.1.tgz", - "integrity": "sha512-UjXpPUTUzHTLfhl5dLefwV3Jgu7DN9phpn8RnnkQVe1sOXfVYMS5Vhjn225krhzRc7xnKIBHxLyu0rHZGyeXuQ==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.2.tgz", + "integrity": "sha512-CPjtWygL+f7naL+sGHoC2JQR0DG7u+9ik6WdkjjVmz2uy0kBC2l+aKfdi3ZzUR7VKSQJ6Mc/CeCN+6iVNah+ww==", "requires": { "@mapbox/geojson-rewind": "^0.5.0", "@mapbox/geojson-types": "^1.0.2", @@ -246,9 +573,9 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, "typescript": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.1.3.tgz", - "integrity": "sha512-+81MUSyX+BaSo+u2RbozuQk/UWx6hfG0a5gHu4ANEM4sU96XbuIyAB+rWBW1u70c6a5QuZfuYICn3s2UjuHUpA==", + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", + "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", "dev": true }, "util-deprecate": { diff --git a/package.json b/package.json index 7659c56..8957dfc 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "types": "dist/index.d.ts", "scripts": { "build": "tsc", + "build:watch": "tsc -w", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { @@ -24,11 +25,15 @@ }, "homepage": "https://github.com/el/style-switcher#readme", "dependencies": { - "mapbox-gl": "^1.11.1" + "mapbox-gl": "^1.13.0" }, "devDependencies": { - "@types/mapbox-gl": "^1.9.0", - "typescript": "^3.1.3", - "minimist": ">=0.2.1" + "@types/mapbox-gl": "^1.13.4", + "minimist": ">=0.2.1", + "typescript": "^4.9.4" + }, + "peerDependencies": { + "@types/mapbox-gl": "^1.13.4", + "mapbox-gl": "^1.13.0" } }