<html>
<head>
<title>Demostración Regional SIGRA :: Mapserver</title>
<link rel="stylesheet" href="./OpenLayers-2.8/theme/default/style.css" type="text/css" />
<script src="./OpenLayers-2.8/lib/OpenLayers.js" type="text/javascript"></script>
<style type="text/css">
#map {
width: 550px;
height: 400px;
border: 1px solid gray;
}
ul, li {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
#info {
position: absolute;
top: 6em;
left: 600px;
}
#info table td {
border:1px solid #ddd;
border-collapse: collapse;
margin: 0;
padding: 0;
font-size: 90%;
padding: .2em .1em;
background:#fff;
}
#info table th{
padding:.2em .2em;
text-transform: uppercase;
font-weight: bold;
background: #eee;
}
tr.odd td {
background:#eee;
}
table.featureInfo caption {
text-align:left;
font-size:100%;
font-weight:bold;
text-transform:uppercase;
padding:.2em .2em;
}
</style>
<script defer="defer" type="text/javascript">
OpenLayers.ProxyHost = "proxy.cgi?url=";
// var map, infocontrols, water, highlightlayer;
var map, infocontrols;
function load() {
// map = new OpenLayers.Map('map', {
// maxExtent: new OpenLayers.Bounds(98548.012725, 807349.853125, 407462.448212, 1117767.521875),
// });
map = new OpenLayers.Map( 'map',{
maxExtent: new OpenLayers.Bounds(98548.012725, 807349.853125, 407462.448212, 1117767.521875),
maxResolution: 'auto',
units: "m",
projection: "EPSG:4326"}, { controls: [] }
);
var municipios = new OpenLayers.Layer.WMS(
"Municipios",
"http://mapserver.corpoandes.gov.ve/cgi-bin/mapserv",
{
map: '/var/www/mapserver/regional/municipios.map',
layers:"municipios_region",
format:'png',
transparent: "true",
format: "image/png"
},
{
'isBaseLayer': true
}
);
infoControls = {
click: new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://mapserver.corpoandes.gov.ve/',
title: 'Identify features by clicking',
// layers: [municipios_region],
map: '/var/www/mapserver/regional/municipios.map',
layers:"municipios_region",
queryVisible: true
})/*,
hover: new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://demo.opengeo.org/geoserver/wms',
title: 'Identify features by clicking',
layers: [water],
hover: true,
// defining a custom format options here
formatOptions: {
typeName: 'water_bodies',
featureNS: 'http://www.openplans.org/topp'
},
queryVisible: true
})*/
}
map.addLayers([municipios]);
for (var i in infoControls) {
infoControls[i].events.register("getfeatureinfo", this, showInfo);
map.addControl(infoControls[i]);
}
map.addControl(new OpenLayers.Control.LayerSwitcher());
infoControls.click.activate();
map.zoomToMaxExtent();
}
function showInfo(evt) {
if (evt.features && evt.features.length) {
highlightLayer.destroyFeatures();
highlightLayer.addFeatures(evt.features);
highlightLayer.redraw();
} else {
$('responseText').innerHTML = evt.text;
}
}
function toggleControl(element) {
for (var key in infoControls) {
var control = infoControls[key];
if (element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
function toggleFormat(element) {
for (var key in infoControls) {
var control = infoControls[key];
control.infoFormat = element.value;
}
}
function toggleLayers(element) {
for (var key in infoControls) {
var control = infoControls[key];
if (element.value == 'Specified') {
control.layers = [municipios_region];
} else {
control.layers = null;
}
}
}
// function toggle(key
</script>
</head>
<body onload="load()">
<h1 id="title">Feature Info Example</h1>
<div id="tags"></div>
<p id="shortdesc">Demostración del Control WMSGetFeatureInfo para obtener información sobre la posición WMS del mapa (Vía requerimeinto GetFeatureInfo).
</p>
<div id="info">
<h1>Región Los Andes</h1>
<p>Haga click en el mapa para obtener información.</p>
<!--area de despuesta-->
<div id="responseText"></div>
</div>
<!--area de dibujo del mapa-->
<div id="map" class="smallmap"></div>
<div id="docs"></div>
<!--area de botones-->
<!--<ul id="control">
<li>
<input type="radio" name="controlType" value="click" id="click"
onclick="toggleControl(this);" checked="checked" />
<label for="click">Click</label>
</li>
<li>
<input type="radio" name="controlType" value="hover" id="hover"
onclick="toggleControl(this);" />
<label for="hover">Hover</label>
</li>
</ul>-->
<!--<ul id="format">
<li>
<input type="radio" name="formatType" value="text/html" id="html"
onclick="toggleFormat(this);" checked="checked" />
<label for="html">Show HTML Description</label>
</li>
<li>
<input type="radio" name="formatType" value="application/vnd.ogc.gml" id="highlight"
onclick="toggleFormat(this);" />
<label for="highlight">Highlight Feature on Map</label>
</li>
</ul>-->
<ul id="layers">
<li>
<input type="radio" name="layerSelection" value="Specified" id="Specified"
onclick="toggleLayers(this);" checked="checked" />
<label for="Specified">Get water body info</label>
</li>
<li>
<input type="radio" name="layerSelection" value="Auto" id="Auto"
onclick="toggleLayers(this);" />
<label for="Auto">Get info for visible layers</label>
</li>
</ul>
</body>
</html>