I’ve been working on a project that uses OpenLayers, KML, Extjs4, GeoExt, and a few other libraries. On this project, customers would like to use a map to track assets. They want to see a specific icon for a type of asset with a label below the icon. What we found was that OpenLayers doesn’t support KML styles along with OpenLayers styleMap on a Vector layer.<\/p>\n
Searching online turned up a handful of individuals with the same issue, but no solution. Here is how I solved it: <\/p>\n
Problematic Code example:
Setup a styleMap: <\/p>\n
var styleMap = new OpenLayers.StyleMap({'default':{
label : \"${name}\",
fontColor: \"#000000\",
fontSize: \"11px\",
labelAlign: \"center\",
pointRadius: 2,
labelXOffset : -16,
labelYOffset : 0,
labelSelect: true
}});
<\/pre>\nSetup to get and parse KML: <\/p>\n
var myKmlFormat = new OpenLayers.Format.KML({
internalProjection: sphericalMercatorProj,
externalProjection: mapProj,
extractStyles: true,
extractAttributes: true,
maxDepth: 2
});
<\/pre>\nFinally, setup the vector layer: <\/p>\n
var layer = new OpenLayers.Layer.Vector(\"KML\", {
projection: latLonProj,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: myKmlUrl,
format: myKmlForma
}),
styleMap: kmlStyleMap,
eventListeners: { 'loadend': kmlLoaded },
renderers: renderer
});
<\/pre>\nThe KML: <\/p>\n
<document>
<name>Geolocation Case: 17564<\/name>
<style id=\"style1\">
<iconstyle>
<icon>
<href>http:\/\/127.0.0.1:8000\/static\/images\/pointicon.png<\/href>
<\/Icon>
<\/IconStyle>
<\/style>
<placemark>
<name>My Point<\/name>
<point>
<coordinates>-81.522832781,-3.33918759741,0.0<\/coordinates>
<\/point>
<lookat>
<longitude>-81.522832781<\/longitude>
<latitude>-3.33918759741<\/latitude>
<\/lookat>
<styleurl>#style1<\/styleurl>
<\/placemark>
<\/document>
<\/span><\/pre>\nGoogle Earth will use the Placemark Name as the label, OpenLayers does not. The line “extractStyles: true,” in the OpenLayers KML section tells OpenLayers to parse the styles in the KML. Setting it to false tells OpenLayers to ignore the style sections of the KML.<\/p>\n
When this boolean is set to true, OpenLayers.Format.KML ignores manually added styleMap, such as the line “styleMap: kmlStyleMap”. So if your wanting a label on your placemark, it won’t happen. It is an ‘or’, not an ‘and’. This is a bug in OpenLayers in my opinion.<\/p>\n
So, how do you get around this issue and add a label? Well, read on.<\/p>\n
Here is the Solution Code: <\/p>\n
First off, don’t create a styleMap and add it to the Vector constructor. Add a listener to the layer:<\/p>\n
layer.events.on({
loadend : this.addLabel
});
<\/pre>\nNow, go through each icon (feature) and give the style a label, an offset, and anything else your label may need. <\/p>\n
addLabel : function(event) {
var features = event.object.features;
for (var i = 0, len = features.length; i < len; i++) {
var style = features[i]['style'];
var attributes = features[i]['attributes'];
if (!Ext.isEmpty(style) && !Ext.isEmpty(attributes)){
style.label = attributes.name;
style.labelYOffset = -16;
style.fontSize = '11px';
style.fontColor = '#000000';
style.labelSelect = true;
}
}
event.object.redraw();
}
<\/pre>\nThe icons on the map should now have labels.<\/p>\n","protected":false},"excerpt":{"rendered":"
I’ve been working on a project that uses OpenLayers, KML, Extjs4, GeoExt, and a few other libraries. On this project, customers would like to use a map to track assets. They want to see a specific icon for a type of asset with a label below the icon. What we found was that OpenLayers doesn’t … Continue reading Adding Icon Labels to Openlayers with KML styles<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-21","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/trash80.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trash80.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trash80.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trash80.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trash80.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21"}],"version-history":[{"count":1,"href":"https:\/\/trash80.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/trash80.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/21\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/trash80.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trash80.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trash80.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}