-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
50 lines (43 loc) · 1.49 KB
/
index.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
<html>
<title> Leaflet Layer Opacity </title>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<style type="text/css">
#map {
height: 90%;
}
#slide {
margin-left: auto;
margin-right: auto;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<input id="slide" type="range" min="0" max="1" step="0.1" value="0.5" onchange="updateOpacity(this.value)">
<script>
var mapquest, stamen;
function init(){
var map = L.map('map', {attributionControl: false}).setView([0, 0], 3);
var mapquestUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
subDomains = ['otile1','otile2','otile3','otile4'];
mapquest = new L.TileLayer(mapquestUrl, {maxZoom: 10, subdomains: subDomains});
stamen = new L.StamenTileLayer("watercolor");
map.addLayer(stamen);
map.addLayer(mapquest);
mapquest.setOpacity(0.5);
L.control.attribution({position: 'bottomright'}).addAttribution("© <a href='http://osm.org/copyright'>OpenStreetMap</a>, <a href='http://maps.stamen.com'>Stamen</a>, <a href='http://maquest.com'>MapQuest</a>").setPrefix("").addTo(map);
}
function updateOpacity(value) {
mapquest.setOpacity(value);
}
window.onload = init;
</script>
</body>
</html>