Add option to preserve user added layers when switching base maps

README.md

@@ -4,7 +4,6 @@ Adds a style switcher to `mapbox-gl`
 
 ![](https://img.shields.io/bundlephobia/min/mapbox-gl-style-switcher) <a href="https://www.npmjs.com/package/mapbox-gl-style-switcher">![](https://img.shields.io/npm/v/mapbox-gl-style-switcher)</a> ![](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

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,12 +24,17 @@ 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;
     onRemove(): void;
     private closeModal;
     private openModal;
     private onDocumentClick;
+    private restoreLayers;
 }
 export {};