# leaflet-canvas-marker

> Leaflet plugin to display markers on canvas instead of DOM

Latest version **0.2.0** (published 2018-06-09) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2018-06-09 |
| First published | 2017-10-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 40.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 175 |
| Author | Evgeniy Voynov |
| Maintainers | ejuke |
| Keywords | leaflet, leaflet-plugin, marker, map |

## Links

- npm: https://www.npmjs.com/package/leaflet-canvas-marker
- Repository: https://github.com/eJuke/Leaflet.Canvas-Markers
- Homepage: https://github.com/eJuke/Leaflet.Canvas-Markers#readme
- Issues: https://github.com/eJuke/Leaflet.Canvas-Markers/issues
- npm.io page: https://npm.io/package/leaflet-canvas-marker

## Dependencies (1)

- [rbush](https://npm.io/package/rbush.md) ^2.0.2

## Recent versions

- 0.2.0 (latest) — 2018-06-09
- 0.2.1 (beta) — 2019-03-19
- 0.1.3 — 2018-04-30
- 0.1.2 — 2017-10-25

## README

# Leaflet.Canvas-Markers
Leaflet plugin for displaying markers on canvas instead of DOM. Working with Leaflet 1.0.0 and above.
Feel free to contribute

## Demo

There's a [demo](http://eJuke.github.io/Leaflet.Canvas-Markers/examples/index.html) for 10000 points, running on Canvas

## Installation and basic usage

Just download `leaflet.canvas-markers.js` from the `dist` folder and attach it to your project.

```html
<script src="leaflet.canvas-markers.js"></script>
```

Now attach layer to map and some markers.

```js
// Adds a layer
var ciLayer = L.canvasIconLayer({}).addTo(map);

// Marker definition
var marker =  L.marker([58.5578, 29.0087], {icon: icon});

// Adding marker to layer
ciLayer.addMarker(marker);
```

## Benchmark

Plugin was tested in Google Chrome v66 & IE11. There is results for 100000 markers:

<table>
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Default Leaflet Markers</th>
      <th><b>Leaflet.Canvas-Markers</b></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Memory used</td>
      <td>up to 2.8 Gb</td>
      <td><b>about 300 Mb</b></td>
    </tr>
    <tr>
      <td>First load time</td>
      <td>160-200 seconds</td>
      <td><b><1 seconds</b></td>
    </tr>
    <tr>
      <td>Zoom and move time</td>
      <td>more than 3 minutes</td>
      <td><b>0.5 seconds</b></td>
    </tr>
  </tbody>
</table>

As you can see DOM operations are slow, so you should use canvas for a large number of markers.

You can also use L.circleMarker for your points with similar performance, but then you're limited to icon design.

## Methods

- **addMarker(marker)**: Adds a marker to the layer.
- **addMarkers(markers)**: Adds a markers to the layer.
- **removeMarker(marker, redraw)**: Removes a marker from the layer. Set **redraw** to `true` if you want to redraw layer after marker remove
- **redraw()**: Redraws the layer
- **addOnClickListener(eventHandler)**: Adds common click listener for all markers
- **addOnHoverListener(eventHandler)**: Adds a hover over listener for all markers

I also implemented binds for default **addLayer**, **addLayers** and **removeLayer** (equal to removeMarker(marker, _true_) methods.

## Contributors

[crzo](https://github.com/crzo), [Spaction](https://github.com/Spaction)

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