-
Notifications
You must be signed in to change notification settings - Fork 2
/
09_Stamen.html
67 lines (61 loc) · 1.57 KB
/
09_Stamen.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!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 09 Stamen</title>
</head>
<body>
<div id="map" class="map" style="height:300px"></div>
<div id="layerSelect">
<label><input type="checkbox" value="sat" checked="checked">water color</label>
<label><input type="checkbox" value="osm">toner</label>
</div>
<script src="js/ol-debug.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var stamenWaterColor = new ol.layer.Tile({
source: new ol.source.Stamen({layer: 'watercolor'})
})
var stamenToner = new ol.layer.Tile({
source: new ol.source.Stamen({layer: 'toner'}),
visible: false
})
var map = new ol.Map({
target: 'map',
layers: [stamenWaterColor,stamenToner],
view: new ol.View({
center: ol.proj.transform([-74.0022, 40.4246], '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':
stamenWaterColor.setVisible(checked);
break;
case 'osm':
stamenToner.setVisible(checked);
if (stamenWaterColor.getVisible()) {
stamenToner.setOpacity(0.5);
} else {
stamenToner.setOpacity(1.0);
}
break;
default:
}
})
});
</script>
</body>
</html>