[GIS] Ordering layers in OpenLayers and Google styled maps

google mapskmllayersopenlayers-2

I'm using OpenLayers with Google styled maps. My biggest problem is KML polygon layer which needs to be under roads layer but it isn't (see screenshot).

What am I doing wrong?

enter image description here

This is my coding:

<html>
<head>
   <title>OpenLayers Google (v3) Layer Example - demo with styled maps, traffic, fusion tables</title>
   <script src="http://maps.google.com/maps/api/js?V=3.3&amp;sensor=false"></script>
   <script src="http://openlayers.org/dev/OpenLayers.js"></script>
   <script>
var map;
var MY_MAPTYPE_ID = 'usroadatlas';

var roadAtlasStyles = [{
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [{
        hue: "#ff0022"
    }, {
        saturation: 60
    }, {
        lightness: -20
    }]
}, {
    featureType: "road.arterial",
    elementType: "all",
    stylers: [{
        hue: "#2200ff"
    }, {
        lightness: -40
    }, {
        visibility: "simplified"
    }, {
        saturation: 30
    }]
}, {
    featureType: "road.local",
    elementType: "all",
    stylers: [{
        hue: "#f6ff00"
    }, {
        saturation: 50
    }, {
        gamma: 0.7
    }, {
        visibility: "simplified"
    }]
}, {
    featureType: "water",
    elementType: "geometry",
    stylers: [{
        saturation: 40
    }, {
        lightness: 40
    }]
}, {
    featureType: "road.highway",
    elementType: "labels",
    stylers: [{
        visibility: "on"
    }, {
        saturation: 98
    }]
}, {
    featureType: "administrative.locality",
    elementType: "labels",
    stylers: [{
        hue: "#0022ff"
    }, {
        saturation: 50
    }, {
        lightness: -10
    }, {
        gamma: 0.9
    }]
}, {
    featureType: "transit.line",
    elementType: "geometry",
    stylers: [{
        hue: "#ff0000"
    }, {
        visibility: "on"
    }, {
        lightness: -70
    }]
}];

var usRoadMapType = new google.maps.StyledMapType(roadAtlasStyles);

var roadatlas = new OpenLayers.Layer.Google("Google US Road Atlas", 

        { type: 'usroadatlas'},
        { isBaseLayer: false}


    );

roadatlas.id = 'a';



var gmap = new OpenLayers.Layer.Google("Google Roads",
 { isBaseLayer: false});

var kml1 = new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "kmls/AirCallMobileCoverage.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
            },
            { isBaseLayer: false}
             );


function init() {

    map = new OpenLayers.Map('map');
    map.addControl(new OpenLayers.Control.LayerSwitcher())
    map.addLayers([gmap, kml1, roadatlas]);


    map.setCenter(new OpenLayers.LonLat(-87.650052, 41.850033).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 10);

    map.getLayer('a').mapObject.mapTypeControlOptions = {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    };
    map.getLayer('a').mapObject.mapTypes.set(MY_MAPTYPE_ID, usRoadMapType);

}
</script>
</head>
<body onload="init()">
   <div id="map"></div>
</body>
</html>

Best Answer

I'm pretty sure the answer lies in setting the zIndex (map.setLayerZIndex or layer.setZIndex).

I believe the features of the vector layer are treated differently and the zIndex value is magnified though I couldn't confirm this in the code:

Z_INDEX_BASE: {
    BaseLayer: 100,
    Overlay: 325,
    Feature: 725,
    Popup: 750,
    Control: 1000
},

Try manually setting it with map.setLayerZIndex or layer.setZIndex.

I had the opposite problem and resolved it with this snippet to get my vector/marker layers back on top of my other layers:

function fixZIndex()
{
    vectorLayer.setZIndex ( olMap.Z_INDEX_BASE[ "Feature" ] );
    markerLayer.setZIndex ( olMap.Z_INDEX_BASE[ "Feature" ] + 1 );
}
Related Question