leaflet-canvas-marker-xrr2021

Leaflet plugin to display markers on canvas instead of DOM

Usage no npm install needed!

<script type="module">
  import leafletCanvasMarkerXrr2021 from 'https://cdn.skypack.dev/leaflet-canvas-marker-xrr2021';
</script>

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

npm i 下来后，依赖包leaflet-canvas-marker-xrr2021中有examples，使用demo。也可参考提供的csdn博客地址https://blog.csdn.net/weixin_44151993/article/details/117330239?spm=1001.2014.3001.5501

Installation and basic usage

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

使用方法参考 https://blog.csdn.net/weixin_44151993/article/details/117330239?spm=1001.2014.3001.5501

Now attach layer to map and some markers.

// 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);

Methods

  • addMarker(marker): Adds a marker to the layer.
  • addMarkers(markers): Adds a markers to the layer.
  • removeLayers(markers): Removes 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, Spaction