Question

I have problem optimizing drawing Google-like map. It works OK for hundreds of points, but when it comes to larger amounts like thousands it gets fuzzy and slow. Also unzoomed it looks weird.

I’d like to know how to optimize drawing algorithm to draw fewer places so it looks like unzooming on Google Maps.

However I also draw links between places, and I can’t optimize that.

Please, post anything you can think of, I have to finish this and send it tomorrow.

Here’s how it looks like:

zoomed in
zoomed out

Answer 1

I think I would be tempted to not draw lines that are shorter than a threshold (and I mean this in terms of the viewport, not absolute distance terms). That means that when the map is zoomed out, you will have less to draw and the map will look less busy and when the map is zoomed in the lines between these nearby points will become visible. Edit: actually, thinking about it some more, I think I would only apply this length restriction when there are a large number of lines on screen — or make the length threshold a function of the number of lines on screen.

I think I would also be tempted to not draw lines that are from points that are off screen (out of the viewport) or, at least, quite a way off screen (a threshold away from the viewport’s centre). I would suggest trying this change first.

These changes may seem like they will be hiding information (and they will) but, as it stands, the map is so busy this information presented is near useless anyway.