Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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 prtscr). 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> 
share|improve this question
    
Have you explored the layer opacity option? Just have your google maps as base and the kml on top with an opacity of .2 and a thicker stroke? It might work out just fine. –  CaptDragon Aug 24 '12 at 18:33

1 Answer 1

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 );
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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