Custom markers for react-leaflet maps.
npm install react-leaflet-markerYou can use any react component with version of react-leaflet 3.x.x || 4.x.x




sh
npm i react-leaflet-marker --save
`
$3
`sh
npm i react-leaflet-marker@1.1.4 --save
`Get started
`javascript
import React from "react";
import { MapContainer } from "react-leaflet";
import { MarkerLayer, Marker } from "react-leaflet-marker";const ReactMarker = () => (
{/ ...MapContainerProps react-leaflet /}
center={[55.796391, 49.108891]}
zoom={10}
>
position={[55.796391, 49.108891]}
>
Hi, i'm a react element
);
export default ReactMarker;
`
Examples
$3
Markers without size can't take placement props.`javascript
position={[55.796391, 49.108891]}
>
background: 'red'
}}>
simple{'\u00A0'}marker
$3
Just add size props. It is the best practice the most cases.`javascript
position={[55.796391, 49.108891]}
size={[80, 20]} // required for placement
// you can use optional placement
placement="center" // "top", "bottom"
>
background: 'red',
textAlign: 'center'
}}>
center
$3
The marker will get on top of others when you hover the mouse over it.`javascript
position={[55.796391, 49.108891]}
size={[80, 40]}
interactive // required for riseOnHover
riseOnHover
>
background: 'red',
textAlign: 'center'
}}>
First marker
$3
For example, I used antd dropdown and custom icons
Props
| Name | Default | Type | Description |
| ---------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | --- |
|
position | - | LatLngExpression | Lat Lng coordinates |
| innerRef? | - | MutableRefObject | |
| riseOnHover? | false | bool | If true, the marker will get on top of others when you hover the mouse over it.If true, the marker will get on top of others when you hover the mouse over it. |
| riseOffset? | 250 | number | The z-index offset used for the riseOnHover feature. |
| zIndexOffset? | 0 | number | By default, marker images zIndex is set automatically based on its latitude. Use this option if you want to put the marker on top of all others (or below), specifying a high value like 1000 (or high negative value, respectively). |
| interactive? | false | bool | If set false, the marker won't respond to mouse |
| size? | - | [width: number, height: number] | Size marker. Required for placement |
| placement? | center | string | One of top, center, bottom` |