WMS OpenLayers click on thumbnail image to show Layer
HTML
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<body onload="init()">
<h1></h1>
<div id="map-canvas" class="smallmap"></div>
</body>
CSS
#map-canvas {
width: 100%;
height: 400px;
border: 1px solid #dddddd;
margin-top:10px;
}
.vorschau {
width: 150px;
height:80px;
cursor:pointer;
border: 1px solid #00008B;
}
#thumbnails {
margin-bottom: 15px;
}
JavaScript
var map;
function init() {
map = new OpenLayers.Map('map-canvas', {
projection: 'EPSG:3857',
layers: [new OpenLayers.Layer.Google( "SAT", {
type: google.maps.MapTypeId.SATELLITE,
visibility: true,
isBaseLayer: true
}),
new OpenLayers.Layer.Google(
"SAT", {
type: google.maps.MapTypeId.SATELLITE,
visibility: true,
isBaseLayer: true
}),
new OpenLayers.Layer.WMS("Idrografia",
"http://geomap.reteunitaria.piemonte.it/ws/siti/aipo-01/sitiwms/wms_aipo_dati_base?", {
layers: 'Idrografia,IdrografiaLabel',
transparent: true
}, {
isBaseLayer: false,
singleTile: true,
queryLayers: 'Idrografia',
visibility: true
}),
new OpenLayers.Layer.WMS("Limiti amministrativi",
"http://geomap.reteunitaria.piemonte.it/ws/siti/aipo-01/sitiwms/wms_aipo_dati_base?", {
layers: 'Regioni,Province,Comuni,ComuniLabel',
transparent: true
}, {
isBaseLayer: false,
singleTile: true,
queryLayers: 'Comuni',
visibility: false
}),
new OpenLayers.Layer.WMS("Bacini idrografici",
"http://geomap.reteunitaria.piemonte.it/ws/siti/aipo-01/sitiwms/wms_aipo_dati_base?", {
layers: 'Bacino,BacinoLabel',
transparent: true
}, {
isBaseLayer: false,
singleTile: true,
visibility: false
}),
new OpenLayers.Layer.WMS("Carta Fiume Po 1:50.000",
"http://geomap.reteunitaria.piemonte.it/ws/siti/aipo-01/sitiwms/wms_aipo_cartafiumepo?", {
layers: '2011_CT50_Po',
transparent: true
}, {
isBaseLayer: false,
singleTile: true,
visibility: false
}),
new OpenLayers.Layer.WMS("Competenza...