[GIS] Relabel vector points in OpenLayers

featuresopenlayers-2vector

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"> 
  <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);
            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 Labelled 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>

Best Answer

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();
}
Related Question