I can successfully change the opacity of custom tiles with a slider in Google Maps.... http://www.geology.ar.gov/geology/geology_map_full.htm
I cannot, however, change the opacity of a GeoServer overlay with a slider in Google Maps... http://www.geology.ar.gov/geology/strat_geomap_test.htm
They both use similar coding but when you adjust the opacity slider in the second map I'm warned that setOpacity is not a function. Is it possible to dynamically change the opacity of a GeoServer overlay with a slider in Google Maps?
For the custom tile map here is the code I use
function CustomMapType(args){
var opts = {
getTileUrl: function(coord, zoom) {
if ((zoom < mapMinZoom) || (zoom > mapMaxZoom)) {
return args.BaseUrl + "datatiles/none.png";
}
var ymax = 1 << zoom;
var zFactor = Math.pow(2,zoom);
var y = ymax - coord.y -1;
var tileBounds = new google.maps.LatLngBounds(
map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x)*args.tileSize/zFactor, (coord.y+1)*args.tileSize/zFactor ) ),
map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x+1)*args.tileSize/zFactor, (coord.y)*args.tileSize/zFactor ) )
);
if (mapBounds.intersects(tileBounds)){
return args.BaseUrl + "datatiles/COGEO/" + zoom + "/x" + coord.x + "_y" + coord.y + ".png" ;
} else {
return args.BaseUrl + "datatiles/none.png";
}
},
tileSize: new google.maps.Size(args.tileSize, args.tileSize),
isPng: true,
maxZoom: args.maxZoom,
minZoom: args.minZoom
};
var map_type = new google.maps.ImageMapType(opts);
map_type.name = args.name;
map_type.alt = args.alt;
return map_type;
} //end CustomMapType()
function setTiles(_opacity){
for(var i in customtiles){
map.overlayMapTypes.setAt(i, customtiles[i]);
customtiles[i].setOpacity(_opacity);
}
}
function changeMapTileOpacity(_opacity){
for(var i in customtiles){
customtiles[i].setOpacity(_opacity);
}
}
/**
* tile Opacity slider control
*/
function FilterControl(controlDiv, map) {
controlDiv.style.padding = '4px';
var controlUI = document.createElement('DIV');
controlUI.id = "opsContainer";
controlUI.style.cssText="position:absolute;right:7px;width: 70px; height: 21px; z-index: 0; top: 10px;";
var controlKnob = document.createElement('DIV');
controlKnob.id = "knob";
controlKnob.style.cssText="height: 21px; width: 13px; background-image: url(http://www.geology.ar.gov/images/opacity-slider.png); left: 22px; top: 0px; position: absolute; cursor: pointer; background-position: -70px 0px;";
var controlOpSlider = document.createElement('DIV');
controlOpSlider.id = "opSlider";
controlOpSlider.style.cssText="height:21px; width:70px; background-image: url(http://www.geology.ar.gov/images/opacity-slider.png)";
controlOpSlider.appendChild(controlKnob);
controlUI.appendChild(controlOpSlider);
controlDiv.appendChild(controlUI);
var opSlider = new ExtDraggableObject(controlKnob, { restrictY:true, container:controlOpSlider});
opSlider.setValueX(opacity*57);
var dragEndEvent = google.maps.event.addListener(opSlider, "dragend", function(e) {
var opVal = opSlider.valueX();
changeMapTileOpacity(opVal/57);
});
} //end FilterControl()
This is used within mapLoad() function....
/**
* create custom map type tile
*/
customtiles[0] = CustomMapType({
name : 'AGS Geology',
alt : 'Geologic Map Custom Tile',
tileSize : 256,
BaseUrl : "http://www.geology.ar.gov/geology/",
minZoom : mapMinZoom,
maxZoom : mapMaxZoom
});
setTiles(opacity);
//add opacity slider to map
var filterDiv = document.createElement('DIV');
var mControl = new FilterControl(filterDiv, map);
filterDiv.index = 1;
filterDiv.style.cssText="position:absolute;right:7px;";
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(filterDiv);
For the GeoServer map....
function geoServerOverlay(args) {
var opts = {
getTileUrl: function(coord, zoom)
{
var lULP = new google.maps.Point(coord.x*256,(coord.y+1)*256);
var lLRP = new google.maps.Point((coord.x+1)*256,coord.y*256);
var projectionMap = new MercatorProjection();
var lULg = projectionMap.fromDivPixelToSphericalMercator(lULP, zoom);
var lLRg = projectionMap.fromDivPixelToSphericalMercator(lLRP, zoom);
var lUL_Latitude = lULg.y;
var lUL_Longitude = lULg.x;
var lLR_Latitude = lLRg.y;
var lLR_Longitude = lLRg.x;
if (lLR_Longitude < lUL_Longitude){
lLR_Longitude = Math.abs(lLR_Longitude);
}
return GEOSERVERBASE + "/geoserver/wms?" + wmsparams.join("&") + "&layers=" + args.geoLayer + "&bbox=" + lUL_Longitude + "," + lUL_Latitude + "," + lLR_Longitude + "," + lLR_Latitude + "&styles=" + args.geoStyle;
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
alt: args.geoName
};
return opts;
}
overlayMaps[0] = geoServerOverlay({
geoLayer: Geo500K,
geoStyle: 'qcm_Geo500K',
geoName: 'Geology 500K'
});
var overlayMap = new google.maps.ImageMapType(overlayMaps[0]);
map.overlayMapTypes.setAt(1,overlayMap); //set behind placeholder at 1 spot
Trying this to change opacity...
function changeMapTileOpacity(_opacity){
for(var i in overlayMaps){
overlayMaps[i].setOpacity(_opacity);
}
}
According to the documentation, the ImageMapType object has a setOpacity method. Your code is calling it on your geoServerOverlay class (which is not an ImageMapType object).
overlayMaps[0] = geoServerOverlay({
geoLayer: Geo500K,
geoStyle: 'qcm_Geo500K',
geoName: 'Geology 500K'
});
...
overlayMaps[i].setOpacity(_opacity);
looks to me like you keep a reference to at least one of the ImageMapType objects:
var overlayMap = new google.maps.ImageMapType(overlayMaps[0]);
so overlayMap.setOpacity should work, but you need to move that to the global scope to use it.