Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
67 lines (61 sloc) 1.54 KB
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/ol.css" type="text/css"/>
<link rel="stylesheet" href="css/sample.css" type="text/css"/>
<style>
body {
padding : 0;
margin : 0;
}
</style>
<title>OpenLayers 3 example 06 Raster Layer</title>
</head>
<body>
<div id="map" class="map" style="height:300px"></div>
<div id="layerSelect">
<label><input type="checkbox" value="sat" checked="checked">sat</label>
<label><input type="checkbox" value="osm">osm</label>
</div>
<script src="js/ol-debug.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var mapquestSat = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
var mapquestOsm = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'}),
visible: false
})
var map = new ol.Map({
target: 'map',
layers: [mapquestSat,mapquestOsm],
view: new ol.View({
center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
$('#layerSelect input[type="checkbox"]').on('click', function() {
$('#layerSelect input[type="checkbox"]').each(function(num){
var $checkbox = $(this);
var layerName = $checkbox.val();
var checked = $checkbox.prop('checked');
switch( layerName ) {
case 'sat':
mapquestSat.setVisible(checked);
break;
case 'osm':
mapquestOsm.setVisible(checked);
if (mapquestSat.getVisible()) {
mapquestOsm.setOpacity(0.5);
} else {
mapquestOsm.setOpacity(1.0);
}
break;
default:
}
})
});
</script>
</body>
</html>
You can’t perform that action at this time.