0

I am using OpenLayers 2 for making clustering on vector point data for which I am a beginner. I have installed GeoServer locally via opengeo suite and using 'world_cities' dataset as an example. I have been able to implement simple cluster strategy. Now I want to display count numbers on each cluster. For example, when I start to zoom in , the big cluster should display how many element points are inside. Then when I zoom in further, the big cluster will break down and at the same time show it shoud display the reduced number of points and until it becomes 1.

Here is my code.

At which position shall I place another method/rule to get numbering staff done ?

enter image description here

var style = new OpenLayers.Style({
                pointRadius: "${radius}",
                fillColor: "#FF3300",
                fillOpacity: 0.8,
                strokeColor: "#66FF00",
                strokeWidth: "${width}",
                strokeOpacity: 0.8
            }, {
                context: {
                    width: function(feature) {
                        return (feature.cluster) ? 2 : 1;
                    },
                    radius: function(feature) {
                        var pix = 2;
                        if(feature.cluster) {
                            pix = Math.min(feature.attributes.count, 7) + 2;
                        }
                        return pix;
                    }
                }
            });

  var wfs_layer2 = new OpenLayers.Layer.Vector("world_cities", {
  strategies: [new OpenLayers.Strategy.BBOX()],
  protocol: new OpenLayers.Protocol.WFS({
  version: "1.1.0",
  url: "http://localhost:8081/geoserver/wfs",
  featureNS :  "http://world.opengeo.org",
  featureType: "cities",
 }),

   strategies: [
            new OpenLayers.Strategy.Fixed(),
            new OpenLayers.Strategy.Cluster({distance: 30})
            ],
            styleMap: new OpenLayers.StyleMap({
                    "default": style,
                    "select": {
                        fillColor: "#8aeeef",
                        strokeColor: "#32a8a9"
                    }
                })

});

4

To add a label to your clustered points when they contain more than 1 feature, you have to modify your style :

var style = new OpenLayers.Style({
            pointRadius: "${radius}",
            fillColor: "#FF3300",
            fillOpacity: 0.8,
            strokeColor: "#66FF00",
            strokeWidth: "${width}",
            strokeOpacity: 0.8,
            label: "${getLabel}",
            fontSize: "12px",
            fontFamily: "Courier New, monospace",
            fontWeight: "bold",
            labelOutlineColor: "white",
            labelOutlineWidth: 2.5
        }, {
            context: {
                width: function(feature) {
                    return (feature.cluster) ? 2 : 1;
                },
                radius: function(feature) {
                    var pix = 2;
                    if(feature.cluster) {
                        pix = Math.min(feature.attributes.count, 7) + 2;
                    }
                    return pix;
                },
                getLabel: function(feature) {
                    if (feature.cluster) {
                        if (feature.cluster.length > 1) {
                            return feature.cluster.length;
                        }
                    }
                    return '';
                }
            }
        });

If you want the labels to be displayed only on certain zoom levels, you can add some conditions using the map.getZoom() method.

  • Hi, I copeid as you suggested, still no labelling. Shall I put return '' in function getLabel? – Zaman Sep 3 '14 at 13:38
  • Hi, now it is working , thanks. Just I need a quick modification. The lowest label I can see is '2' and after that if I zoomin, single cities do not show any label. I also want to see each single city with level '1'. How can I do that ? – Zaman Sep 3 '14 at 14:01
  • Oh ok, I thought you didn't want to see "1". You just have to remove the condition if (feature.cluster.length > 1) – Alkwts Sep 3 '14 at 14:05
  • or write if (feature.cluster) { return feature.cluster.length; } return '1'; – Alkwts Sep 3 '14 at 14:13
  • 2
    Hi, if it's working now you can mark the answer as accepted. Then I suggest you to create a new question about AnimatedCluster with more details so that more people can help you, as it is another subject. I have never used it. – Alkwts Sep 5 '14 at 10:14

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.