Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I have created two labeled vector points on an open layers 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 open layers JS reference to your local file and it will work in your browser.

<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <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' });
            map.addLayer(layer);

            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.addLayer(vectorLayer);
//            vectorLayer.drawFeature(multiFeature);
            map.setCenter(new OpenLayers.LonLat(point1.x, point1.y), 3);
            vectorLayer.addFeatures([pointFeature1, pointFeature2]);
        }

        function switchLabels() {

            //console.log(vectorLayer.features[0].attributes.order);

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

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

            vectorLayer.refresh();

            //console.log(vectorLayer.features[0].attributes.order);

        }


    </script> 
  </head> 
  <body onload="init()"> 
    <h1 id="title">OpenLayers Refresh Labeled features example</h1> 
    <div id="tags"></div> 
    <p id="shortdesc"> 
        <input type="button" value="Switch Labels" onclick="Javascript: switchLabels();" />
    </p> 
    <div id="map" class="smallmap"></div> 
  </body> 
</html>
share|improve this question
    
Great question and code example –  JayCrossler Aug 11 '12 at 11:38

1 Answer 1

up vote 3 down vote accepted

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;
    vectorLayer.redraw();
}
share|improve this answer
    
+1 Thanks good to know! –  CaptDragon May 13 '11 at 16:41

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.