React Leaflet Markers

:pushpin: Provide a HOC to render markers with canvas instead DOM nodes with better performance.

How use

First, install the dependencie

yarn add @somarmeteorologia/react-leaflet-markers

See above a simple example

import { Map, Marker } from 'react-leaflet'
import Markers from '@somarmeteorologia/react-leaflet-markers'

const defaultIcon = L.divIcon({
  html: renderToString(<Icon />),
  iconSize: [24, 41]
})

<Map>
  <Markers isDebug={true} markers={
    markers.map(marker => (
      <Marker
        key={marker.key}
        icon={defaultIcon}
        position={[marker.latitude, marker.longitude]}
        properties={marker}
      />
    )
  } />
</Map>

The following attributes are required inside properties object from Marker component.

{
  key: String|Number,
  latitude: Number,
  longitude: Number
}

The following attributes are required inside icon object from Marker component, between html or iconUrl, one of the two are required.

{
  html: String,
  iconUrl: String,
  iconSize: Array[Number]
}

See demo

Roadmap

• tests
• performance improvements
• optional attributes from icon and properties

License

MIT © Somar Meteorologia