Watch our real-time support map

“I want a dot on this map” is basically what our CEO Mikkel Svane said when he challenged the engineering team to come up with a way to have support ticket updates show up on a world map, in real time. With more than 70 million users registered in Zendesk, we see a daily volume of more than 1 million ticket updates from around the world. We thought it would be really fascinating to visualize this activity on a world map.

These are just the kind of challenges I love to take on: the ones that give me a chance to play with some of the hottest new web technologies available.

And this challenge especially gave me the chance to do just that. One weekend was solely devoted to researching and building prototypes, which put me in touch with WebSockets, node.js, socket.io, redis, and geo location. Most web developers would agree that this is a very interesting list of technologies.

Geo Location
We had a pretty good spot in our code to add geo location, as we are already recording the IP-addresses of the people touching support tickets in our system. Because we process a lot of tickets at Zendesk, I needed to find a geo location solution that would keep up with our traffic.

I spent quite some time trying out the different geo location services out there and decided to go with MaxMind’s GeoIP solution, as it allowed me to do the geo location locally, without calling out to any web services. I benchmarked it to be able to do several thousand lookups per second on my laptop, which is well above what I needed.

Real-Time Data
Next it was time for me to settle on a tool to push real-time data to the browser. Pushing real-time data to a browser has traditionally been done using Flash, but newer browsers implement the WebSocket API, which was built specifically for this task.

On the server side, a number of frameworks have recently added support for WebSockets. The hottest of these is node.js with the socket.io library, where you can build high performance HTTP and WebSocket applications in just a few lines of server side JavaScript code.

Geo Coordinates
Now all I needed was some way to get the geo coordinates from our Ruby on Rails-based application into the node.js application I was building. For its simplicity and performance, I chose Redis. It has great clients in both Ruby and JavaScript that support the Publish/Subscribe protocol, and we were already using Redis servers in our application stack. A couple of lines of ruby was needed to push geo coordinates from our web application to redis, and another 35 lines of node.js was enough to push these events to the browser.

Pretty cool if you ask me.

Google Maps
To visualize this data on a map, I turned to Google Maps, as I knew that it already had a great JavaScript API for adding markers and overlays. The only extra work I had to do was to limit the number of markers on the map to prevent the browser from running out of memory. We are currently showing a maximum of 100 markers on the map and reusing the old markers whenever we need to add a new one. This allows you to view the map for hours without killing your browser.

Zendesk allows you to update tickets in a number of ways and not all of them are easy to geo locate. Email, for example, very seldom contains accurate IP addresses of the computer that composed and sent the message. In a lot of cases, we are simply not able to provide any information about the origin of the user. In fact, we are currently only able to geo locate around 30% of all our ticket activity.

I was pretty surprised when I first saw the map, as it was showing hot spots in strange places. It turns out that these hot spots are the locations of popular proxy servers that hide information about the user. There are large groups of people, even whole countries, that tunnel all traffic through these proxy servers.

So there you have it, a live map of ticket activity at Zendesk.