el / style-switcher

Mapbox GL JS Style Switcher

Mapbox GL JS Style Switcher

Adds a style switcher to mapbox-gl

Installation:

npm i mapbox-gl-style-switcher --save

Demo:

• codesandbox

Usage:

import { MapboxStyleSwitcherControl } from "mapbox-gl-style-switcher";
import { Map as MapboxMap } from "mapbox-gl";

import "mapbox-gl-style-switcher/styles.css";

const map = new MapboxMap();
map.addControl(new MapboxStyleSwitcherControl());

Options:

If you want to supply your own list of styles, pass them in the constructor.

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"
    }
];

// 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;
    }
};

map.addControl(new MapboxStyleSwitcherControl(styles, options));

If you want to specify a default style, pass them in the constructor as second argument.

map.addControl(new MapboxStyleSwitcherControl(styles, 'Dark'));

Screenshots

style-switcher's Issues

Source map problem with npm 8.12.0

Getting next in terminal:

WARNING in ./node_modules/mapbox-gl-style-switcher/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Source\XXX\node_modules\mapbox-gl-style-switcher\lib\index.ts' file: Error: ENOENT: no such file or directory, open 'D:\Source\XXX\node_modules\mapbox-gl-style-switcher\lib\index.ts

Edit:
See this: facebook/create-react-app#11924 (comment)

No code for onRemove method

To be able to translate each title, it's mandatory to remove the control and create a new on with translated titles.
There is no code in your OnRemove method.
According to the MapBox Api documentation https://docs.mapbox.com/mapbox-gl-js/api/#icontrol
please thanks add those 2 lines :

  this.controlContainer.parentNode.removeChild(this.controlContainer);
    this._map = undefined;

change icon style-switcher

Hi, is it possible to change the icon of the style-switcher?

Current Map Layers sources (polygons) disappears when an map style is selected

Current style:

Selected style:

Projection switching

Thank you so much for this awesome plugin!
Is it possible to create another library or implement a feature into this library, which makes it possible to switch between the different projections that were added to the mapbox-gl-js library?

support layer toggle method of switching styles

One way I sometimes implement style switching is creating a single Style in Studio comprised of layers from multiple styles concatenated together, then to switch the style it's just a matter of toggling layers on and off.

I liked the UI and scaffolding your style-switcher provided so used it as a base and made that change at master...alantgeo:toggle-layers

I took a few shortcuts when working on my fork, like removing all the TS so it's not PR ready), so this is more of a feature request, maybe it's worth supporting a few different styles of style switching, in particular this layer toggle method.

In my fork I also added a dist build using rollup which was handy for me.

Support locally-defined styles

Currently you can only use styles that are hosted on the web somewhere, rather than a local definition.

Allow to choose default style

Currently, there's no way to change the default style of 'Streets'. Even if the map starts with a different style, the selector will not show the map's initial style as active, it will show Streets as active.

It would be great if either we could pass in the default style (maybe as second parameter to MapboxStyleSwitcherControl?), or if it would "read" from the map what style is there as default, and start with that.

Thoughts?

Preserve existing layers when switching, or add beforeChange and onChange callback options

I found it surprising that when changing the map style, all my existing layers were blown away (I'm suprised mapbox can't do this automatically). The best I can tell, this appears to currently be the best way to preserve layers on the mapbox map when changing styles:

mapbox/mapbox-gl-js#4006 (comment)

It would be amazing if this could be implemented generically, or as a fallback, at least add change hooks so that users can cache the existing layers before a style change, and then reapply them after the style change has been made-

Creating a projection switcher without duplicating all this code

Hi, thanks a lot for this style switcher I'm happy to use on https://nicolas-hoizey.photo/map/

I now would like to add a projection switcher, and it looks like it could use 95 % of your code.

Do you think it would be possible to have a common generic switcher, used by the style switcher and other switchers?

Provide a way to update active style (so the correct style is bold in the option menu)

The app I am working on includes manual updates to the base map style that happen outside of the style switcher. It would be nice if the style switcher took its active state for option bolding from the basemap in the map regardless of how it was set. Im assuming the active state for a style gets set when a user selects a style with the switcher, but maybe there can be a listener that sets the active state on basemap change instead (assuming Mapbox provides such a listener that would work)

Right now I am considering manually updating the css classes myself but that is really hacky and not durable.

closeModal immediately executed in shadow DOM context

Hello, i'm using the widget in a stencil component with maplibre but no list is displayed because the closeModal method is executed right after the openModal one.

I think the problem is with the shadow DOM: i noticed that if replace
document.addEventListener("click", this.onDocumentClick);

with

this.map.getContainer().addEventListener("click", this.onDocumentClick);

Then the modal is displayed correctly.

If the defaultStyle is one of the available styles options, it should get the active status.

Currently if the defaultStyle is one of the available styles options, it's entry doesn't get the active class and the option is not highlighted.

Can't use spaces in layer titles

Due to this line, if you try to use a space in a layer title (eg, "Mapbox Outdoors"), you get this error:

DOMException: "String contains an invalid character"

Not really sure if there's much value adding the title as a class, but if so, I'd suggest something like this:

styleElement.classList.add(style.title.replace(/[^a-z0-9-]/gi, '_'));

Events

Hello,

ho do I intercept mouse click event on style-switcher control?

Hide list when clicken selected style option

When you currently click the selected style option, the styles list won't get hidden, unlike the other options in the list. If you select one of them, the list disappears. To hide the list without selecting another style than the selected one, you need to click on the map outside of the list, which is not very user friendly in my opinion. Is it possible to change this behaviour?

Unable to use mapbox-gl-controls with node/gulp.

I would like to add it to an existing front-end project built on top of node/gulp/sass but the dist/index.js throws this exception: Uncaught ReferenceError: exports is not defined.

Add MapLibre support

Have you considered supporting MapLibre?

Question.. Switch styles and maintain state?

Hi, I've recently implemented a very similar component myself, before discovering this one!

The main difference being that I needed to maintain sources/layers/feature state in-between style switches. This is semi-baked into my version but I feel like this could be a useful feature for others too...

My question is whether or not you'd accept a PR for this feature?

Use without NPM?

I've noticed that many plugins allow users to use an api.mapbox.com URL to import the plugin into an HTML file. Is this possible with style-switcher? If so, what is the URL?