React Leaflet Markers
📌 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-markersSee 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]
}Roadmap
- tests
- performance improvements
- optional attributes from icon and properties