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.
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.
No comments:
Post a Comment