Skip to main content
Version: v3.x

Core API

Interfaces and types​

ControlledLayer​

interface ControlledLayer {
  addLayer(layer: Layer): void
  removeLayer(layer: Layer): void
}

LeafletContextInterface​

interface LeafletContextInterface {
  map: Map
  layerContainer?: ControlledLayer | LayerGroup
  layersControl?: Control.Layers
  overlayContainer?: Layer
  pane?: string
}

LeafletElement​

interface LeafletElement<T, C = any> {
  instance: T
  context: LeafletContextInterface
  container?: C | null
}

ElementHook​

type ElementHook<E, P> = (
  props: P,
  context: LeafletContextInterface,
) => MutableRefObject<LeafletElement<E>>

DivOverlay​

type DivOverlay = Popup | Tooltip

SetOpenFunc​

type SetOpenFunc = (open: boolean) => void

DivOverlayLifecycleHook​

type DivOverlayLifecycleHook<E, P> = (
  element: LeafletElement<E>,
  context: LeafletContextInterface,
  props: P,
  setOpen: SetOpenFunc,
) => void

DivOverlayHook​

type DivOverlayHook<E extends DivOverlay, P> = (
  useElement: ElementHook<E, P>,
  useLifecycle: DivOverlayLifecycleHook<E, P>,
) => (props: P, setOpen: SetOpenFunc) => ReturnType<ElementHook<E, P>>

EventedProps​

interface EventedProps {
  eventHandlers?: LeafletEventHandlerFnMap
}

LayerProps​

interface LayerProps extends EventedProps, LayerOptions {}

PathProps​

interface PathProps extends EventedProps {
  pathOptions?: PathOptions
}

CircleMarkerProps​

interface CircleMarkerProps extends CircleMarkerOptions, PathProps {
  center: LatLngExpression
  children?: ReactNode
}

MediaOverlayProps​

interface MediaOverlayProps extends ImageOverlayOptions, EventedProps {
  bounds: LatLngBoundsExpression
}

PropsWithChildren​

interface PropsWithChildren {
  children?: ReactNode
}

EventedWithChildrenProps​

interface EventedWithChildrenProps extends EventedProps, PropsWithChildren {}

PathWithChildrenProps​

interface PathWithChildrenProps extends PathProps, PropsWithChildren {}

Context​

LeafletContext​

React Context used by React Leaflet, implementing the LeafletContextInterface

LeafletProvider​

LeafletContext.Provider component.

useLeafletContext​

React Hook returning the LeafletContext. Calling this hook will throw an error if the context is not provided.

Hook factories​

The following functions return React hooks for specific purposes.

createElementHook​

Type parameters

  1. E: Leaflet's element class type
  2. P: the component's props
  3. C = any: the element's container, if relevant

Arguments

  1. createElement: (props: P, context: LeafletContextInterface) => LeafletElement<E>
  2. updateElement?: (instance: E, props: P, prevProps: P) => void

Returns ElementHook<E, P>

createControlHook​

Type parameters

  1. E extends Control: Leaflet's element class type
  2. P extends ControlOptions: the component's props

Arguments

  1. useElement: ElementHook<E, P>

Returns ElementHook<E, P>

createDivOverlayHook​

Type parameters

  1. E extends DivOverlay: Leaflet's element class type
  2. P extends EventedProps: the component's props

Arguments

  1. useElement: ElementHook<E, P>
  2. useLifecycle: DivOverlayLifecycleHook<E, P>

Returns ElementHook<E, P>

createLayerHook​

Type parameters

  1. E extends Layer: Leaflet's element class type
  2. P extends LayerProps: the component's props

Arguments

  1. useElement: ElementHook<E, P>

Returns ElementHook<E, P>

createPathHook​

Type parameters

  1. E extends FeatureGroup | Path: Leaflet's element class type
  2. P extends PathProps: the component's props

Arguments

  1. useElement: ElementHook<E, P>

Returns ElementHook<E, P>

Lifecycle hooks​

These hooks implement specific pieces of logic used by multiple components.

useEventHandlers​

This hook adds support for the eventHandlers prop, adding and removing event listeners as needed.

