react-leaflet-marker v2.1.0

react-leaflet-marker

Custom markers for react-leaflet maps.

You can use any react component with version of react-leaflet 3.x.x || 4.x.x

Support zoom animation

Demo

• Demo storybook link

Install

React 18 react-leaflet 4

npm i react-leaflet-marker --save

React 17 react-leaflet 3

npm i react-leaflet-marker@1.1.4 --save

Get started

import React from "react";
import { MapContainer } from "react-leaflet";
import { MarkerLayer, Marker } from "react-leaflet-marker";

const ReactMarker = () => (
    <MapContainer
        {/* ...MapContainerProps react-leaflet */}
        center={[55.796391, 49.108891]}
        zoom={10}
    >
        <MarkerLayer>
            <Marker
                position={[55.796391, 49.108891]}
            >
                <div>Hi, i'm a react element</div>
            </Marker>
        </MarkerLayer>
    </MapContainer>
);

export default ReactMarker;

Examples

Simple marker with flexible size

Markers without size can't take placement props.

<MarkerLayer>
    <Marker
        position={[55.796391, 49.108891]}
    >
        <div style={{
            background: 'red'
        }}>
            simple{'\u00A0'}marker
        </div>
    </Marker>
</MarkerLayer>

Marker with fixed size

Just add size props. It is the best practice the most cases.

<MarkerLayer>
    <Marker
        position={[55.796391, 49.108891]}
        size={[80, 20]} // required for placement
        // you can use optional `placement`
        placement="center" // "top", "bottom"
    >
        <div style={{
            background: 'red',
            textAlign: 'center'
        }}>
            center
        </div>
    </Marker>
</MarkerLayer>

Rise on hover

The marker will get on top of others when you hover the mouse over it.

<MarkerLayer>
    <Marker
        position={[55.796391, 49.108891]}
        size={[80, 40]}
        interactive // required for riseOnHover
        riseOnHover
    >
        <div style={{
            background: 'red',
            textAlign: 'center'
        }}>
            First marker
        </div>
    </Marker>
</MarkerLayer>

Use any react component as marker

For example, I used antd dropdown and custom icons

Props