search

eJuke / Leaflet.Canvas-Markers

Leaflet plugin for displaying icons on canvas instead of DOM
MIT License
167 stars 168 forks source link

Is this working on the latest leaflet? #6

Open iamvitali opened 6 years ago

iamvitali commented 6 years ago

Hi, Installed this with npm and using with import 'leaflet-canvas-marker/dist/leaflet.canvas-markers.js'; (because import 'leaflet-canvas-marker' doesn't do the trick for some reason).

I've added the canvas to the map: this.mapMarkerLayer = L.canvasIconLayer({}).addTo(this.map);

And getting this error on zoom in and out:

screen shot 2018-05-22 at 6 56 09 pm

When I try to add markers to it L.marker([location.lat, location.long]).addTo(this.mapMarkerLayer).bindPopup(location.name);, I get this error:

screen shot 2018-05-22 at 6 53 37 pm
Endebert commented 6 years ago

@iamvitali I wanted to try this solution in my project as well, as I am struggling with performance (related to DOM updates in a Vue project).

I quickly converted it to es6, wasn't that difficult. Also fixed an error on mousemove if no markers have been added yet.

This is based on the master branch btw, here is the state if anyone cares: https://github.com/eJuke/Leaflet.Canvas-Markers/tree/d1e94ed4c222dfab7b7e1b1d4deb01f0a6fc811b

Keep in mind that you need to have rbush installed as an npm package, or adapt the import statement.

You can then use it like this:

import CanvasIconLayer from "./assets/Leaflet_extensions/CanvasIconLayer";
const canvasLayer = new CanvasIconLayer({});

Unfortunately, since there is no support for dragging markers, I can't really use it at this point.