Styling clustered features

When working with lots of feature points, it is common to use the cluster strategy to avoid overlapping of points and improve the rendering performance.

In this recipe we are going to show how easy it is to style a vector layer using a cluster strategy:

Our layer vector will read a GeoJSON file with some cities of the world. The style will have the following characteristics:

• For each cluster we will show the number of contained features

• The point radius and border will depend on the number of contained features, the more features within it, the greater the radius will be

How to do it...

1. Start adding the div element for the map:

   <div id="ch07_cluster_number_style" style="width: 100%; height: 95%;"></div>

2. Instantiate an OpenLayers.Map instance:

   <script type="text/javascript">
       // Create the map using the specified DOM element
       var map = new OpenLayers.Map("ch07_cluster_number_style");

3. Add OpenStreetMap as the base layer and center the viewport:

      ...