Delay when moving on the map

[AlanThouvenin]

When using this lib, I noticed that there was a systematic delay when moving on the map:

• On drag start, the particles stop moving
• On drag end, the particles jump to the position, still not moving
• There is a delay after which the particles go back to their original place and restart moving
  This can be experienced in the demo.

I noticed the few lines that are responsible for this behavior, at the end of onDrawLayer (L.VelocityLayer.js):

    this._timer = setTimeout(function() {
      self._startWindy();
    }, 750); // showing velocity is delayed

The 750ms delay is actually intended. By removing it, there is no delay anymore and no other problem seems to appear.
Was there a specific reason for introducing this delay?

[Luska066]

import React, { useEffect, useRef } from 'react';
import { useMap } from 'react-leaflet';
import L from 'leaflet';

interface WindPoint {
lat: number;
lng: number;
u: number;
v: number;
c: string;
}

const WindCanvasLayer = ({ data }: { data: WindPoint[] }) => {
const map = useMap();
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const animationRef = useRef();
const particles = useRef<any[]>([]);

useEffect(() => {
    const container = map.getPanes().overlayPane;
    const canvas = L.DomUtil.create('canvas', 'leaflet-wind-layer') as HTMLCanvasElement;
    canvas.style.position = 'absolute';
    canvas.style.top = '0';
    canvas.style.left = '0';
    canvas.style.pointerEvents = 'none';
    container.appendChild(canvas);
    canvasRef.current = canvas;

    // 1. Inicializa as partículas com "vida" e posição
    const initParticles = () => {
        particles.current = data.map(p => ({
            x: p.lng,
            y: p.lat,
            originLng: p.lng,
            originLat: p.lat,
            u: p.u,
            v: p.v,
            color: p.c,
            age: Math.floor(Math.random() * 50), // Começa em tempos diferentes
            maxAge: 30 + Math.floor(Math.random() * 30)
        }));
    };

    const updateSize = () => {
        const size = map.getSize();
        canvas.width = size.x;
        canvas.height = size.y;
        const topLeft = map.containerPointToLayerPoint([0, 0]);
        L.DomUtil.setPosition(canvas, topLeft);
    };

    const animate = () => {
        const ctx = canvas.getContext('2d');
        if (!ctx) return;

        // 2. Efeito de Rastro (O segredo da animação)
        // Em vez de clearRect, usamos um preenchimento semi-transparente
        ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'; // Fundo do mapa é claro? Use branco.
        ctx.globalCompositeOperation = 'destination-in';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.globalCompositeOperation = 'source-over';

        const zoom = map.getZoom();
        // Fator de movimento: ajusta conforme o zoom para não "voar"
        const f = 0.00005 * Math.pow(2, 10 - zoom);

        particles.current.forEach(p => {
            if (p.age >= p.maxAge) {
                p.x = p.originLng;
                p.y = p.originLat;
                p.age = 0;
            }

            // Ponto A (Atual)
            const adp = map.latLngToContainerPoint([p.y, p.x]);

            // Atualiza posição geográfica baseada no vento (U, V)
            p.x += p.u * f;
            p.y += p.v * f;

            // Ponto B (Novo)
            const bdp = map.latLngToContainerPoint([p.y, p.x]);

            // 3. Desenha a linha de movimento
            ctx.beginPath();
            ctx.strokeStyle = p.color;
            ctx.lineWidth = 1.5;
            ctx.lineCap = 'round';
            ctx.moveTo(adp.x, adp.y);
            ctx.lineTo(bdp.x, bdp.y);
            ctx.stroke();

            p.age++;
        });

        animationRef.current = requestAnimationFrame(animate);
    };

    initParticles();
    updateSize();
    animate();

    map.on('move moveend resize', updateSize);

    return () => {
        if (animationRef.current) cancelAnimationFrame(animationRef.current);
        map.off('move moveend resize', updateSize);
        if (container.contains(canvas)) container.removeChild(canvas);
    };
}, [data, map]);

return null;

};

export default WindCanvasLayer;

mock data = [{"lat": -39.4812, "lng": -65.9783, "u": 24.7, "v": 0.37, "c": "#F6E322"},]

 <MapContainer
                        center={[lat,long]}
                        zoomAnimation={true}
                        fadeAnimation={true}
                        markerZoomAnimation={true}
                        zoom={7}
                        style={{ height: '100%', width: '100%' }}
                    >
                        <TileLayer url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png" />

                        <WindCanvasLayer data={mockData} />

                    </MapContainer>

you can use my drawer