How do I programatically a layer in react-leaflet?

Question

I'm using react-leaflet (3.2.0) and TypeScript, In my project, I don't want switch layers with LayersControl, but I need do it programatically. So I have something like this:

export const getDefaultBgLayer = () => ( 
       <TileLayer attribution='&copy; <a 
                  href="osm.org/copyright">OpenStreetMap</a> contributors' 
                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" maxZoom={20} 
                  minZoom={3} />
 );
    
 const MyMap = () => {
    
        const [bgLayer, setBgLayer] = useState<any>(getDefaultBgLayer());
    
        return (
                <MapContainer>
    
                    {bgLayer}
    
                </MapContainer>
        );
    
    }

export default MyMap;

and If I'm trying

setBgLayer(getAnotherBgLayer())

It not will change a backgroud layer. Btw. getAnotherBgLayer return correct backgroud layer becouse:

const [bgLayer, setBgLayer] = useState<any>(getAnotherBgLayer());

works correctly. Any one can help? Regards, Mik

If you return a string this is not how this library works. What exactly `getDefaultBgLayer` returns? — kboul, Jul 13 '21 at 12:10
Check [this](https://stackoverflow.com/questions/65965521/change-tile-at-tilelayer-at-state-change/65966026#65966026). — kboul, Jul 13 '21 at 13:11

score 0 · Answer 1 · answered Jul 14 '21 at 12:08

0

Thank you for everyone who tried to help me.

I have solved it on this way:

    setBgLayer(undefined)
    setTimeout(() =>
        setBgLayer(mapsource)
    , 0)

Regards, M.

answered Jul 14 '21 at 12:08

javalonde

549
2
6
7

How do I programatically a layer in react-leaflet?

1 Answers1