<span class="Apple-style-span" style="font-family: verdana; white-space: pre-wrap; ">All -
<br></span><div><span class="Apple-style-span" style="font-family: verdana; white-space: pre-wrap; ">I'm trying to modify the custom LayerSwitcher provided by Semantica: <a href="http://n2.nabble.com/Layer-selection-in-LayerSwitcher-td789021.html#a790967">http://n2.nabble.com/Layer-selection-in-LayerSwitcher-td789021.html#a790967</a></span></div>
<div><span class="Apple-style-span" style="font-family: verdana; white-space: pre-wrap; ">
This LayerSwitcher customization is very cool and I am trying to modify it to load layers without using WMC. However, I have an invalid layer parameter (or another missing parameter) that I cannot fix. Can anyone help? I've merged this code with the WMC example as a start but am not getting too far.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>OpenLayers - Custom Layer Switcher</title>
<style type="text/css">
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 80%
}
#map
{
font-size: small;
border: 1px solid #ccc;
}
p
{
margin: 0;
}
</style>
<script type="text/javascript" src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
var format = new OpenLayers.Format.WMC({'layerOptions': {buffer: 0}});
var doc, context, map, layerSwitcher;
//var layerOptions = {
// isBaseLayer: false,
// singleTile: true,
// buffer: 0,
// ratio: 1
//};
function init() {
var options = {
maxExtent: new OpenLayers.Bounds(-130, 14, -60, 55)
};
map = new OpenLayers.Map("map", options);
var jpl = new OpenLayers.Layer.WMS(
"NASA Global Mosaic",
"<a href="http://t1.hypercube.telascience.org/cgi-bin/landsat7">http://t1.hypercube.telascience.org/cgi-bin/landsat7</a>",
{layers: "landsat7", transparent: "TRUE"},
{
isBaseLayer: false,
maxExtent: new OpenLayers.Bounds(-130, 14, -60, 55),
maxResolution: 0.1,
displayInLayerSwitcher: true,
numZoomLevels: 4,
minResolution: 0.02
}
);
var vmap = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"<a href="http://labs.metacarta.com/wms/vmap0">http://labs.metacarta.com/wms/vmap0</a>",
{layers: "basic"},
{
isBaseLayer: false,
maxExtent: new OpenLayers.Bounds(-130, 14, -60, 55),
displayInLayerSwitcher: true,
maxResolution: 0.1,
numZoomLevels: 4,
minResolution: 0.02
}
);
var roads = new OpenLayers.Layer.WMS(
"Transportation Network",
"<a href="http://lioapp.lrc.gov.on.ca/cubeserv/cubeserv.pl">http://lioapp.lrc.gov.on.ca/cubeserv/cubeserv.pl</a>",
{layers: "na_road:CCRS"},
{
isBaseLayer: false,
maxExtent: new OpenLayers.Bounds(
-166.532, 4.05046, -0.206818, 70.287
),
displayInLayerSwitcher: true,
opacity: 0.6,
minScale: 32000000,
numZoomLevels: 4,
maxScale: 6200000
}
);
var nexrad = new OpenLayers.Layer.WMS(
"Radar 3:1",
"<a href="http://columbo.nrlssc.navy.mil/ogcwms/servlet/WMSServlet/AccuWeather_Maps.wms">http://columbo.nrlssc.navy.mil/ogcwms/servlet/WMSServlet/AccuWeather_Maps.wms</a>",
{layers: "3:1"},
{
isBaseLayer: false,
maxExtent: new OpenLayers.Bounds(
-131.029495239, 14.5628967285,
-61.0295028687, 54.562896728
),
opacity: 0.8,
singleTile: true,
visibility: true,
maxResolution: 0.1,
numZoomLevels: 4,
minResolution: 0.02
}
);
// create a fake base layer
var baseLayerOptions = {
isBaseLayer: true,
displayInLayerSwitcher: false
};
var fake = new OpenLayers.Layer('fake', baseLayerOptions);
map.addLayer(fake);
map.addLayers([jpl, vmap, roads, nexrad]);
// add the LayerSwitcher (a.k.a. Map Legend)
layerSwitcher = new OpenLayers.Control.LayerSwitcher();
layerSwitcher.ascending = false;
map.addControl(layerSwitcher);
layerSwitcher.getLegendGraphics(false);
map.setCenter(new OpenLayers.LonLat(-95, 34.5), 1);
// create a new event handler for single click query
var clickEventHandler = new OpenLayers.Handler.Click({ 'map': map }, { 'click': function(e) { doGetFeatureInfo(e); } });
clickEventHandler.activate();
};
function readWMC(merge) {
//var text = document.getElementById("wmc").value;
var text = document.getElementById('hidWMC').value
if(merge) {
try {
map = format.read(text, {map: map});
} catch(err) {
document.getElementById("wmc").value = err;
}
} else {
map.destroy();
try {
map = format.read(text, {map: "map"});
map.addControl(new OpenLayers.Control.LayerSwitcher());
} catch(err) {
document.getElementById("wmc").value = err;
}
}
}
function doGetFeatureInfo(evt) {
var layerId = layerSwitcher.activeLayer;
if(evt) {
var activeLayer = map.getLayer(layerId);
if(activeLayer) {
var url = activeLayer.getFullRequestString({
REQUEST: "GetFeatureInfo",
EXCEPTIONS: "application/vnd.ogc.se_xml",
BBOX: activeLayer.map.getExtent().toBBOX(),
X: evt.xy.x,
Y: evt.xy.y,
INFO_FORMAT: 'text/html',
QUERY_LAYERS: activeLayer.params.LAYERS,
WIDTH: activeLayer.map.size.w,
HEIGHT: activeLayer.map.size.h});
var popupWindow = window.open(url, "GetFeatureInfo", "width=550,height=350,status=yes,scrollbars=yes,resizable=yes");
if(popupWindow) {
popupWindow.focus();
} else {
return true;
}
OpenLayers.Event.stop(evt);
}
}
}
</script>
</head>
<body onload="init()">
<h2>Extended Layer Switcher</h2>
<p>This is a demonstration of a custom layer switcher that allows users to control layer opacity,
layer position, layer visibility and layer selection (for querying). </p>
<hr />
<div id="map" style="width: 750px; height: 500px;"></div>
</body>
</html>
</span></div>