0

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;

}
  • which version of OpenLayers are you using? Are you importing the KML as a vector layer? – MaxG Jan 21 at 19:57
  • Release 2.12. I've added the code I'm using to the original question now. – Richard Jan 21 at 21:22
0

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

  • I'm quite new to OpenLayers to be honest; I'm just picking up some existing code. I have now added it to the original question. It doesn't seem to be the same style as yours; is it using an older version? – Richard Jan 21 at 21:09
  • @Richard it seems to me you are using OpenLayer 2, the code I provided is using the lastest which is Openlayer 5. I did a quick google, the Layer class in OpenLayer 2 also has the zIndex property, try to use SetIndex method on the "layer" variable to see what happens. (eg, if you only have two layers, use layer.setZIndex(1); Here is the link for OpenLayer2 Layer Class API reference: dev.openlayers.org/docs/files/OpenLayers/Layer-js.html – MaxG Jan 22 at 1:59
0

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();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.