A common problem that most maps developers run into sooner or later is that they need to add a large number of markers to a map. There are a few problems related to this. The first problem that becomes painfully apparent as soon as you start adding a lot of markers is that the performance of the map quickly degrades. A second big problem is with the usability of the map. It can be hard to make sense of a map that is crammed with markers.
In the first part of this chapter, I will discuss different approaches for dealing with these problems.
In the second part, you will do some coding using third-party libraries.
Too Many Markers?
First of all the question is, how many markers are too many? Well, that depends on several things.
First, there’s the performance issue. The more markers you add, the slower the map will be. Exactly at what point the number of markers makes the map too slow is hard to say since it depends on which browser is used to view the map and on the speed of the computer being used. A map that performs really fast in Google Chrome could, for example, be painfully slow in Internet Explorer.
Another issue is the usability aspect. The more markers you use, the harder it is for the user to make sense of them and find the relevant ones (see Figures 9-1 and 9-2). The ideal number depends on different factors. For example, are the markers positioned very close to each other, or are they scattered over a larger area? If they are scattered over a large area, you can probably get away with using a lot more markers than if they are close together.
CHAPTER 9 ■ DEALING WITH MASSIVE NUMBERS OF MARKERS
Figure 9-1. Ten markers is no problem, but even when we increase the number to 50, there's a risk of overlap.
Figure 9-2. Probably 100 markers is really unusable...not to mention 1,000 markers.
Generally speaking, if you’re using fewer than 100 markers, you rarely have a problem. But if you have more, you have to ask yourself these questions:
• Is the map slow?
• Is it hard to get an overview of the map because of all markers?
• Is it hard to make sense of the data being shown on the map?
If the answer is no to all of these questions, you probably don’t have a problem. But if the answer is yes to any of them, you probably have to think about how to improve the way you’re visualizing the data.
Reducing the Number of Markers Being Displayed
One obvious way of to get around this problem is to not display all the markers all the time. Before getting into how to code actual solutions to this problem, I’ll explain some possible approaches for reducing the number of markers being shown. Since v3 is still in beta at the time of writing this book, I’ve had problems finding relevant examples implemented with v3. So, the examples shown here are implemented using Google Maps API v2. These concepts can, however, just as well be implemented using v3. Also, since most of these solutions involve server-side coding, which is beyond the scope of this book, I’m not going to get into how to actually implement them. Let these first examples just serve as inspiration for how you can approach the too-many-markers problem.
Searching
One way of reducing the number of markers being displayed is to provide a search function. This way, even if you have thousands of locations, only the ones that match the search criteria are visible. One example of this is the search function in Google Maps. If you search for Starbucks, it will only display the Starbucks available in the visible map (see Figure 9-3).
Figure 9-3. maps.google.com features a search function that searches the visible map and adds markers of the locations found.
CHAPTER 9 ■ DEALING WITH MASSIVE NUMBERS OF MARKERS
Also notice that the markers are displayed with labels that correspond to the search result to the left of the map. This is a great way to enhance the maps usability since it makes it possible to understand which marker is which.
Filtering
Another way of reducing the number of markers displayed on the map is by offering a filtering function. STF (which is a Swedish Tourist Association with more than 400 hostels, mountain stations, and alpine huts) offers a map where you can find all of their accommodations as well as other things to see and do (see Figure 9-4). To make the map easier to use, they provide a filter function with which you can filter the map. This is done by marking options in the filter area to the left of the map.
Figure 9-4. STF offers a map that enables you to filter what is shown on the map by marking items in the filter area to the left of the map. The map is found at http://tinyurl.com/36ug6jw.
STF is also utilizing another great way of increasing the usability of the map, and that is by having different marker icons for different types of locations. This technique alone makes scanning the map a lot easier.
Don’t Always Use Markers
This might sound like a no-brainer, but sometimes we get so focused on using markers for everything that we forget that we have other tools at our disposal. Don’t forget that we also have polylines and polygons in our toolbox. If the thing you want to mark in the map is a road stretch or an area, use polylines or polygons instead. They are much better suited for the job.
Clustering
A common solution for handling the lots-of-markers-problem is to cluster them. What this means is that instead of displaying each individual marker at each time, clusters of markers are displayed.
When you zoom in on a cluster, it will break up into smaller clusters or in individual markers.
Using a cluster will significantly increase the performance of the map as well as making it easier to understand (see Figure 9-5).
Figure 9-5. The difference between displaying 1,000 markers on a small map and using clusters to do it
Grid-Based Clustering
Grid-based clustering is probably the most common approach for clustering markers. It will divide the map into a grid and group all markers within each square into a cluster. Although an efficient
technique, it has some obvious limitations since it can lead to unwanted results. Two markers that are really close together but in separate squares will, for example, not be grouped into the same cluster.
See Figure 9-6.