Openlayers zIndex for markers and vectors

javascript openlayers
kamil picture kamil · Oct 28, 2011 · Viewed 8.7k times · Source

I'm rendering map with OSM and I have some serious problem with setting zIndex for page elements.

Part of JS looks like this:

var userRoute = new OpenLayers.Layer.Vector( "KML", {
    sphericalMercator : true,
    styleMap: styleMap,
    rendererOptions: { zIndexing: true }
} );

var markers = new OpenLayers.Layer.Markers( "Markers", {
    sphericalMercator : true,
    rendererOptions: { zIndexing: true }
} );

markers.setZIndex( 500 );
userRoute.setZIndex( 200 );

Now while parsing KML file for first element I set

var startFlag = new OpenLayers.Icon( '/start_flag_2.png', new OpenLayers.Size( 23, 22 ) );
markers.addMarker( new OpenLayers.Marker( latlon, startFlag ) )

Same goes for last elem. :

var stopFlag = new OpenLayers.Icon( '/stop_flag_2.png', new OpenLayers.Size( 23, 22 ) );
markers.addMarker( new OpenLayers.Marker( latlon, stopFlag ) )

Setting zIndex is simply ignored by script, any idea why?

Answer

kamil picture kamil · Oct 31, 2011

If anyone is intrested, you need to specify zIndex AFTER adding layers to map 

map.addLayers( [userRoute, markers] ); 
markers.setZIndex( 1001 ); 
userRoute.setZIndex( 1000 );

and it works just fine :)

Related questions

OpenLayers vs Google Maps?

I have used Google Maps a couple of times, but what wondering about OpenLayers. Before starting any kind of coding, here are a couple of questions that come to my mind, Why would I use OpenLayers instead of Google Maps? …

Read More
Simple label on a leaflet (geojson) polygon

I am attempting what I imagine to be a fairly common use-case with a leaflet multipolygon object. I create the MultiPolygon using geojson: var layer = L.GeoJSON(g, style_opts); What I'd like is to put a simple text label …

Read More
Drawing a path with a line in OpenLayers using JavaScript

I have seen the examples presented here of how to draw a line but the examples only show how to do it with the mouse, by clicking. What I want to do is draw the line manually using JavaScript given …

Read More