Dynamic Layer Switch

[mugambi40]

Trying to switch traffic layer dynamically but it is not working.

<LayersControl.BaseLayer name="Google Street" checked={defaultMap ? true : false} key={i}> <ReactLeafletGoogleLayer apiKey={GoogleApiKey} type={"roadmap"} googleMapsAddLayers={TrafficLayer} /> </LayersControl.BaseLayer>

Am using a button to toggle TrafficLayer as in the following code.

if (!ShowTraffic) { setTrafficLayer([{ name: "TrafficLayer" }]); } else { setTrafficLayer([]); }

Any help will be appreciated. Are ReactLeafletGoogleLayer props immutable?

[aviklai]

@mugambi40 Hi,

Currently, this functionality is not implemented. I created a new branch with a basic implementation - you can check it out and let me know if this works for you: https://github.com/aviklai/react-leaflet-google-layer/tree/adding-removing-layers-dynamically

[siddharthkul]

Any plans to merge this ?

[aviklai]

@siddharthkul Hi, I will try to do it today or tomorrow.

[siddharthkul]

Hi @aviklai , I see you have released version 2.1.0.

I misunderstood the issue, I will open a new issue here which is for dynamic map type support.

Thanks for the quick response on this issue though !

[aviklai]

I checked the dynamic layers and the map is not updated properly - only when zooming in or out. There is a somewhat related issue posted here: https://stackoverflow.com/questions/25687831/refreshing-google-maps-api-v3-layers

So for now, I think that the best solution would be refreshing the react leaflet google layer component by setting a unique key, for example: https://codesandbox.io/s/basic-usage-with-react-leaflet-v3-forked-jb2ltg

[mugambi40]

I have tried using unique key. It works if you got one google map layer. However, if you got more than two google map layers (say, streets and terrain) switching traffic layer on the second layer (say, terrain) default to the first selected layer (streets). Check on https://codesandbox.io/s/basic-usage-with-react-leaflet-v3-forked-gkgif3

Switch to Google Terrain and then toggle traffic layer. See what happens. Thanks

[aviklai]

@mugambi40 Hi,

Just to make sure - you are referring to the issue that if you press on the toggle, your base layer selection is reset to the first option (which in your case is Google street), right? If so - the same happens for the tilelayer with openstreetmaps: https://codesandbox.io/s/basic-usage-with-react-leaflet-v3-forked-z1o3k7?file=/src/index.tsx

If you have a suggestion for an implementation - a PR is welcomed.