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> 
  • 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
2

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

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.