I have created two labelled vector points on an OpenLayers map. I'm trying to change the label text dynamically. I tried changing the values where the stylemap gets the values from and calling layer.refresh() but it does not do anything. Any ideas?

Here is my code in its entirety. All you have to do is change the OpenLayers JavaScript reference to your local file and it will work in your browser.

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <title>OpenLayers Labeled Features Example</title> 
    <link rel="stylesheet" href="../js/OpenLayers/theme/default/style.css" type="text/css" /> 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
    <script src="../js/OpenLayers/OpenLayers.js"></script> 
    <script type="text/javascript">
        var map;
        var vectorLayer;
        function init() {
            map = new OpenLayers.Map('map');
            var layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
            vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
                styleMap: new OpenLayers.StyleMap(
                     { 'default': 
                        strokeColor: "#00FF00",
                        strokeOpacity: 0.7,
                        strokeWidth: 3,
                        fillColor: "#FF5500",
                        fillOpacity: 0.7,
                        pointRadius: 12,
                        pointerEvents: "visiblePainted",
                        //Supported values include “circle”, “square”, “star”, “x”, “cross”, and “triangle”.
                        graphicName: "circle",
                        label: "${order}",
                        fontColor: "#000000",
                        fontSize: "16px",
                        fontFamily: "Courier New, monospace",
                        fontWeight: "bold",
                        //Valid values for horizontal alignment: “l”=left, “c”=center, “r”=right.  
                        //Valid values for vertical alignment: “t”=top, “m”=middle, “b”=bottom.  
                        //Example values: “lt”, “cm”, “rb”
                        labelAlign: "cm",
                        labelXOffset: "0",
                        labelYOffset: "0"
            // create points 
            var point1 = new OpenLayers.Geometry.Point(-111.04, 47.68);
            var point2 = new OpenLayers.Geometry.Point(-110.04, 40.68);
            var pointFeature1 = new OpenLayers.Feature.Vector(point1);
            var pointFeature2 = new OpenLayers.Feature.Vector(point2);
            //set order for label.
            pointFeature1.attributes.order = 1;
            pointFeature2.attributes.order = 2;
            map.setCenter(new OpenLayers.LonLat(point1.x, point1.y), 3);
            vectorLayer.addFeatures([pointFeature1, pointFeature2]);

        function switchLabels() {

            vectorLayer.features[0].attributes.order = 2;
            vectorLayer.features[1].attributes.order = 1;

  <body onload="init()"> 
    <h1 id="title">OpenLayers Refresh Labelled features example</h1> 
    <div id="tags"></div> 
    <p id="shortdesc"> 
        <input type="button" value="Switch Labels" onclick="Javascript: switchLabels();" />
    <div id="map" class="smallmap"></div> 
  • Great question and code example Aug 11 '12 at 11:38

The refresh() method is for WFS layers or vector strategies. Use the generic redraw() method instead which can be used on any layer type.

function switchLabels() {
    vectorLayer.features[0].attributes.order = 2;
    vectorLayer.features[1].attributes.order = 1;

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.