CODEWITHSUNDEEP
javascriptopenlayers
Jeremy
Jeremy

Reputation: 3538

OpenLayers 2.13: clustering strategy is not working

I am trying to apply a simple clustering stategy to my OpenLayers v2.13 map, but it is not working.

Here is my code so far, it all loads correctly but the random points on the map do not cluster, they just overlap horribly...

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="utf-8">
        <title>OpenLayers 2.13.x Clustered Markers</title>
        <script src="../OpenLayers.js"></script>
    </head>
    <body onload="run()" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
        <div id='map' style="width: 100%; height: 100%">
        </div>
        <script>
                function run(){

                    // create the map
                    var map = new OpenLayers.Map("map");

                    // add a google maps layer to the map
                    var layer = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
                        layers: "basic"
                    });
                    map.addLayers([layer]);

                    // set up cluster strategy and vector layer
                    var strategy = new OpenLayers.Strategy.Cluster({
                        distance: 15,
                        clustering: true
                    });
                    var markersLayer = new OpenLayers.Layer.Vector("Clustered markers", {strategies: [strategy]});


                    // create and add all markers randomly
                    var markers = [];
                    for (var i = 0; i < 700; i++) {
                        var r1 = Math.random();
                        var r2 = Math.random();
                        var r3 = Math.random();
                        var r4 = Math.random();
                        var px = r1 * 180 * ((r2 < 0.5) ? -1 : 1); 
                        var py = r3 * 90 * ((r4 < 0.5) ? -1 : 1);
                        var p = new OpenLayers.Geometry.Point(px, py);
                        var clazz = (i % 10 === 0) ? 4 : Math.ceil(r4 * 3);
                        var f = new OpenLayers.Feature.Vector(p, {clazz: clazz});
                        markers.push(f);
                    }
                    markersLayer.addFeatures(markers);

                    // add markers layer to the map
                    map.addLayer(markersLayer);
                    map.zoomToMaxExtent();
                }
            </script>
    </body>
</html>

Note: OpenLayers is locally on my machine and is version 2.13.1

I have looked at several examples, none have helped me solve this issue. I have looked at several stack overflow answers, the best of them was about marker clustering, but also didn't help.

I must be missing something obvious but I cant see what?

[UPDATE]

Taking advice from the answers below, here is the code snippet (from above) edited to run correctly, adding the markers after the layer has been added to the map and not including the clustering flag...

// set up cluster strategy and vector layer
var strategy = new OpenLayers.Strategy.Cluster({
    distance: 15 // <-- removed clustering flag
});
var markersLayer = new OpenLayers.Layer.Vector("Clustered markers", {strategies: [strategy]});

// add markers layer to the map
map.addLayer(markersLayer); // <-- adding layer before adding features

// create and add all markers randomly
var markers = [];
for (var i = 0; i < 700; i++) {
    var r1 = Math.random();
    var r2 = Math.random();
    var r3 = Math.random();
    var r4 = Math.random();
    var px = r1 * 180 * ((r2 < 0.5) ? -1 : 1); 
    var py = r3 * 90 * ((r4 < 0.5) ? -1 : 1);
    var p = new OpenLayers.Geometry.Point(px, py);
    var clazz = (i % 10 === 0) ? 4 : Math.ceil(r4 * 3);
    var f = new OpenLayers.Feature.Vector(p, {clazz: clazz});
    markers.push(f);
}
markersLayer.addFeatures(markers); // <-- now can add features

// zoom to extent
map.zoomToMaxExtent();

It looks like maybe a good practice to follow is to make sure that you add a layer to the map before adding/removing features to it.

Upvotes: 1

Views: 3340

Answers (2)

IanWatkins
IanWatkins

Reputation: 11

Mailed similar to Angela to you internally.

Not sure why removing clustering has any affect, I think its true by default anyway.

As for the order of adding the points, I seem to remember reading something about the fact your points are replaced by the clusters so adding the layer to map after adding points to layer may mean that process doesn't happen. Or something. ;)

Cheers

Ian

Upvotes: 1

angerelle
angerelle

Reputation: 116

I removed "clustering" from the cluster strategy options 

        // set up cluster strategy and vector layer
        var strategy = new OpenLayers.Strategy.Cluster({
            distance: 15
        });

and then added the markers after I'd added the layer to the map 

        // add markers layer to the map
        map.addLayer(markersLayer);
        markersLayer.addFeatures(markers);
        map.zoomToMaxExtent();

then all seemed to work.

Upvotes: 4

Related Questions