OpenLayers 3: GeoJSON feature clustering

Question

I've been trying to use the basic example from the OpenLayers website to create a simple clustering map for my GeoJSON data. However, I'm not getting any luck generating any clusters.

Below is my code:

var baseLayer = new ol.layer.Tile({
    source: source: new ol.source.OSM()
});
var view = new ol.View ({
    center: [19425838, -4409677], // projection is in EPSG: 3857
    zoom: 6,
    maxZoom: 28,
    minZoom: 1
    });
var source = new ol.source.GeoJSON({object: geojson_jobs}); // local .js file passing geoJSON features into a variable
var clustersSource = new ol.source.Cluster({
        distance: 10,
        source: source
    });
var styleCache = {};
var clusters = new ol.layer.Vector({
    source: clustersSource,
    style: function(feature, resolution) {
        var size = feature.get('features').length;
        var style = styleCache[size];
        if (true) {
            style = [
                new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: resolution,
                        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'
                        })
                    })
                })];
            styleCache[size] = style;
        }
        return style;
    }
});
var layers = [baseLayer, clusters];
var map = new ol.Map({
        controls: ol.control.defaults().extend([new ol.control.ScaleLine({})]),
        target: 'map',
        renderer: 'canvas',
        view: view,
        layers: layers
    });

Are you sure the geoJSON is being loaded? Are you getting any error messages in the console? — Tim.Lucas, Feb 02 '15 at 08:12
@Tim.Lucas, no error messages, I actually used this json file before (of course, I displayed them individually; then I decide to go with the Clustering option, just to get a nice and clean look on the map). — ouhshuo, Feb 02 '15 at 19:56
I'm having the same problem. The geojson is loaded here, I can check in the debug. looks like something isn't working. I have no javascript errors either. — Glenn Plas, Feb 15 '15 at 20:20
@GlennPlas My geoJSON file originally came from a shapefile and then gets exported through QGIS. I have no idea QGIS automatically converted it from single-point to multi-point until I double checked the geoJSON itself. — ouhshuo, Feb 16 '15 at 22:30

score 2 · Accepted Answer · edited May 23 '17 at 12:39

It doesn't work with geoJSON like that, it took me a day to figure this out, you need to make sure that:

Your geoJSON only containts Points, not LineStrings etc. even if it holds 1 the cluster layer will not display without js errors.
make sure you transform where needed concerning projections.

If you load geoJSON from a file in contrast to the example where it gets generated in an array you have to do this trick below.

The example code

var count = 20000;
var features = new Array(count);
var e = 4500000;
for (var i = 0; i < count; ++i) {
    var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
    features[i] = new ol.Feature(new ol.geom.Point(coordinates));
}
//console.log(features);
//

The geoJSON from file

var features = [];

$.ajax({
    url: 'data/shopssmalln.geojson',
    dataType: 'json',
    async: false,
    success: function(json1) {
        $.each(json1, function (key, data) {
            if (key == 'features') {
                $.each(data, function (k, v) {
                    if (v.type=='Feature') {
                        //console.log(v.geometry.coordinates);
                        if (v.geometry.coordinates.length>1) {
                            features[k] = new ol.Feature(new ol.geom.Point(ol.proj.transform(v.geometry.coordinates, 'EPSG:4326', 'EPSG:3857')));
                        }
                    }
                });
            }
        });
    }
});

//console.log(features);

The rest

var source = new ol.source.Vector({
    features: features,
    projection: 'EPSG:3857'
});

var clusterSource = new ol.source.Cluster({
    distance: 20,
    projection: 'EPSG:3857',
    source: source
});

ol3 clustering is a bit of a pain..

Check out these links:

I stumbled upon the same problem, my data was in PostGIS, served with Geoserver, and this helped me a lot: http://gis.stackexchange.com/questions/28835/how-to-change-the-geometry-type-from-point-to-multipoint-within-an-existing-tabl — Benedek Simo, Feb 11 '16 at 13:17

score 1 · Answer 2 · edited Feb 03 '15 at 08:28

1

I double checked the geoJSON file' geometry, strangely it's in multipoint rather than single point. The geoJSON file is exported with QGIS from a shapefile that only has point geometry features. I would expect the new geoJSON is in single point geometry rather than multipoint.

edited Feb 03 '15 at 08:28

julien

10,186
6
55
93

answered Feb 03 '15 at 01:20

ouhshuo

23
1
5

OpenLayers 3: GeoJSON feature clustering

2 Answers2

The example code

The geoJSON from file

The rest