Leaflet Performance issues

Posted on Updated on

I’m really enjoying working with Leaflet at the moment, but this problem had plagued me for days, where all of a sudden, my performance levels dropped to almost nothing.

Basically I went from this:

this.globals.map.locate(
{ 
maxZoom: 111,
drawControl: true,
watch:true,
enableHighAccuracy:true
}).on('locationfound', (e) => {

this.locationdata = { "coords":{"latitude": e.latlng.lat, 
"longitude": e.latlng.lng,
"accuracy" : e.accuracy, 
"altitude" : e.altitude, 
"heading" : e.heading,
"speed" : e.speed,
"timestamp" : e.timestamp
}};

}

 

To this:

this.map.locate(
{
maxZoom: 111,
drawControl: true,
enableHighAccuracy:true
}).on('locationfound', (e) => {

this.locationdata = { "coords":{"latitude": e.latlng.lat,
"longitude": e.latlng.lng,
"accuracy" : e.accuracy,
"altitude" : e.altitude,
"heading" : e.heading,
"speed" : e.speed,
"timestamp" : e.timestamp
}};
}

 

What’s the difference you say?

” watch:true,”

Basically, if you have have this running like this, it will keep on checking the GPS signal in the background, and eventually cripple everything, because your phone device can’t keep up with the app. GPS time-outs will occur and things won’t complete. So, if you remove the watch:true statement, things will still work well, and you can call it every second, or every 10 seconds, or whatever your tracking needs are.

My full issue was that exponentially, the app was just slowing down to a complete halt and anything to do with the map would slow and stop working. It would begin fine, but within a few minutes, the app was unusable.

So, this is my (partial) solution. It should be enough to help you get by.

I’ve found it’s easier to do something like this:

this.subscr = Observable.interval(1000) 
.flatMap(() => this.getData())
.subscribe(data => { 
//console.log("App 1 second heartbeat"); 
// Call the GPS tracker bit
this.GetRealTimeLocationNow(); /// THIS FUNCTION INCLUDES THAT GPS METHOD
if(this.trackedRoute.length >0)
{
this.redrawPath(this.trackedRoute); 
}
});

 

So, after a couple of days thinking it was layer and mapping problems (with showing hiding markers or tracking lines and rewriting that entire part), and optimising the app even more, I think it’s pretty good now. This will be more or less confirmed over time though.

You can draw a tracking line like this too:

current_positionTrack: any [];


somefunction_etc()
{
// Show the current location on the map
if (this.current_positionTrack != undefined) 
{
 if(this.map)
  {
   this.map.removeLayer(this.current_positionTrack);
  } 
 }; 

this.current_positionTrack = leaflet.polyline(path, {color: 'red', weight: 1, opacity: 0.7, smoothFactor: 1});
this.map.addLayer(this.current_positionTrack); 
}

And even have a marker that stays on the screen on your location too, like this:

marker = null;


some_other_function_etc () //or whatever
{

// Probably should go after this in the GPS tracker bit:
// }).on('locationfound', (e) => {
// You'll figure it out.
 
 if (!this.marker) {
  this.marker = leaflet.marker(e.latlng).addTo(this.map);
 }

 if(e.latlng != null)
 {
  this.marker.setLatLng(e.latlng);
 }
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s