CODEWITHSUNDEEP
javascriptleaflet
Baptiste
Baptiste

Reputation: 1785

Leaflet polyline performance issue

I'm currently working with Leaflet 1.0.3 and here is my problem. I have a lot of GPS position which are displayed on my map.

I have a for loop where I create a circle marker on each position :

var position = new L.latLng(lat, lng);
coordinates.push(position);

L.circle([lat, lng], 50, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
    }).addTo(map).bindPopup(date.replace('T',' '));

With thousand of position, no performance problem, it's fast. But when I use polyline into the same loop between two circle like this :

var polyline = new L.Polyline(coordinates, {
    color: 'red',
    weight: 3,
    opacity: 0.5,
    smoothFactor: 5
    });
polyline.addTo(map);

The performance decrease and it's really slow. The main problem is that sometimes there is no position between a range of time, so I need to draw a polyline to have something more visual, and no gape.

Is there any way to solve this issue ? Thanks !

Upvotes: 2

Views: 1895

Answers (1)

YaFred
YaFred

Reputation: 10008

Drawing the polyline should not be in the loop but after the loop. The way I understand the question, you are drawing the polyline again and again while it is expanding.

If you want it in the loop, you must draw between the 2 last positions (of the array) only.

Upvotes: 2

Related Questions