CODEWITHSUNDEEP
javascriptleaflet
Atul Kumar
Atul Kumar

Reputation: 187

Leaflet - draw on separate canvas overlay

The example of markerPin is taken from here which is intended to be drawn on a separate canvas overlay.

By default it is drawn on the canvas created in the leaflet library. I want to create this given example on a new canvas where the drawing is updated accordingly on zoom or on pan. I need help with how to approach this problem.

I tried the approach of extending layer from the example here, but it does not work, and I am not sure of how to approach it.

Fiddle to this, https://jsfiddle.net/vyz07113/qcy7oevs/41/

My canvas overlay approach,

var customlayer = L.Layer.extend({
initialize: function (options) {
    this._map = mymap;
    this._canvas = null;
    this._frame = null;
    this._delegate = null;
    L.setOptions(this, options);
    this.onAdd();
},
onAdd: function(){
    this._canvas = L.DomUtil.create('canvas', 'leaflet-layer custom');
    var size = this._map.getSize();
    this._canvas.width = size.x;
    this._canvas.height = size.y;
    this._map._panes.overlayPane.appendChild(this._canvas);
}});new customlayer();

I need help with,
1. Redraw when any event is triggered
2. Prevent canvas to pan with the map and update the drawing accordingly

Upvotes: 1

Views: 4312

Answers (1)

Ludi
Ludi

Reputation: 463

I would create a seperate Leafet Canvas Renderer just for these markers:

mymap.createPane("customPane");
var canvasRenderer = L.canvas({pane:"customPane"});
var marker = new L.marker([0,0],{renderer:canvasRenderer});

https://leafletjs.com/reference-1.6.0.html#canvas

EDIT: The working fiddle here (updated)

Upvotes: 3

Related Questions