CODEWITHSUNDEEP
kmlopenlayers-3
Víctor Velarde
Víctor Velarde

Reputation: 272

Is it possible to load KML Icons without a full HREF in their styles?

I have a SIMPLE.KML file generated with ArcMap, with vectors such as this one:

<Placemark id="ID_0001">
  <name>0</name>
  <styleUrl>#IconStyle00</styleUrl>
  <Point>
    <altitudeMode>clampToGround</altitudeMode>
    <coordinates> -6.745,43.568,1.511693</coordinates>
  </Point>
</Placemark>

And this kind of styles:

<Style id="IconStyle00">
<IconStyle>
  <Icon><href>SYMBOL_XXX.png</href></Icon>
  <scale>1.0</scale>
</IconStyle>
<LabelStyle>
  <color>00000000</color>
  <scale>0.000000</scale>
</LabelStyle>
<PolyStyle>
  <color>ff000000</color>
  <outline>0</outline>
</PolyStyle>
</Style>

The file SYMBOL_XXX.png is in the same folder as the SIMPLE.KML.

The problem is that the Icon 'is not found' by OL3 when I try to load the kml in a map (as in http://openlayers.org/en/v3.9.0/examples/kml.html , with extractStyles:true), because it considers the href an absolute url, instead of a relative one.

I would like to know it there is a work-around, without having to edit the .kml (I have a quite high number of kmls and still without a definitive folder structure).

Wouldn't it be useful to have some kind of option in ol.format.KML for this use case ('localResources': true'...)?

Thanks!

Upvotes: 1

Views: 1371

Answers (1)

CodeMonkey
CodeMonkey

Reputation: 23738

You can use the OpenLayers Vector with KML source which will extract and use Styles with absolute or relative URLs.

var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/kml/2012-02-10.kml',
    //format: new ol.format.KML()
    format: new ol.format.KML({extractStyles: true})
  })
});

Note extractStyles by default is true so both format lines with and without extractStyles parameter above do the same thing. See http://openlayers.org/en/v3.9.0/apidoc/ol.format.KML.html

However, the trick is that relative icons are relative to the HTML document context not the KML file.

KML Example:

<Style id="style-Restaurant">
  <IconStyle>
    <scale>0.7</scale>
    <Icon>              
      <href>icon40.png</href>
    </Icon>
  </IconStyle>
</Style>

If KML is located in "data/kml" and relative icon is referenced then OpenLayers will resolve local icons relative to the HTML document context. Then icon40.png must be co-located with HTML page. If KML file is in the same folder as HTML then all relative links with work normally.

Upvotes: 1

Related Questions