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.

react-leaflet introduced by Paul le cam is a react wrapper over this javascript library, which helps using Leafletjs in react. After trying out different libraries for rendering maps and considering all the pros and cons I would any do go with react-leaflet. I’ve been using and developing it for quite a while now.

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.

Package access: GitHub | NPM

Rendering Marker over map:

This package supports the following types as markers to render over react-leaflet :-

  1. Plain text: Plan text which you want to see as marker over map
  2. React component: Nested or single level react component without losing the event properties
  3. Image: Any .png, .jpg image you wish to render as marker over map

How to use

  1. 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

Javascript/Typescript enthusiast!