Arguments

  1. element: LeafletElement<Evented>
  2. eventHandlers: LeafletEventHandlerFnMap | null | undefined

Returns void

useLayerLifecycle​

This hook adds support for adding and removing the layer to/from its parent container or the map.

Arguments

  1. element: LeafletElement<Layer>
  2. context: LeafletContextInterface

Returns void

usePathOptions​

This hook adds support for the pathOptions prop, updating the layer as needed.

Arguments

  1. element: LeafletElement<FeatureGroup | Path>
  2. props: PathProps

Returns void

Update functions​

Shared update logic for different components.

updateCircle​

Updates the circle's center and radius if the props change.

Type parameters

  1. E extends CircleMarker: Leaflet's element class type
  2. P extends CircleMarkerProps: the component's props

Arguments

  1. layer: E
  2. props: P
  3. prevProps: P

Returns void

updateGridLayer​

Updates the layer's opacity and zIndex if the props change.

Type parameters

  1. E extends GridLayer: Leaflet's element class type
  2. P extends GridLayerOptions: the component's props

Arguments

  1. layer: E
  2. props: P
  3. prevProps: P

Returns void

updateMediaOverlay​

Updates the overlay's bounds, opacity and zIndex if the props change.

Type parameters

  1. E extends ImageOverlay | SVGOverlay | VideoOverlay: Leaflet's element class type
  2. P extends MediaOverlayProps: the component's props

Arguments

  1. overlay: E
  2. props: P
  3. prevProps: P

Returns void

DOM interactions​

Utility functions to change the class of a HTMLElement.

addClassName​

Arguments

  1. element: HTMLElement
  2. className: string

Returns void

removeClassName​

Arguments

  1. element: HTMLElement
  2. className: string

Returns void

updateClassName​

Arguments

  1. element?: HTMLElement
  2. prevClassName?: string
  3. nextClassName?: string

Returns void

Component factories​

These functions create components from the provided element hook.

createContainerComponent​

Type parameters

  1. E: Leaflet's element class type
  2. P extends PropsWithChildren: the component's props

Arguments

  1. useElement: ElementHook<E, P>

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

createDivOverlayComponent​

Type parameters

  1. E extends DivOverlay: Leaflet's element class type
  2. P extends PropsWithChildren: the component's props

Arguments

  1. useElement: ReturnType<DivOverlayHook<E, P>>

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

createLeafComponent​

Type parameters

  1. E: Leaflet's element class type
  2. P: the component's props

Arguments

  1. useElement: ElementHook<E, P>

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

High-level component factories​

These functions combine hooks and component factories to provide high-level factories for common component types.

createControlComponent​

Type parameters

  1. E extends Control: Leaflet's element class type
  2. P extends ControlOptions: the component's props

Arguments

  1. createInstance: (props: P) => E

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

createLayerComponent​

Type parameters

  1. E extends Layer: Leaflet's element class type
  2. P extends EventedWithChildrenProps: the component's props

Arguments

  1. createElement: (props: P, context: LeafletContextInterface) => LeafletElement<E>
  2. updateElement?: (instance: E, props: P, prevProps: P) => void

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

createOverlayComponent​

Type parameters

  1. E extends DivOverlay: Leaflet's element class type
  2. P extends EventedWithChildrenProps: the component's props

Arguments

  1. createElement: (props: P, context: LeafletContextInterface) => LeafletElement<E>
  2. useLifecycle: DivOverlayLifecycleHook<E, P>

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

createPathComponent​

Type parameters

  1. E extends FeatureGroup | Path: Leaflet's element class type
  2. P extends PathWithChildrenProps: the component's props

Arguments

  1. createElement: (props: P, context: LeafletContextInterface) => LeafletElement<E>
  2. updateElement?: (instance: E, props: P, prevProps: P) => void

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>

createTileLayerComponent​

Type parameters

  1. E extends Layer: Leaflet's element class type
  2. P extends EventedProps: the component's props

Arguments

  1. createElement: (props: P, context: LeafletContextInterface) => LeafletElement<E>
  2. updateElement?: (instance: E, props: P, prevProps: P) => void

Returns ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>>