OpenLayers Cluster Issue – Fixing OpenLayers 5: this.source.loadFeatures is Not a Function with Cluster

geodjangojavascriptopenlayers

I'm trying to change the example of the Clustered Feature using my points from geojson layer but there is something wrong.

var random_points = new ol.layer.Vector({
  title: 'Random Points',
  source: new ol.source.Vector({
    url: '{% url 'random_points_geojson' %}',
    format: new ol.format.GeoJSON(),
  }),
});

var clusterSource = new ol.source.Cluster({
  source: random_points,
});

var clusters = new ol.layer.Vector({
  source: clusterSource,
  style: function(feature) {
      style = new ol.style.Style({
        image: new ol.style.CircleStyle({
          radius: 10,
          stroke: new ol.style.Stroke({
            color: '#fff'
          }),
          fill: new ol.style.Fill({
            color: '#3399CC'
          })
        }),
        text: new ol.style.Text({
          text: size.toString(),
          fill: new ol.style.Fill({
            color: '#fff'
          })
        })
      });
    }
});

Withouth the cluster function I can see the random points vector on the map but if I use the code above I see in console this error:

Uncaught TypeError: this.source.loadFeatures is not a function
    at e.loadFeatures (VM215 ol.js:7)
    at e.prepareFrame (VM215 ol.js:7)
    at e.renderFrame (VM215 ol.js:7)
    at e.renderFrame_ (VM215 ol.js:7)
    at e.<anonymous> (VM215 ol.js:7)  
Cluster.js:117

Best Answer

The source for the clusterSource must be a vector source, not a layer. i.e.

source: random_points.getSource()
Related Question