1

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 2 '15 at 8: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 2 '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
  • I know, look at my reply a bit lower. – Glenn Plas Feb 16 '15 at 22:32
2

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:

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.