clavijojuan / leaflet-canvasicon

Canvas Icon plugin for Leaflet library

L.CanvasIcon

Canvas Icon plugin for Leaflet library.

Check out code and the example.

Usage

Simpliest way to use canvas icon is to pass drawIcon callback in the options:

var myIcon = L.canvasIcon({
    drawIcon: function (icon, type) {
        ... // drawing code here
    }
});

Or, you may extend L.CanvasIcon to implement all drawing logic inside it:

L.MyIcon = L.CanvasIcon({
    _setIconStyles: function (icon, type) {
        ... // drawing code here
        L.CanvasIcon.prototype._setIconStyles.apply(this, arguments); // do not forget this line, or icons positioning will break
    }
});

var anotherIcon = new L.MyIcon();

First argument of the callback will contain canvas DOM element, and second will contain string icon type descriptor ("icon" or "shadow").

Pass created icon in the marker options or set it on the already created marker:

var myLatlng = L.latLng(...);
var myMarker = L.marker(myLatlng, { icon: myIcon });

var anotherLatlng = L.latLng(...);
var anotherMarker = L.marker(anotherLatlng);
anotherMarker.setIcon(anotherIcon);