Open layers label not working

StackOverflow https://stackoverflow.com/questions/22534828

  •  18-06-2023
  •  | 
  •  

Question

I've been trying to get the openlayers label feature to work and produced the following example:

<html>
<head>
  <title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
  <div style="width:100%; height:100%" id="map"></div>
  <script>
    var map = new OpenLayers.Map('map');
    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
        "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
    map.addLayer(wms);
    // Default polygon style
    var polygonStyle = 
    OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    polygonStyle.strokeColor = "#800000";
    polygonStyle.fillColor = "#800080";
    polygonStyle.fillOpacity = 0.2;
    polygonStyle.strokeWidth = 1;
    polygonStyle.label = "Label:${label}";
    polygonStyle.labelOutlineColor = "white";
    polygonStyle.labelOutlineWidth = 3;

    var smap = new OpenLayers.StyleMap({"default": polygonStyle});
    var veclayer = new OpenLayers.Layer.Vector("Survey Locations", {"styleMap": smap});
    map.addLayer(veclayer);

    var data = {"type":"Polygon","coordinates":[[
    [-2.07362131225228,52.0329916851734],
    [-2.07096056091493,52.0228522264397],
    [-2.05061868774548,52.0156687188299],
    [-2.04280809509186,52.0210036398637],
    [-2.02804521667506,52.0231163039992],
    [-2.01748804200037,52.0300345805213],
    [-2.01645807373352,52.0464545997404],
    [-2.02589944946666,52.0529998067114],
    [-2.04194978821027,52.0554276235705],
    [-2.06023172485491,52.0455044093648],
    [-2.07362131225228,52.0329916851734]]]};
    var gson = new OpenLayers.Format.GeoJSON();
    var GEO = gson.read(data, "Geometry");
    var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
    GEO = GEO.transform(EPSG4326, map.getProjectionObject());
    var locname="First label";
    var FEA = new OpenLayers.Feature.Vector(GEO, {"label":locname}, polygonStyle);
    veclayer.addFeatures([FEA]);
    map.zoomToExtent(GEO.getBounds(),false);
    data= {"type":"Polygon","coordinates":[[[-2.04514962074064,52.0403793945411],
    [-2.03057040393828,52.0403841112724],
    [-2.03057659173109,52.0493747022699],
    [-2.04515873420745,52.049369984023],
    [-2.04514962074064,52.0403793945411]]]}

    var GEO = gson.read(data, "Geometry");
    var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
    GEO = GEO.transform(EPSG4326, map.getProjectionObject());
    var locname="Second label";
    var FEA = new OpenLayers.Feature.Vector(GEO, {"label":locname}, polygonStyle);
    veclayer.addFeatures([FEA]);

  </script>
</body>
</html>

The code works but the label on the polygons displays as Label:${Label} rather than interpreting the variable to read Label: First label etc.

When this is integrated into a larger application the first label is not interpreted correctly but the second is. I suspect that it may be a layer initialisation problem but have no idea how to get over this.

Any help would be appreciated!!

Was it helpful?

Solution

Have you tried to add attributes as object after declaring the feature for example:

FEA.attributes = { label:locname }

It worked this way see, the changes below:

<html>
<head>
  <title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
  <div style="width:100%; height:100%" id="map"></div>
  <script>
    var map = new OpenLayers.Map('map');
    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
        "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
    map.addLayer(wms);
    // Default polygon style
    var polygonStyle = 
    OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    polygonStyle.strokeColor = "#800000";
    polygonStyle.fillColor = "#800080";
    polygonStyle.fillOpacity = 0.2;
    polygonStyle.strokeWidth = 1;
    polygonStyle.label = "Label:${label}";
    polygonStyle.labelOutlineColor = "white";
    polygonStyle.labelOutlineWidth = 3;

    var smap = new OpenLayers.StyleMap({"default": polygonStyle});
    var veclayer = new OpenLayers.Layer.Vector("Survey Locations", {"styleMap": smap});
    map.addLayer(veclayer);

    var data = {"type":"Polygon","coordinates":[[
    [-2.07362131225228,52.0329916851734],
    [-2.07096056091493,52.0228522264397],
    [-2.05061868774548,52.0156687188299],
    [-2.04280809509186,52.0210036398637],
    [-2.02804521667506,52.0231163039992],
    [-2.01748804200037,52.0300345805213],
    [-2.01645807373352,52.0464545997404],
    [-2.02589944946666,52.0529998067114],
    [-2.04194978821027,52.0554276235705],
    [-2.06023172485491,52.0455044093648],
    [-2.07362131225228,52.0329916851734]]]};
    var gson = new OpenLayers.Format.GeoJSON();
    var GEO = gson.read(data, "Geometry");
    var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
    GEO = GEO.transform(EPSG4326, map.getProjectionObject());
    var locname="First label";
    var FEA = new OpenLayers.Feature.Vector(GEO);
    FEA.attributes = {
    label:locname
    }
    veclayer.addFeatures([FEA]);
    map.zoomToExtent(GEO.getBounds(),false);
    data= {"type":"Polygon","coordinates":[[[-2.04514962074064,52.0403793945411],
    [-2.03057040393828,52.0403841112724],
    [-2.03057659173109,52.0493747022699],
    [-2.04515873420745,52.049369984023],
    [-2.04514962074064,52.0403793945411]]]}

    var GEO = gson.read(data, "Geometry");
    var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
    GEO = GEO.transform(EPSG4326, map.getProjectionObject());
    var locname="Second label";
    var FEA = new OpenLayers.Feature.Vector(GEO);
    FEA.attributes = {
        label: locname
    }
    veclayer.addFeatures([FEA]);

  </script>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top