6

In my app at the moment, a 'grid' is drawn onto the map by drawing each polygon square one by one, and filling it with a color. I then add the polygon object to a map to modify later if I need to.

I only create each polygon once, however there is a major consistent 'lag' and low frame rate with the more I add (tens of thousands potentially), eventually breaking the app.

Here is the current part of code that creates and adds each 'Square' to a hashmap.

double latScale = 0.000180;
double lngScale = 0.000288;

PolygonOptions po = new PolygonOptions()
        .add(   new LatLng(lat, lng),
                new LatLng(lat, lng + lngScale),
                new LatLng(lat - latScale, lng + lngScale),
                new LatLng(lat - latScale, lng))
        .strokeWidth(3f)
        .strokeColor(Color.argb(220, 0, 0, 0));

if (colors.containsKey(color)){
    po.fillColor(colors.get(color));
}
else{
    po.fillColor(colors.get("default"));
}

gridSquares.put(square_id, mMap.addPolygon(po));

My question is, what exactly is causing it to lag so much (I realize it must be the sheer amount, but I need specifics, re drawing every frame? memory?) And how could I fulfill my need for this giant grid overlay in some way which doesn't lag so much. Either with my current line of thinking or a new way.

If any more clarification is needed please ask.

Sam
  • 454
  • 4
  • 18
  • 3
    This is drawing issues, rendering 10k+ every frame is what causing the lag. Only draw something you can see on the screen. – Rod_Algonquin Jan 31 '17 at 17:22
  • @Rod_Algonquin What should I do if I want/need to have a grid with potentially 10k+ squares on? – Sam Jan 31 '17 at 17:26
  • Then you can group/cluster them and once you zoom in you draw the whole thing you can see. – Rod_Algonquin Jan 31 '17 at 17:28
  • @Rod_Algonquin By group/cluster do you mean something like draw 1 polygon to represent 4/16/64 squares of the grid etc? I could also lock the max zoom out as to not have to draw too many at a time. Thank you for the answer! Is there another method that you could think of that would allow for the larger approach? – Sam Jan 31 '17 at 17:32

2 Answers2

3

What I ended up doing which worked really well was

  1. Using GroundOverlay in google maps for each polygon I needed, using a small resolution image (30x30, however if you only need one color this could be 1x1) for each polygon instead of drawing each. This improved performance a ton.

  2. Call OnCameraIdleListener to set each GroundOverlay to either visible or invisible depending on whether it was in view of the screen at that point. I ended up using a small buffer zone around the screen to make overlays visible in this area also.

Sam
  • 454
  • 4
  • 18
  • Tile Overlays are designed precisely for this purpose - extensive imagery. GroundOverlay is much better than Polygon but still laggy. It's completely smooth like Google Maps app with Tile Overlays though – ericn Jun 21 '20 at 20:51
  • 1
    I had to quickly look at some documentation to remember why I didn't use tile overlay 3 years ago when asking this question. It wasn't fit for my purpose because tile overlay uses different images depending on zoom size to cover larger or smaller areas. Each of my squares changed dynamically to 1 of 4 states. So i would have to have a copy of every configuration for every zoom level. (256 images for every 2x2 square, 262144 images for every 3x3 square) Whereas ground overlay are single images which zoom in and out, changing the size of the original image. So I only needed 4 images total. – Sam Jun 21 '20 at 21:06
1

I think you should start with custom tile provider.

I wrote something like that based on this post:

Google Maps API v2 draw part of circle on MapFragment

With such approach displaying about 1000 polylines on map is smooth.

Community
  • 1
  • 1
RadekJ
  • 2,835
  • 1
  • 19
  • 25