el / style-switcher Goto Github PK

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.

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.

Hello,

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

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

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

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.

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?

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-

Have you considered supporting MapLibre?

Current style:

Selected style:

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?

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;

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?

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

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, '_'));

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?

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?

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?

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.

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.