WMS OpenLayers click on thumbnail image to show Layer
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<body onload="init()">
<h1>Klick on the images to toggle the layer visibility</h1>
<div id="thumbnails">
<img class="vorschau" id="wms" src="http://fs1.directupload.net/images/150615/cxsz5i2v.jpg" />
<img class="vorschau" id="wms2" src="http://fs1.directupload.net/images/150615/ibtqm6lf.jpg" />
</div>
<div></div>
<div id="map" class="smallmap"></div>
</body>
CSS
#map {
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;
var layer, wms;
function init() {
map = new OpenLayers.Map('map', {
maxExtent: new OpenLayers.Bounds(-20027593.947852, -3249680.8301405, -4373290.5572275, 12404622.560484)
});
wms = new OpenLayers.Layer.WMS(
"States", "https://ahocevar.com/geoserver/wms", {
layers: 'topp:states',
transparent: 'true'
}, {
visibility: false
});
wms2 = new OpenLayers.Layer.WMS(
"Tasmania", "http://demo.opengeo.org/geoserver/wms", {
layers: 'topp:tasmania',
transparent: 'true'
}, {
visibility: false,
displayOutsideMaxExtent: true
});
var osm = new OpenLayers.Layer.OSM("OSM");
map.addLayers([osm, wms, wms2]);
var mittelpunkt = new OpenLayers.LonLat(-98.7, 39.9).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:3857"));
map.setCenter(mittelpunkt, 3);
var tassie = new OpenLayers.LonLat(146.6, -42).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:3857"));
map.addControl(new OpenLayers.Control.LayerSwitcher());
$(".vorschau").on("click", function () {
switchlayer = eval(this.id);
if (switchlayer.visibility === false) {
switchlayer.setVisibility(true);
} else {
switchlayer.setVisibility(false);
}
if (this.id === 'wms2') {
map.setCenter(tassie, 6);
} else {
map.setCenter(mittelpunkt, 3);
}
});
}