Extending.md

Extending

Creating custom components

React-Leaflet aims to provide all the controls and layers provided by Leaflet, but it does not support any Leaflet plugin.
Adding layers and behaviors provided by plugins in your application should be relatively easy by extending one of the components provided by React-Leaflet (see the class hierarchy below to find the most relevant component to extend) and implementing the relevant methods:

• createLeafletElement (props: Object): Object (mandatory): create and return the relevant Leaflet element instance. this instance will be stored in the class as this.leafletElement and used by other methods handling behavior such as events bindings.
• updateLeafletElement (fromProps: Object, toProps: Object): Object (optional): use this method to update the leafletElement according to the properties changes.

Make sure to read the how it works page of this documentation to understand what your custom component should use and eventually provide.

Class hierarchy

• React.Component
  • ControlledLayer: base class used by LayersControl to handle adding and removing its layers.
    • LayersControl.BaseLayer
    • LayersControl.Overlay
  • MapComponent: base class handling extracting and updating Leaflet events.
    • Map: top-level component instantiating a Leaflet map and providing it to its children.
    • MapLayer: base class for all map layers, handling adding and removing the layer from the map.
      • GridLayer: base class for tile layers, handles opacity and z-index.
        • CanvasTileLayer
        • TileLayer
        • WMSTileLayer
      • ImageOverlay
      • LayerGroup
      • Marker
      • Path: handles styling of vector layers.
        • Circle
        • CircleMarker
        • FeatureGroup
        • GeoJSON
        • Polygon
        • Polyline
        • Rectangle
    • Popup
    • Tooltip
  • MapControl: base class for all controls, handles positioning.
    • AttributionControl
    • LayersControl
    • ScaleControl
    • ZoomControl