lipton-ice-tea / leaflet-canvas-markers

Adding all images to one canvas, together with the base L.CircleMarker! And you can create a direction arrow just by pointing to the previous waypoint.

一 A JavaScript Integrated Leaflet Map API

Leaflet-canvas-markers

Adding all images to one canvas, together with the base L.CircleMarker! And you can create a direction arrow just by pointing to the previous waypoint.

Demo

Live Demo >>

Base Usage

const map = L.map('map', {preferCanvas: true}).setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

L.canvasMarker(L.latLng(51.495, -0.06), {
    radius: 20,
    img: {
        url: 'icon.png',    //image link
        size: [40, 40],     //image size ( default [40, 40] )
        rotate: 10,         //image base rotate ( default 0 )
        offset: { x: 0, y: 0 }, //image offset ( default { x: 0, y: 0 } )
    },
}).addTo(map);

Direction Arrow

You can specify the previous point (prevLatlng: latlng). The picture will automatically show the direction of movement.

const map = L.map('map', {preferCanvas: true}).setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

L.canvasMarker(L.latLng(51.495, -0.06), {
    radius: 20,
    prevLatlng: L.latLng(51.503, -0.09),    //previous point
    img: {
        url: 'arrow.png',
        size: [40, 40],
        rotate: 0,
    },
}).addTo(map);

Options

Option	Type	Description
img	Object	Image properties
prevLatlng	LatLng	The coordinates of the previous point. If indicated - The image automatically shows the direction

Options img

Option	Type	Default	Description
url	String		Image link
size	Array	[40, 40]	Image size in map
rotate	Number	0	Image rotate in map
offset	Object	{ x: 0, y: 0 }	Image offset in Canvas

leaflet-canvas-markers's Issues

setting className and zIndexOffset

would be nice to be able to set className on either the image or the marker to be able to use css on it

currently both className and zIndexOffset dont do anything sadly

this._renderer._updateImg is not a function

I get this error:

this._renderer._updateImg is not a function

when set regular png image.

here is my code:

let map = L.map("map", {
  center: [0, 0],
  zoom: 5
});

new L.tileLayer("http://tiles.maps.sputnik.ru/{z}/{x}/{y}.png").addTo(map);

let marker = L.canvasMarker(L.latLng(0, 0), {
  radius: 20,
  img: {
    url: 'icon.png',
    // url: "https://cdn2.iconfinder.com/data/icons/wsd-map-markers-1/512/wsd_markers_45-512.png", //image link
    size: [40, 40], //image size ( default [40, 40] )
    rotate: 0, //image base rotate ( default 0 )
    offset: { x: 0, y: 0 } //image offset ( default { x: 0, y: 0 } )
  }
}).addTo(map);

and here is sandbox online project playground:
https://codesandbox.io/s/prod-moon-xvnj8

I can't run this plugin even on my local html-directory.
Do you have any idea what can be wrong?

How to find out if it is a instanceof L.canvasMarker?

Is there a way to check if the layer is instanceof L.canvasMarker?

e.target instanceof L.canvsMarker // returns false
e.target instanecof L.circleMarker //also returns false

Markers with svg icons do not show up on FireFox browser(81.0.2)

Canvas markers with svg icons are not showing up on FF 81.0.2, while they are working on other browsers, chrome and IE.
Changed svg to png and it works fine.
However, svg is mandatory because png has got pixel issues when the icon is rotated

Clicking on the image (not directly on the coordinates) does not work

When I use classic L.marker(... clicking is possible anywhere on the entire image (and not outside of it). When I use L.canvasMarker(... it behaves differently. Clicking is possible in a circle around the coordinate of the point (regardless of the location - e.g. rotation or offset - of the image) But for example, when the image is large and just to the right of the point coordinate, it is not possible to click anywhere in the area of this image.
My usage would be:

• I have two different points on almost identical coordinates
• for one I have an image on the left and for the other on the right
• by clicking on one or the other image, I can display a popup of the relevant point

Thanks for the responses or advice. And sorry for my bad english

zIndexOffset

Thanks for this awesome package - it's improved performance on my map significantly but I've lost the ability to sort markers using zIndexOffset. Is it possible for this to be added back?

marker popup "bound" is not correct if offset option is used

if I set offset other than {x: 0, y: 0} and have bindpopup on the marker, the "bounding box" of clickable area is not correct.

请问下怎么才能清空canvasmarkers啊

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

I'm trying to add a regular popup to marker but faced with such error:
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

L.canvasMarker(point.coordinates, {
                    radius: 20,
                    prevLatlng: point.prevLatlng,
                    img: {
                        url: point.img,
                        size: point.imgSize,
                        rotate: point.imgRotate || 0,
                    },
                }).bindPopup(point.coordinates).addTo(map);

iconAnchor

What exactly is the intended use of the offset: {x: 0, y: 0} property? wouldn't it be better to use iconAnchor: [0, 0] like when styling the icon with L.marker(... ? I've tried using offset with different values, and it works, but it's not very intuitive. But I came to problem when I combined offset with rotate - then the possibility of using offset is not very possible

Thanks for the responses or advice. And sorry for my bad english

Does it support Clustering?

Hi, I just wanted to check if there is clustering support?

Color of svg is discarded. How can I use svg with filled color?

I am using this canvas marker plugin to draw arrows with direction on canvas for better performance.
Everything works fine except that I am seeing the arrow marker as black even though my svg is red.

Here's my svg content for your reference.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172.5 172.4" style="enable-background:new 0 0 172.5 172.4;" xml:space="preserve">
<path d="M89.4,165.2l-20.9-61.2L7.3,83c-9.4-3.2-9.8-16.3-0.6-20.1l151-62.1c8.8-3.6,17.6,5.2,14,14l-62.1,150.9C105.7,174.9,92.6,174.5,89.4,165.2L89.4,165.2z" fill="red" />
</svg>

I am not sure how I can change the color from default black to red.
Thanks in advance!