Rendering “react components” as markers (dynamic JSX markers) for react-leaflet
Leafletjs is an alternative to google maps library to render maps on web pages. The main advantage of using Leafletjs is cost and flexibility to choose any tiling service.
One issue which I found in this library was that it did not allow any direct way to render react-component or any JSX Elements as Markers over the maps. The indirect way requires a lot of work for rendering react components. Even though with all that work if we succeed to render react-components as markers on react-leaflet maps it wouldn’t be that useful since it will loose all the event properties and it would act just like a plain image over the map.
To overcome this issue I created a react package called react-leaflet-enhanced-marker. It works with any stable version of react-leaflet 1.x.x and 2.x.x.
Rendering Marker over map:
This package supports the following types as markers to render over react-leaflet :-
- Plain text: Plan text which you want to see as marker over map
- React component: Nested or single level react component without losing the event properties
- Image: Any .png, .jpg image you wish to render as marker over map
How to use
- Using react-leaflet-enhanced-marker to render Marker using plain text
2. Using react-leaflet-enhanced-marker to render Marker using static React Component
3.Using react-leaflet-enhanced-marker to render Image markers