[GIS] OpenLayers attribute substitution failing on KML file

fields-attributeskmlopenlayers-2

I'm trying to read in mile markers for a marathon from a KML file and use the MILE attribute to set the label. My layer code looks like this:

// add layer
mile_markers_layer = new OpenLayers.Layer.Vector('Mile Markers',
   {
    projection: new OpenLayers.Projection('EPSG:4326'),
    protocol: new OpenLayers.Protocol.HTTP({
        url: 'Mile_Markers.kml',
        format: new OpenLayers.Format.KML({
            extractAttributes: true 
                    //extractStyles:  true
        })
    }),
    strategies: [new OpenLayers.Strategy.Fixed()],
            style: {
                'fillColor': '#888888',
                'fillOpacity': 1,
                'fontColor': '#000000',
                'fontFamily': 'arial, sans-serif',
                'fontSize': '.9em',
                'fontWeight': 'bold',
                'label': '${MILE}',
                'pointRadius': 8,
                'strokeColor': '#ff0000',
                'strokeWidth': 3
            }
});

I looked in Firebug and all the features of the mile_markers_layer have attribute of MILE with a value of "1" thru "26" (as expected).

Layer is displayed with a label of ${MILE} – by this I mean all 26 mile markers are displayed and each has a label of ${MILE}

I was expecting the value of MILE instead. I'm a newbie, so I could be doing something extremely stupid.

The offending KML file is at:

https://docs.google.com/open?id=0BxhE8rRos0u1X2ExNldTdWwwWkk

Thanks for the suggestion, but every mile marker ended up with ${MILE.value} for a label.

Best Answer

You should use context property of Style object:

options = {
    div: "map",
    zoom: 12,
    center: [-9074392.9993436, 5021122.97485],
    layers: [
        new OpenLayers.Layer.OSM()
    ]
};

map = new OpenLayers.Map(options);

OpenLayers.Util.extend(
    OpenLayers.Feature.Vector.style.default,
    {
        label: "${getLabel}",
        pointRadius: 15
    }
);

var mystyle = new OpenLayers.Style(
    OpenLayers.Feature.Vector.style.default,
    {
        context: {
            getLabel: function(f) {
                return f.attributes.MILE.value;
            }
        }
    }
);

var sm = new OpenLayers.StyleMap({'default': mystyle});

var myKML = new OpenLayers.Layer.Vector(
    "KML layer", {
        strategies: [new OpenLayers.Strategy.Fixed()],
        styleMap: sm,
        projection: new OpenLayers.Projection("EPSG:4326"),
        protocol: new OpenLayers.Protocol.HTTP({
            url: "Mile_Markers.kml",
            format: new OpenLayers.Format.KML()
        })
});
map.addLayer(myKML);

See live demo here.

Related Question