OpenLayers - order of layering from a KML file

Question

I have a set of KML files hosted on a webserver, which two applications use; one uses OpenLayers and one uses Google Maps.

The problem is the order they render the KML. Google Maps (and Google Earth) renders the first linestring in the KML as the top layer. However, OpenLayers places the first one underneath, with later linestrings appearing on top of it.

Hence the same KML file looks different depending on which application is displaying it.

Is there anyway to choose which object appears on top in OpenLayers?

The code which adds the KML to the map is:

function routeMap_addKML (label, kmlurl, show) {

var layer = new OpenLayers.Layer.Vector(
        label,
        {
          strategies: [new OpenLayers.Strategy.Fixed()],
          protocol: new OpenLayers.Protocol.HTTP({
            url: kmlurl,
            format: new OpenLayers.Format.KML({
              extractStyles: true, 
              extractAttributes: true,
              maxDepth: 2
            })
          }),
          'onFeatureInsert': function () { reScaleMap(routeMap); }
        }
      )

layer.setVisibility(show);
      routeMap.addLayer(layer);

return layer;

}

MaxG · Answer

Assuming you are loading the KML layer as a vector layer,  which is part of the baselayers class. The baselayers has a property called "ZIndex", which controls the order of the layers display on the map. You could use getZIndex() and setZIndex() method to manage the order of layers. Example code shown below:

var raster = new TileLayer({
    source: new BingMaps({
      imagerySet: 'Aerial',
      key: 'Your Bing Maps Key'
    })
  });

var vector = new VectorLayer({
    source: new VectorSource({
      url: 'your kml data path',
      format: new KML()
    })
  });

var map = new Map({
    layers: [raster, vector],
    target: document.getElementById('map'),
    view: new View({
      center: [876970.8463461736, 5859807.853963373],
      projection: 'EPSG:3857',
      zoom: 10
    })
  });

// Set your raster layer as the bottom most one. 
raster.setZIndex(0)

Some reference of baselayer class see here:https://openlayers.org/en/latest/apidoc/module-ol_layer_Base-BaseLayer.html#setZIndex

Some Example of z-Index, see here: https://openlayers.org/en/latest/examples/layer-z-index.html

Mike · Answer

Instead of letting OpenLayers load and read the url you could try loading the url and parsing the features with your own code, then reversing the features array before adding them to the layer.

var layer = new OpenLayers.Layer.Vector(
        label,
        {
          'onFeatureInsert': function () { reScaleMap(routeMap); }
        }
      );

var kmlParser = new OpenLayers.Format.KML({
              extractStyles: true, 
              extractAttributes: true,
              maxDepth: 2
      });

var xhr = new XMLHttpRequest();
xhr.onload = function() {
      var features = kmlParser.read(xhr.responseText);
      features.reverse();
      layer.addFeatures(features);
}
xhr.open("GET", kmlurl);
xhr.send();

OpenLayers - order of layering from a KML file

2 Answers

Add your own answers!

Ask a Question