CODEWITHSUNDEEP
reactjsleafletreact-leaflet
Fernando Ferreira
Fernando Ferreira

Reputation: 808

How to add or remove layers using react-leaflet

I would like to render two distinct react components:

  1. A leaflet map

  2. A sidebar component where I render a list of checkbox to enable/disable GeoJSON layers.

I am using react-leaflet package. And I am using reflux store for keeping the list of all possible layers I will render in the map.

I would like to know whats the best approach for add layers on demand, using the checkbox onChange event. Thanks

Upvotes: 2

Views: 6936

Answers (2)

Rui Zhang
Rui Zhang

Reputation: 11

import { Map, TileLayer, LayersControl } from 'react-leaflet'; const { Overlay } = LayersControl; use the overlay in your map, here is a detail example about this. https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/layers-control.js

Upvotes: 0

Keegan Teetaert
Keegan Teetaert

Reputation: 673

In your checkbox events you would update a "layer toggle" value in your store. Assuming you are set up correctly this value should push a update to your page. So, all you have to do is conditionally render your page based on those "layer toggle" values saved in your store.

Let me know if you would like more explanation.

Upvotes: 2

Related Questions