francoisromain/leaflet-markers-canvas

A Leaflet plugin to render many markers in a canvas instead of the DOM

leaflet-markers-canvas's Issues

Able to stack multiple layers, but mousepointer seems to only work with the top layer

Mouse and click events fire regardless of layer, but the mouse does not change to "pointer" for markers that aren't in the top most L.MarkersCanvas().

const layers = {
    bottom: new L.MarkersCanvas(),
    middle: new L.MarkersCanvas(),
    top: new L.MarkersCanvas(),
}

Only "top" layer has mouse pointer on hover.

Redraw doesnt appear to work on markers outside the original draw view

I'm drawing trajectories in a map that follow a path of markers. The markers in the original canvas view draw quickly and seem to be lined up (though panning sometimes renders the markers off position). My main problem here is that when I pan to another part of the trajectory, the markers that I know should be there are not drawn.

Is there a way to force markers that are not visible to still be drawn? Or atleast to draw them when they become visible?

In the demos for the tool, it looks like offscreen markers SHOULD be popping in when moving

Error: Uncaught TypeError: Cannot read properties of undefined (reading '0')

import { MarkersCanvas } from "leaflet-markers-canvas";
import RBush from "rbush";

const map = L.map(...)
const markersCanvas = new L.MarkersCanvas();
markersCanvas.addTo(map);
const marker = L.marker(e.latlng, { draggable: true }).bindPopup(html);
markersCanvas.addMarker(marker)

// => leaflet-markers-canvas.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading '0')

Unable to hide show canvas-markers-layer

Hi,

Following documentation I see clear, and redraw, clear seems to clear the layer but cannot show it again or redraw.

I am trying to simulate an animation creating several canvas-markers layers lay1, lay2, lay3 etc from several points, each points represents events in a 10 minute period.

I am trying to the simulate a loop where shows events every 10 mins (example reports grouped every 10 mins). I am unable to loop and show certain layers and set opacity 0 to the others, I done with images and normal markers, but can relate here.

Even I added a Control Layer to have those lay1,lay2,lay3... in as a layer and let the control show hide but also does not works.

What is the approach... ? thanks

Polyline

Hi,
is it possible to add Polyline to Canvas?

transform in style attribute of canvas tag not set on init

in apps with the map not taking up the whole screen, or with pages that resize, the points will often be in the wrong place until you drag the map. In the source it looks like you only set the transform / x / y offset when the map zooms.

I run the js file in a vue project, and copy the demo code in readme.md. I got two errors below

I run the js file in a vue project, and copy the demo code in readme.md. I got two errors below

F:\FrontendProject\uav1go\src\assets\jsplugin\leaflet.canvas-markers.js
  3:35  error  'define' is not defined  no-undef
  3:48  error  'define' is not defined  no-undef

✖ 2 problems (2 errors, 0 warnings)


 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/page/uavcommunity/mapview/usermap.vue?vue&type=script&lang=js& 26:0-53
 @ ./src/page/uavcommunity/mapview/usermap.vue?vue&type=script&lang=js&
 @ ./src/page/uavcommunity/mapview/usermap.vue
 @ ./src/router/index.js
 @ ./src/main.js

Did anyone know the reason?

use markerCanvas depend on l.control search

if use garduCanvas control search can't used
garduMarkerCanvas control search can used

but problem if used garduMarkerCanvas big data lazy render load

how solution, we use search depend on garduCanvas
thx

Options for bindTooltip or bindPopup not working

I was trying to add labels to markers,but leaflet options for bindTooltip or bindPopup not working with this plugin,neither it is possible to add icons with L.divIcon

Script Using

I have download the leaflet-markers-canvas.js from the dist.
Import it like this:
<script src="https://unpkg.com/[email protected]/rbush.js"></script>
<script src="leaflet-markers-canvas.js"></script>

But when I use it
var markersCanvas = new L.MarkersCanvas();
Where I was wrong? I'm, sure that the canvas.js in the same folder as my index.html
Tks!

how can i rotate marker

hi please create an example that can
CreateMarker
EditsameMarker
change angle of marker (use for flight )

removeMarker works very slowly when removing a lot of markers

Thank you for your lib, it is great.
addMarkers is fast,
is it possible to add something like removeMarkerS since removeMarker is slow when trying to delete 10k markers by one
As I find out this part makes it slow

 if (isVisible) {
          this._redraw(true);
        }

Thanks

同学，您这个项目引入了121个开源组件，存在5个漏洞，辛苦升级一下

检测到 francoisromain/leaflet-markers-canvas 一共引入了121个开源组件，存在5个漏洞

漏洞标题：serialize-javascript 代码问题漏洞
缺陷组件：[email protected]
漏洞编号：CVE-2020-7660
漏洞描述：Verizon serialize-javascript是美国威瑞森电信（Verizon）公司的一款支持将JavaScript序列化为 JSON超集的软件包。
serialize-javascript 3.1.0之前版本中存在代码问题漏洞。远程攻击者可借助index.js文件中的‘deleteFunctions’函数利用该漏洞注入任意代码。
国家漏洞库信息：https://www.cnvd.org.cn/flaw/show/CNVD-2020-53801
影响范围：(∞, 3.1.0)
最小修复版本：3.1.0
缺陷组件引入路径：[email protected]>[email protected]>[email protected]

另外还有5个漏洞，详细报告：https://mofeisec.com/jr?p=ie2cec

Removing MarkerCanvas doesnt appear to remove events

Im tryiong to figure out the right way to dynamically remove a L.MarkersCanvas() from the map but every time I remove it the events appear to persist.

Here is my code snippet:

const markersCanvas= new L.MarkersCanvas({ pane: 'markerPane' }).addTo(map);
// ...
// proceed to add a couple markers
// ...
map.removeLayer(markersCanvas);

The layer gets removed from the screen and the canvas gets removed from the DOM but as I mouse over the map im getting the following console errors which eventually freeze the entire application:

Support sprite icon sheet

Is there any solution to make sprite icon rendered by canvas?

Typescript

not entirely sure how to use this in typescript when importing stuff from leaflet like this

import {
  Map, Layer, MapOptions, TileLayer, CRS, tileLayer,
  TileLayerOptions, LeafletMouseEvent, LeafletEvent, Canvas, canvas, circleMarker
} from 'leaflet';

i tried:

import {markersCanvas} from 'leaflet-markers-canvas';

import * as L from 'leaflet-markers-canvas';

import 'leaflet-markers-canvas';
import * as L from 'leaflet';

would be good to make this properly for typescript

you can ofc do this, but this is like a giant mess

import 'leaflet-markers-canvas';
// @ts-ignore
import { MarkersCanvas } from 'leaflet';

and even in that case im getting:

ERROR TypeError: n is undefined
    _addMarker leaflet-markers-canvas.min.js:1
    addMarkers leaflet-markers-canvas.min.js:1
    addMarkers leaflet-markers-canvas.min.js:1

Zoom Icons Synchronously

This rewrite appears to exhibit the same issues as the original plugin in terms of zooming. The icons seem to follow if you pan and zoom at the same time on mobile.