Attempting to incorporate a Canvas layer on top of a Bing TileLayer using the provided extensions. Furthermore, I aim to animate the canvas drawing utilizing RequestAnimationFrame.
The complication arises when dragging as the point moves further than intended (refer to video). However, upon completion of the movement, it reverts to the correct position.
https://i.sstatic.net/auZqX.gif
I have experimented with various methods, including inheriting CanvasLayer and overriding render() or setting a delegate, but the outcome remains consistent.
Below is the relevant segment of the code:
// layer creation (TypeScript)
this.mapCanvasLayer = new L.CanvasLayer();
this.mapCanvasLayer.delegate(this).addTo(map);
// L.canvasLayer()
// .delegate(this) // -- if we do not inherit from L.CanvasLayer we can setup a delegate to receive events from L.CanvasLayer
// .addTo(map);
// drawing and animation (TypeScript)
public onDrawLayer(info) {
// quick test, this just draws a red dot that blinks
this.info = info;
var data = [[0,0]];
var ctx = info.canvas.getContext('2d');
ctx.clearRect(0, 0, info.canvas.width, info.canvas.height);
ctx.fillStyle = "rgba(255,0,0," + this.i/10 + ")";
for (var i = 0; i < data.length; i++) {
var d = data[i];
if (info.bounds.contains([d[0], d[1]])) {
var dot = info.layer._map.latLngToContainerPoint([d[0], d[1]]);
ctx.beginPath();
ctx.arc(dot.x, dot.y, 3, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
}
};
public animate() {
// make the point blink
if (this.up) {
this.i++;
if (this.i >= 10) this.up = false;
}
else
{
this.i--;
if (this.i <= 1) this.up = true;
}
// animate:
this.mapCanvasLayer.drawLayer();
window.requestAnimationFrame(this.animate.bind(this));
}
Attempted Extensions:
- gLayers.Leaflet // example is this one
- Leaflet.CanvasLayer
Yet to be Tested:
It seems likely that the issue lies within either the dragging event or the coordinate translations (latLngToContainerPoint) not being handled correctly, although the reason is unclear.
In the available samples for the Leaflet.CanvasLayer, dragging an animated map appears to function properly.
Any insights into what may be wrong with this code? Thank you for your assistance!
Edit
Refer to comments: updated the call as follows:
// var dot = info.layer._map.latLngToContainerPoint([d[0], d[1]]);
var dot = info.layer._map.latLngToLayerPoint([d[0], d[1]]);
The point now moves accurately. Nevertheless, upon releasing the button, it shifts to a position relative to the container, meaning it maintains the same distance from the window borders but features incorrect coordinates (misplaced on the map).
If I implement the following:
public onDrawLayer(info) {
this.info = info;
var ctx = info.canvas.getContext('2d');
ctx.clearRect(0, 0, info.canvas.width, info.canvas.height);
const fillStyleLayer = "rgba(255,0,0,1)"; // red: layer
const fillStyleContainer = "rgba(0,0,255,1)"; // blue: container
var layerPoint = info.layer._map.latLngToLayerPoint([0,0]);
var containerPoint = info.layer._map.latLngToContainerPoint([0,0]);
// this.dot = (this.dragging)
// ? info.layer._map.latLngToLayerPoint([0,0]);
// : info.layer._map.latLngToContainerPoint([0,0]);
ctx.fillStyle = fillStyleLayer;
ctx.beginPath();
ctx.arc(layerPoint.x, layerPoint.y, 3, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
ctx.fillStyle = fillStyleContainer;
ctx.beginPath();
ctx.arc(containerPoint.x, containerPoint.y, 3, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
};
public animate() {
this.mapCanvasLayer.drawLayer();
window.requestAnimationFrame(this.animate.bind(this));
}
The layer point (red) moves appropriately during panning but then shifts to an incorrect location. The container point (blue) moves excessively during panning but eventually returns to the correct position... :(