3

Here is the clustered vector layer I just added to the map.

var defaultStyle = new OpenLayers.Style({
        strokeColor     : "#FFFFFF",
        strokeOpacity   : 1,
        strokeWidth     : 2,
        fillColor       : settings.color,
        fillOpacity     : 0.9,
        cursor          : "pointer",
        pointRadius     : "${point_radius}",
        pointerEvents   : "visiblePainted",
        label           : "${label}",
        fontColor       : "#000000",
        fontSize        : "12px",
        fontFamily      : "verdana",
        fontWeight      : "bold",
        labelAlign      : "center" 
    }, {
        context: {
            label: function(feature) {
                var sumValue = 0;
                if(feature.attributes.count>1) {
                    for (var i=0; i<feature.cluster.length; i++) {
                        sumValue++;
                    }
                    return sumValue;
                }else{
                    return 1;
                }
            },
            point_radius: function(feature) {
                var pix = 10;
                if(feature.cluster) {
                    pix =Math.min(feature.attributes.count, 30) * 2.5 + 8;
                }
                return pix;
            }
        }
    });

    var onSelectStyle = new OpenLayers.Style({
        strokeColor     : "#000000",
        fontColor       : "#FFFFFF",
        pointerEvents   : "visiblePainted",
        fontSize        : "15px"
    });

    var strategy = new OpenLayers.Strategy.Cluster({distance: 30, threshold: 2});

    var ly=new OpenLayers.Layer.Vector(GSMapLayerName,{
            strategies: [strategy],
            styleMap:new OpenLayers.StyleMap({
                        "default":defaultStyle,
                        "select": onSelectStyle
                    }),
            displayInLayerSwitcher:false
        });
    map.addLayer(ly);

I am getting the below output

enter image description here

Look at the image the feature which have 9 is behind the 3 and 5. This is not a good to view. So, How can I set this feature to the front of all other features?

Note: I am using Openlayers 2.11

Thanks for any reply.

2

What if you try to add zIndex to the style with ${point_radius} as value?

Otherwise, check out http://dev.openlayers.org/examples/ordering.html

1

Here is the solution

    var defaultStyle = new OpenLayers.Style({
        strokeColor     : "#FFFFFF",
        strokeOpacity   : 1,
        strokeWidth     : 2,
        fillColor       : settings.color,
        fillOpacity     : 0.9,
        cursor          : "pointer",
        pointRadius     : "${point_radius}",
                                            graphicZIndex   : "${point_radius}"
        pointerEvents   : "visiblePainted",
        label           : "${label}",
        fontColor       : "#000000",
        fontSize        : "12px",
        fontFamily      : "verdana",
        fontWeight      : "bold",
        labelAlign      : "center" 
    },
    ...................
    ......................

   var ly=new OpenLayers.Layer.Vector(GSMapLayerName,{
            strategies: [strategy],
            styleMap:new OpenLayers.StyleMap({
                        "default":defaultStyle,
                        "select": onSelectStyle
                    }),
            displayInLayerSwitcher:false,
            // enable the indexer by setting zIndexing to true
            rendererOptions: {zIndexing: true}
        });
    map.addLayer(ly);

Just add graphicZIndex : "${point_radius}" to the style and add rendererOptions: {zIndexing: true} to the layer.

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.