OpenLayers, nice marker clustering

Question

Do you know how to have a nice clustering in OpenLayers such as this google example ?

Answer 1

Use OpenLayers.Strategy.Cluster for clustering.

• Example Code
• Working Example
• Custom Styling
• In-depth Explanation

Answer 2

you can do this with as igorti has said. the soltion is using OpenLayers.Strategy.Cluster class and styling your layer with OpenLayers.Style class...

for styling :

var pointStyle = new OpenLayers.Style({
'default': new OpenLayers.Style({
'pointRadius': '${radius}',
'externalGraphic': '${getgraph}'
....
},{
context:{
radius: function(feature){
    return Math.min(feature.attributes.count,7)+3;
},{
getgraph : function(feature){
    return 'ol/img/googlelike.png';
}}}};

it must helps you, more power to you!

Answer 3

Here is the JSfiddle for clustering based on custom attributes added to the layers. I struggled a bit with this so putting it here; Also shows creating a summary pie graph image when zoomed out with the clustered data http://jsfiddle.net/alexcpn/518p59k4/

Also created a small openlayer tutorial to explain this OpenLayers Advanced Clustering

    var getClusterCount = function (feature) {

    var clustercount = {};
    var planningcount = 0;
    var onaircount = 0;
    var inerrorcount = 0;

    for (var i = 0; i < feature.cluster.length; i++) {

        if (feature.cluster[i].attributes.cluster) {
        //THE MOST IMPORTANT LINE IS THE ONE BELOW, While clustering open layers removes the orginial feature layer with its own. So to get the attributes of the feature you have added add it to the openlayer created feature layer
            feature.attributes.cluster = feature.cluster[i].attributes.cluster;
            switch (feature.cluster[i].attributes.cluster) {

 ......
    return clustercount;
};

Answer 4

You can add label to pointStyle in above example and explain context of this label. Your code should be something like this:

var pointStyle = new OpenLayers.Style({
    // ...
    'label': "${label}",
    // ...
  }, {
    context: {
      // ...
      label: function(feature) {
        // clustered features count or blank if feature is not a cluster
        return feature.cluster ? feature.cluster.length : "";  
      }
      // ..
    }
});

var styleMap = new OpenLayers.StyleMap({
  'default': pointStyle,
});

var googleLikeLayer = new OpenLayers.Layer.Vector("GoogleLikeLayer", {
  // ...
  styleMap  : styleMap,
  // ... 
});

Answer 5

There's a great clustering example available in OpenLayers 3.

I created a jsFiddle from the code so you can play with it.

Basically you have to create an ol.source.Cluster with a grouping distance from an ol.source.Vector formed by an array of ol.Feature. Each ol.Feature created from your source coordinates in the form of ol.geom.Point.

var features = [
  new ol.Feature(new ol.geom.Point([lon1, lat1])),
  new ol.Feature(new ol.geom.Point([lon2, lat2])),
  ...
];

var cluster = new ol.source.Cluster({
  distance: 50,
  source: new ol.source.Vector({ features: features });
});

var map = new ol.Map({
  layers: [
    new ol.source.MapQuest({layer: 'sat'}), // Map
    new ol.layer.Vector({ source: cluster }) // Clusters
  ],
  renderer: 'canvas',
  target: 'map'
});

Answer 6

I have just implemented a so called AnimatedCluster strategy for OpenLayers. You can see a bit more about it at: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

It is only a firts version but adds a nice animation to the clusters. There are many things to improve but it is a starting point.