openlayers kml with external styles

Question

I'm trying to move my kml styles to an external document for use with OpenLayers. The styles work when they are included directly in the kml file.

At first I thought I could use straight kml for this with the styleUrl tag:

<styleUrl>http://localhost/map.kml#myIcon</styleUrl>

However, when I try to do that, the map.kml file never gets requested, and the markers don't show up. I've verified that the styleUrl url works.

I'm loading my kml using:

new OpenLayers.Layer.GML('Name', 'kml_path', {
  format: OpenLayers.Format.KML,
    formatOptions: {
      extractStyles: true,
      extractAttributes: true
    },
    projection: map.displayProjection
});

There are some tantalizing options called 'styles' and 'styleBaseUrl' in the OpenLayers.Format.KML API, but I cannot find any documentation about what they are for or how to use them. Does anyone have any experience with these?

Answer 1

One way could be, have a separate SLD external file with styles and apply it to your GML layer.

Take a look at the SLD OpenLayers code example at http://openlayers.org/dev/examples/sld.html and just replace the example layers with your layer and replace the styles in the sld-tasmania.xml file. This way, you would not need the option extractStyles in the formatOptions.

Answer 2

In formatOptions, try adding maxDepth:10 or some such integer. Here is the api definition.

maxDepth:{Integer} Maximum depth for recursive loading external KML URLs Defaults to 0: do no external fetching

With it defaulting to 0, I would suspect that it downloads 0 external kml files.

Answer 3

I really don't have any experience on KML, so I'm sorry if this is totally off. I just read the code for KML layers, especially the style portions. From your styleUrl tag it looks as the styleBaseUrl should be http://localhost/map.kml, based on the code in KML.js:

parseStyleMaps():

this.styles[(options.styleBaseUrl || "") + "#" + id] =
                    this.styles[(options.styleBaseUrl || "") + styleUrl];

parseStyles():

var styleName = (options.styleBaseUrl || "") + "#" + style.id;

The styles parameter seems to be initialized and rewritten each time the code reads the data, so that won't do any good I think.