As we have seen in the chapter's introduction, the behavior of vector layers is determined by the strategies we attach to them.
Imagine a scenario where we want to show all the museums in every city around the world. What will happen when the user navigates within the map and sets a zoom level to see the whole world? We simply see a cloud of points, all at the same place.
The solution to this problem is to cluster the features on each zoom level.
This recipe shows how easy it is to use the cluster strategy on a vector layer, which is responsible for clustering the features to avoid a situation similar to the one we just mentioned.
- Create an HTML file and insert the following code in it:
<!-- Map DOM element --> <div id="ch3_cluster" style="width: 100%; height: 100%;"></div> <!-- The magic comes here --> <script type="text/javascript"> // Create the map using the specified DOM element var map = new OpenLayers.Map("ch3_cluster"); layer = new OpenLayers.Layer.OSM("OpenStreetMap"); map.addLayer(layer); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.setCenter(new OpenLayers.LonLat(0,0), 2); - As you can see the vector layer is using two strategies:
// World Cities var citiesLayer = new OpenLayers.Layer.Vector("World Cities (GeoJSON)", { protocol: new OpenLayers.Protocol.HTTP({ url: "http://localhost:8080/ openlayers-cookbook/recipes/data/world_cities.json", format: new OpenLayers.Format.GeoJSON() }), strategies: [ new OpenLayers.Strategy.Fixed(), new OpenLayers.Strategy.Cluster({distance: 15}) ] }); map.addLayer(citiesLayer); </script>
A vector layer can have more than one strategy associated with it. In this recipe we have added the OpenLayers.Strategy.Fixed strategy, which loads the layer content only once, and the OpenLayers.Strategy.Cluster strategy, which automatically clusters the features to avoid an ugly cloud of features caused by overlapping:
strategies: [
new OpenLayers.Strategy.Fixed(),
new OpenLayers.Strategy.Cluster({distance: 15})
]Every time we change the zoom level, the cluster strategy computes the distance among all features and adds all the features that conform to some parameters of the same cluster.
The main parameters we can use to control the behavior of the cluster strategy are as follows:
distance: The distance in pixels between features to be considered that they are in the same cluster. By default it is set to 20 pixels.threshold: If the number of features in a cluster is less than the threshold, then they will be added directly to the layer instead of the cluster
OpenLayers has a set of basic but very common strategies that we can combine in vector layers:
We encourage those more advanced JavaScript readers, to take a close look at the OpenLayers source code and learn more about how strategies work.