Is there a better way???
I am adding several tracks to a map (using leaflet-gpx plugin) and want to fit the maps to the bounds of all the added tracks.
By using a featureGroup layer to contain the tracks it is possible to used the fitBounds() method using the feature group. However the featureGroup does not have a loaded event to trigger the fitBounds() and the map also doesn't seem to have a suitable trigger.
Calling fitBounds() directly on the map after it is rendered fails with 'invalid bounds' error. However delaying the call for about a second allows it to execute correctly.
I presume what is happening is that it takes time for all of the gpx layers in the group to be loaded and until that is complete the group can't return a valid set of bounds.
So using a setTimeout to delay the fitBounds() works, but causes some annoying flashing as the map re-renders itself. Is there a better way?
This works:
// mapname has been created and tracks have already been loaded into their individual layers
var tracksLayer = L.featureGroup([track1,track2,track3]);
tracksLayer.addTo(mapname);
//this works, with more and complex tracks you might need a longer timeout
setTimeout(function(){ mapname.fitBounds(tracksLayer.getBounds()); }, 1000);
// this however does not work
// mapname.on('load', function() { mapname.fitBounds(tracksLayer.getBounds());});
//nor does this despite the fact that by this stage the map has been created and the featureGroup added
// mapname.fitBounds(tracksLayer.getBounds());