Tuesday, October 08, 2013

Clustering (or any other Strategy) not working in OpenLayers

As promised, even if somewhat delayed, I am starting programming posts again. This time is about working with OpenLayers, a free wrapper over several Javascript mapping frameworks. The problem: after successfully creating and displaying a map and adding "features" to it (in this case a yellow circle for each physical location of a radio station), I wanted to add clustering; it didn't work. Quick solution: add the layer to the map BEFORE you add the features to the layer.

For the longer version, I have to first explain how OpenLayers operates. First order of business is creating an OpenLayers.Map object which receives the html element that will contain it and some options. To this map you add different layers, which represent streets, satellite imagery and so on. One can also add to any of these layers a number of features which will be displayed on the map. A common problem is that for many data points the map becomes cluttered with the rendering of these features, making for an ugly and slow interface. Enter "clustering" which means using a layer strategy of type OpenLayers.Strategy.Cluster to clump close features together into a larger one. It should be as easy as setting the layer 'strategies' array or adding to it an instance of a Cluster strategy. But for me it did not work at all.

After many attempts I finally realized that the clustering mechanism was dependent on the existence of an event handler for the 'beforefeaturesadded' event of the layer. Unfortunately for me and my time, this handler is only added when the layer is added to a Map! So all I had to do was to add the layer to the map before adding the features to it. Good thing that I recently shaved my head, or I would have tufts of bloody hair in my fists right now.