[GIS] OpenLayers 3: GeoJSON feature clustering

geojsonopenlayers

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
    });

Best Answer

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:

Related Question