I want to display count on image, I have added layer like this:

var vector = new OpenLayers.Layer.Vector("Test", {
    displayInLayerSwitcher: false
});

vector.styleMap.styles["default"].addRules([
    new OpenLayers.Rule({           
        "maxScaleDenominator": 136495,     
        symbolizer: {
            externalGraphic: "../funnel/ico/blank.png",
                graphicWidth: 20,
                graphicHeight: 20,
        graphicOpacity:1,
        label: "${count}",
            labelOutlineWidth: 1,
            fontColor: "#ffffff",
            fontOpacity: 0.8,
            fontSize: "12px" 
        }
    })            
]);

But label display below the image, label below icon

Like empty, But I want to add label on graphics like this- label on top of icon

How to do that?

I want to display count on image, I have added layer like this:

var vector = new OpenLayers.Layer.Vector("Test", {
    displayInLayerSwitcher: false
});

vector.styleMap.styles["default"].addRules([
    new OpenLayers.Rule({           
        "maxScaleDenominator": 136495,     
        symbolizer: {
            externalGraphic: "../funnel/ico/blank.png",
                graphicWidth: 20,
                graphicHeight: 20,
        graphicOpacity:1,
        label: "${count}",
            labelOutlineWidth: 1,
            fontColor: "#ffffff",
            fontOpacity: 0.8,
            fontSize: "12px" 
        }
    })            
]);

But label display below the image, label below icon

Like empty, But I want to add label on graphics like this- label on top of icon

How to do that?

• javascript
• openlayers

• @DanielNova True, but is it all about getting points? :) – MikkoP Commented Sep 15, 2012 at 11:47
• 1 Hello @DanielNova, First of all I am sorry,i apologise for my mistake........ Thanks..... :) – Amit Commented Sep 17, 2012 at 5:44

4 Answers 4

You can set the label position using the following style attributes (using a StyleMap):

• labelAlign
• labelXOffset // Not supported by the canvas renderer !
• labelYOffset // Not supported by the canvas renderer ! *

See symbolizer properties here: http://dev.openlayers/apidocs/files/OpenLayers/Feature/Vector-js.html

I'm define style map differently.

var style = new OpenLayers.Style({
   ...
});
...
var vector = new OpenLayers.Layer.Vector('Test_layer', {
    styleMap: new OpenLayers.StyleMap(style)
});

May by this example help you http://jsfiddle/winsent/ZkMzG/

this will work (real code snippet with a bonus, declusters when less than 3 features are in cluster):

var pointStyle2 = new OpenLayers.Style({
    externalGraphic: "http://www.yourdomain./img/image.png",
    //graphicYOffset: -25, 
    pointRadius: 15,
    'label': "${label}"
  }, {
    context: {
      label: function(feature) {
    // clustered features count or blank if feature is not a cluster
    return feature.cluster ? feature.cluster.length : "";  
      }
    }
});

var styleMapClusterClient = new OpenLayers.StyleMap({
  'default': pointStyle2,
});


//create refresher
var refresh = new OpenLayers.Strategy.Refresh({force: true, active: true});

var clusterStrategyClient = new OpenLayers.Strategy.Cluster({ distance: 35, threshold: 3 });
    var urlKMLClient = 'Client.kml'; 
    var layerKMLClient = new OpenLayers.Layer.Vector("Clients", {
                styleMap: styleMapClusterClient,
            strategies: [new OpenLayers.Strategy.Fixed(), clusterStrategyClient, refresh],
            protocol: new OpenLayers.Protocol.HTTP({
            url: urlKMLClient,
            format: new OpenLayers.Format.KML({
                extractStyles: true, 
                extractAttributes: true,
                maxDepth: 2
            })
            })
        }); 

Had the same problem and solved with setting the renderer to SVG - according to the documentation http://dev.openlayers/apidocs/files/OpenLayers/Feature/Vector-js.html

label {String} The text for an optional label. For browsers that use the canvas renderer, this requires either fillText or mozDrawText to be available.

 var layer = new OpenLayers.Layer.Vector("Features", {
    renderers: ['SVG'],
 ...