A high performance react library for leafletjs

How to use

npm i leaflet-react-fibers --save
# or
yarn add leaflet-react-fibers --save

import { LeafletMap, L } from "leaflet-react-fibers"

const JustAMap = () => {
  return (
    <LeafletMap options={{ crs: L.CRS.Simple }}>
      <lfRectangle bounds={[[50, 50], [150, 100]]} options={{ fillColor: 'black' }} add={() => { console.log('added a rectangle layer') }} />
    </LeafletMap>
  )
}

See Docs for various examples.

JSX renderer

You must provide a JSX renderer when embedding HTML in lfPopup or lfTooltip otherwise their contents are ignored, this is by design:

:information_source: You do NOT have to use react-dom, any JSX renderer will suffice.

import { LeafletMap, L } from "leaflet-react-fibers"
import ReactDOM from "react-dom"

const PopupInsideARectangle = () => {
  return (
    <LeafletMap options={{ crs: L.CRS.Simple }} jsxRenderer={ReactDOM.render}>
       <lfRectangle bounds={[[50, 50], [150, 100]]} options={{ fillColor: 'black' }} add={() => { console.log('added a rectangle layer') }}>
        <lfPopup latlng={[100, 100]} add={() => { console.log('added an popup layer') }}>
          <div>Hello world!</div>
        </lfPopup>
      </lfRectangle>
    </LeafletMap>
  )
}

Similar work

None of the libraries mentioned below provide mutability control out of the box and state management features.

1. react-leaflet-fiber another fiber implementation.
2. react-leaflet react wrapper for leaflet which comes with hooks.

Known Issues

[x] Mutability control does not work at the moment. This is a feature of this library that allows a layer to be explicitly mutable or immutable using a mutable prop.

Development

Clone this repository and simply run npm run storybook to get started.