Getting Features from Clusters in OpenLayers?

Question

I have an array with lots of different locations, with names and pictures and of course longitude and latitude. If I put these onto the map directly, it gets cluttered. So I try to use the Clusters.

Start with creating features:

 for(var i = 0; i < points.length; i++){
     features[i] = new ol.Feature({
     population: 4000,
     name : points[i].name,
     geometry: new ol.geom.Point(
     ol.proj.transform([
     points[i].long,
     points[i].lat],
     'EPSG:4326', oProjection))
     });
 }

I then populate the clusters with a vector with features:

var vSource = new ol.source.Vector({ features: features});

var vFeatures = vSource.getFeatures();

var clusterSource = new ol.source.Cluster({
                   distance: 20,
                   source: vSource});

I then style the clusters with some icons

var clusters = new ol.layer.Vector({
          source: clusterSource,
          style : new ol.style.Style({
                image: new ol.style.Icon(({
                src: 'image/image.png'})),
          text: new ol.style.Text({
                font: '18px Helvetica, Arial Bold, sans-serif',
                text: size.toString(),
                fill: new ol.style.Fill({
                color: '#fff'
                })
})
 map.add(clusters)

I later have an onclick method that should get the "name" from the Feature, but the only thing it can print out is the geometry, it is like the name on the object disapears from Clusters. For example, doing a clusterSource.getFeatures() returns an empty vector, [].

function addOverlays(points){
    for(var i = 0; i<points.length;i++){
        var element = document.getElementById(points[i].id);
        var popup = new ol.Overlay({
            element: element,
            positioning: 'bottom-center',
            stopEvent: false
        });
        map.addOverlay(popup);
        // display popup on click
    }

    // display popup on click
    map.on('click', function(evt) {
        var feature = map.forEachFeatureAtPixel(evt.pixel,
            function(feature, layer) {
                console.log("feature on click: ",feature);
                return feature;
            });
        if (feature) {
            var geometry = feature.getGeometry();
            var coord = geometry.getCoordinates();
            popup.setPosition(coord);
            console.log(feature.get('name'));
            $(element).popover({
                'placement': 'bottom',
                'html': true,
                'content': feature.get('name') //THIS IS THE TROUBLE
            });
            $(element).popover('show');
        } else {
            $(element).popover('destroy');
        }
    });
}

The addOverlay method cannot get the name of the feature, it returns "undefined" which is very strange. Help? Any help please? It is like the features stop existing when added in the cluster.

Answer 1

So with clustering, OL3 creates a new feature that wraps all the clustered features underneath it. If you look at a clustered feature you see this under the values attribute:

values_: Object
  features: Array[19]
  geometry: ol.geom.Point

This is why getFeatures() does not work, when working with cluster features, they only have these two values when they are created.

function isCluster(feature) {
  if (!feature || !feature.get('features')) { 
        return false; 
  }
  return feature.get('features').length > 1;
}

map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel, 
                  function(feature) { return feature; });
  if (isCluster(feature)) {
    // is a cluster, so loop through all the underlying features
    var features = feature.get('features');
    for(var i = 0; i < features.length; i++) {
      // here you'll have access to your normal attributes:
      console.log(features[i].get('name'));
    }
  } else {
    // not a cluster
    console.log(feature.get('name'));
  }
});

Answer 2

I cant add comments yet (not enough reputation), but I want to add my solution on which e.g. Popups will be shown on clustered and unclustered features . Like the example of @Timh.

But when it comes to a lower zoom level and the clustering is "dissolved" the popup will just show undefined when you click the feature which was (and technially still is) in a cluster.

So, you can do the same with

if (typeof feature.get('features') === 'undefined') {
  // feature.get('whatever');
} else {
  var cfeatures = feature.get('features');
  for(var i = 0; i < cfeatures.length; i++) {
    //like in  the example of timh
  }
}

and getting e.g Popups from clustered, unclustered and from features which are not clustered (in a visual way) at the moment.

Edit: Example with Popups