CODEWITHSUNDEEP
javascriptjqueryleaflet
Vince Lowe
Vince Lowe

Reputation: 3630

How to slow this animation down with javascript

I am adding a polyline to a map and using a polyline Decorator plugin to add a direction of travel arrow to the polyline. Then with setInterval moving the arrow along the polyline using a simple count increment as the percentage of offset.

The issue is the further i zoom in (anything more than zoom level 13) the arrow speed is way too fast. can you suggest a way to slow it down?

some variables to play with are:

map.getZoom() to change speed based on zoom level?

polyArray.length to change speed based on length of polyline maybe?

See fiddle here: http://jsfiddle.net/KSv2h/

and my full function below

// add map polylines
function addPolyline(polyArray, colour) {
    console.log(polyArray.length);
    polyline = L.polyline(polyArray, {color: colour});
    var arrowHead = L.polylineDecorator(polyline).addTo(mylayergroup);
    var arrowOffset = 0;
    var anim = window.setInterval(function() {
        arrowHead.setPatterns([
                {offset: arrowOffset+'%', repeat: 0, symbol: new L.Symbol.ArrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
        ])
        if(++arrowOffset > 100)
            arrowOffset = 0;

    }, 100);
    mylayergroup.addLayer(polyline).addTo(map);
}

any help much appreciated.

Upvotes: 1

Views: 793

Answers (2)

Vince Lowe
Vince Lowe

Reputation: 3630

This seems to be doing the trick, needs some fine tuning.. thanks

// add map polylines
function addPolyline(polyArray, colour) {
    console.log(polyArray.length);
    polyline = L.polyline(polyArray, {color: colour});
    var arrowHead = L.polylineDecorator(polyline).addTo(mylayergroup);
    var arrowOffset = 0;
var anim = function(){   
    if(map.getZoom() < 15 ) { 
        arrowHead.setPatterns([
            {offset: arrowOffset+'%', repeat: 0, symbol: new L.Symbol.ArrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
        ])
        if(++arrowOffset > 100)
            arrowOffset = 0;        
        if(map.getZoom() <= 12) {
            setTimeout(anim, 100);
        } else if (map.getZoom() == 13) { 
            setTimeout(anim, 200);
        } else if (map.getZoom() == 14 ) { 
            setTimeout(anim, 300);
        }
    } else {
        arrowHead.setPatterns([
            {offset: 0, repeat: 100, symbol: new L.Symbol.ArrowHead({pixelSize: 10, polygon: false, pathOptions: {stroke: true}})}
        ])      
    }
}
anim();
    mylayergroup.addLayer(polyline);
}

Upvotes: 0

Roman Holzner
Roman Holzner

Reputation: 5928

    // add map polylines
function addPolyline(polyArray, colour) {
    console.log(polyArray.length);
    polyline = L.polyline(polyArray, {color: colour});
    var arrowHead = L.polylineDecorator(polyline).addTo(mylayergroup);
    var arrowOffset = 0;
    var anim = window.setInterval(function() {
        arrowHead.setPatterns([
                {offset: arrowOffset+'%', repeat: 0, symbol: new L.Symbol.ArrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
        ])
        if(++arrowOffset > 100)
            arrowOffset = 0;

    }, 1000); /* HERE 1000 INSTEAD OF 100 */
    mylayergroup.addLayer(polyline).addTo(map);
}

Works very fine for me, the speed is slow, even if you zoom in. It is logical that it appears to be a way faster than zoomed out. Or did I not understand your problem, Greets

Upvotes: 2

Related Questions