18.07.2007

The Million Marker Map

For the past year, my friend Jason Williams and I have been working on a restaurant mapping site for New York City called Eatmaps.

One challenge we've faced is finding a way to display the 27,000 restaurants in New York without writing our own mapping engine from scratch. Current JavaScript maps from Google or Yahoo become noticeably pokey with just a few hundred markers on them, and effectively unusable once the number exceeds a thousand. The solution we've come up with is a kind of forced marriage between Flash 9 and the Google maps API that we're releasing today as a standalone component called the Million Marker Map.

The map is just a technology demo at present: it's brittle, buggy and only works on Firefox and Safari. However, it demonstrates three features of the upcoming Eatmaps site that I hope other map developers will find interesting and worth hacking on:

• Support for large data sets. The map works fine with over a million markers, although there's no way right now to load that much data in efficiently.

• Support for vector overlays. Both Google and Yahoo allow you to serve custom tile layers, but there are cases where you want to draw (and interact) with more dynamic objects (like ads, heaven help us). As an example, we're including an overlay of the New York City subway system, still inexplicably missing from Google and Yahoo maps despite the fact that it is the year 2007.

• A way to 'spraypaint' regions of interest on a map. For example, you might only be interested in places along a certain street, or convenient to your commute, or within a couple of blocks of the water. Current maps only let you limit your search by specifying a center point and radius.

Jason and I will release the Flash code for this map component under an open source license once the Eatmaps site is complete, and we would be especially glad to hear from collaborators who want to put it on a more solid footing.