I'm using react-leaflet and want to add a legend to the map.

I can currently do it by passing a ref of the map to a custom ponent and render null while having a function create the HTML and add it to the map. The refs are being a nightmare to test using Jest and Enzyme.

Is there a way to using a react-leaflet ponent to acplish this?

I'm using react-leaflet and want to add a legend to the map.

I can currently do it by passing a ref of the map to a custom ponent and render null while having a function create the HTML and add it to the map. The refs are being a nightmare to test using Jest and Enzyme.

Is there a way to using a react-leaflet ponent to acplish this?

• javascript
• reactjs
• leaflet
• react-leaflet

1 Answer 1

You can achieve that by extending react-leaflet's MapControl class and using for instance the legend code provided by Leaflet official page tutorial for Using GeoJSON with Leaflet.

class Legend extends MapControl {
   ponentDidMount() {
      // place your code here

      ...
      const legend = L.control({ position: "bottomright" });

      ...
      const { map } = this.props.leaflet;
      legend.addTo(map);
   }
}

and then import it here:

 <Map style={{ height: "100vh" }} center={position} zoom={13}>
        <TileLayer
          url="https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm/copyright">OpenStreetMap</a> contributors'
        />
        <Legend />
 </Map>

Demo