style-switcher icon indicating copy to clipboard operation
style-switcher copied to clipboard

Question.. Switch styles and maintain state?

Open rhysstubbs opened this issue 2 years ago • 13 comments

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?

rhysstubbs avatar Apr 20 '22 12:04 rhysstubbs

Hi. I didnt understand what you meant. But feel free to create a PR. 👍

el avatar Apr 21 '22 07:04 el

@el Let me explain... When you call setStyle() it does not copy/keey any sources/layers etc. that you may have added manually. For example I might set the initial style as streets, then add 5 custom layers, but if I then change the style to satellite, all of those 5 layers/sources will be lost. What I'm proposing is that there's a way to say "copy these sources/layers and their features state" so that when you switch styles any custom sources/layers etc. added are not lost. Does that make sense?

rhysstubbs avatar Apr 21 '22 09:04 rhysstubbs

This makes sense, currently, the user of the library is required to handle that themselves.

Please feel free to create a PR.

el avatar Apr 25 '22 10:04 el

I managed to fix this by passing a onChange function to the plugin that sets a variable called forceReload to true. Then in the map.on('styledata', ()=>{}); re-add the previously added layers/styles when the 'forceReload' is set to true. Note: the styledata event is called multiple times, so i directly reset the forceReload variable again after the reload function is called!

Probably not the best solution, but hey: 'if it works it ain't stupid' ;)

rikjacobs1390 avatar Jun 01 '22 08:06 rikjacobs1390

I've created a fork with a new option for "preserveLayers":

https://github.com/chriszrc/style-switcher

It automatically retains all user-added layers/sources while switching between road/satellite/etc styles. I think I've covered all the edge cases, but if you try it out and find any problems let me know and then maybe I will create a pull request-

chriszrc avatar Jan 05 '23 21:01 chriszrc

@chriszrc Thanks for initiative, it's great, however, I'm experiencing a strange behaviour. When I switch styles, it flashes to the new one and goes back to the original. Any ideas? 2023-02-15 16 37 50

vcardins avatar Feb 16 '23 00:02 vcardins

@vcardins hard to say, can you recreate the problem in a codesandbox?

chriszrc avatar Feb 16 '23 00:02 chriszrc

@chriszrc Thanks for the quick response, I'm going to try and get back to you. I assume it worked well for you, right?

vcardins avatar Feb 16 '23 00:02 vcardins

@chriszrc Never mind, it's something related to my custom code. 👍🏽

vcardins avatar Feb 16 '23 01:02 vcardins

@chriszrc You solution works perfectly, many thanks. @el Maybe you could incorporate it into the repo and publish a new npm version, it's very useful.

PS: @chriszrc Maybe you could remove the existing console.log.

vcardins avatar Feb 16 '23 01:02 vcardins

@vcardins I removed it-

chriszrc avatar Feb 16 '23 11:02 chriszrc

I dont see a PR for that. I can take a look if @vcardins creates a PR.

el avatar Feb 16 '23 11:02 el

@el I wanted people to actually try it before I made the pr, but now I've created it- https://github.com/el/style-switcher/pull/27

chriszrc avatar Feb 16 '23 11:02 chriszrc