# react-leaflet-marker

> Custom markers for react-leaflet maps.

Latest version **2.1.1** (published 2024-07-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-leaflet-marker
pnpm add react-leaflet-marker
yarn add react-leaflet-marker
bun add react-leaflet-marker
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2024-07-14 |
| First published | 2022-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Valentin Kruglikov |
| Maintainers | vkruglikov |
| Keywords | react, npm, leaflet, react-leaflet, marker |

## Links

- npm: https://www.npmjs.com/package/react-leaflet-marker
- Repository: https://github.com/holytrips/react-leaflet-marker
- Homepage: https://github.com/holytrips/react-leaflet-marker#readme
- Issues: https://github.com/holytrips/react-leaflet-marker/issues
- npm.io page: https://npm.io/package/react-leaflet-marker

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.1.1 (latest) — 2024-07-14
- 2.1.0 — 2022-12-01
- 2.0.0 — 2022-09-11
- 1.1.4 — 2022-05-16
- 1.1.3 — 2022-05-06
- 1.1.2 — 2022-05-05
- 1.1.1 — 2022-05-05
- 1.1.0 — 2022-05-05
- 1.0.3-alpha.9 — 2022-05-03
- 1.0.3-alpha.8 — 2022-05-02
- 1.0.3-alpha.7 — 2022-05-02
- 1.0.3-alpha.6 — 2022-05-02
- 1.0.3-alpha.5 — 2022-05-02
- 1.0.3-alpha.4 — 2022-05-02
- 1.0.3-alpha.1 — 2022-05-02
- … 4 more at https://npm.io/package/react-leaflet-marker/versions

## README

# [react-leaflet-marker](https://www.npmjs.com/package/react-leaflet-marker)
Custom markers for react-leaflet maps.

You can use any react component with version of [react-leaflet](https://github.com/PaulLeCam/react-leaflet) 3.x.x || 4.x.x

[![npm](https://img.shields.io/npm/v/react-leaflet-marker.svg)](https://www.npmjs.com/package/react-leaflet-marker)
[![types](https://badgen.net/npm/types/react-leaflet-marker)](https://npmjs.org/package/react-leaflet-marker)
[![GitHub Actions CI](https://github.com/holytrips/react-leaflet-marker/actions/workflows/ci.yml/badge.svg)](https://github.com/holytrips/react-leaflet-marker/actions/workflows/ci.yml)
[![License](https://badgen.net/github/license/holytrips/react-leaflet-marker)](https://github.com/holytrips/react-leaflet-marker/blob/master/LICENSE)

### Support zoom animation
![animation](.github/images/animation.gif)

## Demo
- [Demo storybook link](https://holytrips.github.io/react-leaflet-marker/)

## Install
### React 18 react-leaflet 4 
```sh
npm i react-leaflet-marker --save
```
### React 17 react-leaflet 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 = () => (
    <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.

![simple](.github/images/simple.png)
```javascript
<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.

![placement](.github/images/placement.png)
```javascript
<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.

![rise on hover](.github/images/rise_on_hover.gif)
```javascript
<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](https://github.com/ant-design/ant-design/) dropdown and custom icons

![cover](.github/images/cover.png)

## 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` |

---
_Source: https://npm.io/package/react-leaflet-marker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._