Large number of markers on google maps - Oleg Pidsadnyi¶

Tags: pygrunn, python

He had to show lots of markers on a google map, which often led to bad performance. And he wanted real-time updates. And… the client needs to be responsive!

A marker is a DOM element, but also a shadow, a click area, an icon image and so on. Which takes a lot of memory and rendering it takes lots of CPU.

How to optimize? One option is to reuse an existing marker image if they are the same. If they are different, using an image sprite helps a lot. You have to set offsets and sizes on the markers to get the sprite to work.

The lazy way to draw lots of markers is to just draw all of them, regardless of the viewpoint. Most of them will probably not even be visible… Looping over so many DOM elements is slow.

There are some weapons you can use to speed it up: the idle (zooming/panning is done) and zoom_changed google map events. For this, underscore.js helps with functions like defer and with handy collection types. Similarly backbone.js helps maintaining collections and binding them to events and to an API on the server.

Backbone trick. Backbone has no real handy way to remove items from a collection that are old, you can only add or reset a collection completely. He did it by adding a version number to the data he fetched from the server. If, after an update, items have a lower version number, they’re old and you can delete them. This way he could refresh a backbone collection without needing to zap it first and rebuilding it from scratch.

Now, what about the webserver? It should be simple, fast and scalable for his usecase. He went for tornado. Tornado is quick. And it simplifies asynchonous code.

The database should be JSON friendly, support geo queries and it should have an async Python binding. MongoDB has it. You can do queries like {'loc': {'$within': {'$box': box}, }}. For the Python binding he used pymongo.

He used google’s fusion tables for zoomed out levels: they group markers together so that you only see an indication of the number of items instead of showing all the markers. (Reinout: but somehow he didn’t do this, at least I didn’t see it in his demo. I probably misunderstood something.)