Hello.
I made a map on a website, that allows users to select some layers to be
rendered on a Google map (API3).
All works well but I would like to set the order of the layering in
order to control, what layers shall be background. Especially I would
like to have POI-layers *always* above shapes.
As of now I do it like this:
//preparing 2 layers
var poi4Tiles = {
getTileUrl: function(coord, zoom) {
return
"http://thedomain.xy:8080/geoserver/gwc/service/gmaps?layers=district:POI_1"
+
"&zoom=" + zoom + "&x=" + coord.x + "&y=" + coord.y +
"&format=image/png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
opacity: 1 };
var radio4Type = new google.maps.ImageMapType(radio4Tiles);
var shape7Tiles = {
getTileUrl: function(coord, zoom) {
return
"http://thedomain.xy:8080/geoserver/gwc/service/gmaps?layers=district:Shape_1"
+
"&zoom=" + zoom + "&x=" + coord.x + "&y=" + coord.y +
"&format=image/png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
opacity: 0.5 };
var radio7Type = new google.maps.ImageMapType(radio7Tiles);
//insert them at user request
if ($("#check_4").attr("checked")) {
map.overlayMapTypes.insertAt(23, poi4Type);
}
if ($("#check_7").attr("checked")) {
map.overlayMapTypes.insertAt(5, shape7Type);
}
As you can see, poi4Type is inserted first with the index 23, then
shape7Type is inserted with index 5.
If I get the documentation for API3 overlays insertAt() correctly, the
index of the already existing poi4Type should increase from 23 to 24 as
shape7Type is inserted at index 5. Anyway, the index of the POI *should*
be higher than the one of the shape.
So, all should be well: the POIs at index 24 *should* overlay the shape
in shape7Type at index 5
But alas! actually it is the other way around. the POIs are *behind* the
shapes, as if they would be only but wretched HTML-div layers by order
of appearance when z-index is not set or not working...
what am I do wrong?
best regards
HZN