In my app I'm drawing a polyline for every location change while I'm trekking around. This may be for an 8 hour backpacking hike so I may potentially have tens of thousands of points to plot.
In my testing, I've noticed that when I'm zoomed in fairly close (say 17 or 18), it works great even after plotting thousands of lines, but as I zoom out and the map has to render ALL of those lines, it gets sluggish as my phone is trying to process everything.
The other option that I know of to draw polylines is to create a collection (ArrayList) of all of my points (LatLng) and pass that in to the setPoints() method of the PolyLine which draws a single line. This obviously works great when reviewing the trek after the fact, but I'd imagine the internals of setPoints() has to loop over the entire set for every new point that is added to draw that one line which ultimately is probably worse performance wise because it has to do that whether the older points are visible (within the viewport) or not.
Is there something in between? A polyline.addPoint() method would be perfect, but I can't find anything like that... Right now as a stop-gap, I've just made my polylines visibility toggleable so that I can hide them when I zoom far out and need to move the map around, as I said, when I'm zoomed in closely, it's not a problem because it only has to render a fairly small subset.
any ideas/suggestions are greatly appreciated.
TIA
This is what I came up with as a solution. It may not be the most elegant, but I just drove around for over 40 miles in my car and when I zoomed out, I had no lag whatsoever. I also feel that by only creating the one big line every 100 points (roughly every 100 seconds since my location listener only fires every second), I'm saving the processing of having to loop my latlng array for every location change. Now I just need to test this on a real trek :)
// create and add new poly line to map from previos location to new location
PolylineOptions lineOptions = new PolylineOptions()
.add(new LatLng(previousLocation.getLatitude(), previousLocation.getLongitude()))
.add(new LatLng(location.getLatitude(), location.getLongitude()))
.color(Color.GREEN)
.width(5);
// add the polyline to the map
Polyline polyline = map.addPolyline(lineOptions);
// set the zindex so that the poly line stays on top of my tile overlays
polyline.setZIndex(1000);
// add the poly line to the array so they can all be removed if necessary
polylines.add(polyline);
// add the latlng from this point to the array
allLatLngs.add(currentLocationLatLng);
// check if the positions added is a multiple of 100, if so, redraw all of the polylines as one line (this helps with rendering the map when there are thousands of points)
if(allLatLngs.size() % 100 == 0) {
// first remove all of the existing polylines
for(Polyline pline : polylines) {
pline.remove();
}
// create one new large polyline
Polyline routeSoFar = map.addPolyline(new PolylineOptions().color(Color.GREEN).width(5));
// draw the polyline for the route so far
routeSoFar.setPoints(allLatLngs);
// set the zindex so that the poly line stays on top of my tile overlays
routeSoFar.setZIndex(1000);
// clear the polylines array
polylines.clear();
// add the new poly line as the first element in the polylines array
polylines.add(routeSoFar);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With