Leaflet plugin inside react-leaflet

user_13339683 0
Viewed 385

I would like to use Leaflet.VectorGrid plugin and I have a question. Is there an example how to create custom component in react-leaflet?

react-leaflet leaflet
1 Answers

React-Leaflet aims to provide all the controls and layers provided by Leaflet, but it does not support any Leaflet plugin.

To create a custom components requires the following steps,

1.) Extend an Abstract class provided by React-Leaflet

2.) Implement createLeafletElement (props: Object): Object method to create Leaflet-element. For example,

createLeafletElement(opts) {
const MapInfo = L.Control.extend({
  onAdd: (map) => {
    this.panelDiv = L.DomUtil.create('div', 'info');
    return this.panelDiv;
  }
});
return new MapInfo({ position: 'bottomleft' });
}

3.) Using withLeaflet - Wrap your component. For example,

export default withLeaflet(MapInfo);

This Example will help you - https://codesandbox.io/s/p5zzmnlk8j

Also Please refer to this documentation https://react-leaflet.js.org/docs/en/custom-components.html

user_112186350
Related