/
index.html
120 lines (107 loc) · 4.2 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Glacier Point Cloud</title>
<script src='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
<script src='//code.jquery.com/jquery-1.9.1.min.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
<link href='../css/style.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.ie.css' rel='stylesheet'>
<![endif]-->
<meta name='twitter:site' content='@MapBox' />
<meta property='og:site_name' content='MapBox' />
<meta name='twitter:url' content='https://mapbox.com/pointcloud/matterhorn/imagery' />
<meta name='twitter:url' content='https://mapbox.com/pointcloud/matterhorn/imagery' />
<meta name='twitter:title' content='MapBox Partners with Drone Adventures to Bring UAV Imagery to the Web' />
<meta property='og:title' content='MapBox Partners with Drone Adventures to Bring UAV Imagery to the Web' />
<meta name='twitter:description' content='Here at MapBox we're stepping up our work with drone companies, we've partnered with Drone Adventures to bring the data of their latest flight on the slopes of the Matterhorn...' />
<meta property='og:description' content='Here at MapBox we're stepping up our work with drone companies, we've partnered with Drone Adventures to bring the data of their latest flight on the slopes of the Matterhorn...' />
<meta name='twitter:image' content='https://c.tiles.mapbox.com/v3/bobbysud.town-lidar/15/17035/11611.png' />
<meta property='og:image' content='https://c.tiles.mapbox.com/v3/bobbysud.town-lidar/15/17035/11611.png' />
<meta name='twitter:card' content='summary_large_image' />
<meta property='og:type' content='website' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#control {
background: #FFF;
position: absolute;
left: 10px;
top: 80px;
height: 200px;
width: 28px;
border: 1px solid #BBB;
-webkit-border-radius: 3px;
border-radius: 3px;
z-index: 999;
}
#handle {
background: #000;
position: absolute;
left: 0;
top: 20px;
width: 28px;
height: 10px;
}
#handle:hover {
cursor: pointer;
background: #444;
cursor: ns-resize;
}
</style>
<div id='map'></div>
<div id='control'>
<div id='handle'></div>
</div>
<div class='modal'>
<p>More on this map:</p>
<ul>
<li>3d data: <a href='http://www.droneadventures.org/'>Drone Adventures</a>.</li>
<li>Street data: <a href='http://openstreetmap.orf'>OpenStreetMap Contributors</a></li>
<li>Global satellite layer: <a href='http://www.digitalglobe.com/'>Digital Globe</a></li>
<li>Map design: <a href='http://mapbox.com'>MapBox</a></li>
<li>Read more on: <a href='http://mapbox.com/blog/droneadventures-matterhorn-imagery-on-the-web'>MappBox Partners With Drone Adventures to Bring UAV Imagery to the Web</a></li>
</ul>
</div>
<div class='attribution'>About this map</div>
<script>
var map = L.mapbox.map('map', 'bobbysud.map-l4i2m7nd',{
scrollWheelZoom:false,
attributionControl:false
})
.setView([45.9823,7.6652],13)
var overlay = L.mapbox.tileLayer('bobbysud.matterhorn-imagery', {zIndex: 2})
.addTo(map);
var handle = document.getElementById('handle'),
start = false,
startTop;
document.onmousemove = function(e) {
if (!start) return;
// Adjust control
handle.style.top = Math.max(-5, Math.min(195, startTop + parseInt(e.clientY, 10) - start)) + 'px';
// Adjust opacity
overlay.setOpacity(1 - (handle.offsetTop / 200));
};
handle.onmousedown = function(e) {
// Record initial positions
start = parseInt(e.clientY, 10);
startTop = handle.offsetTop - 5;
return false;
};
document.onmouseup = function(e) {
start = null;
};
$('.attribution').click(function(e){
e.preventDefault();
$('.modal').fadeIn();
$('canvas, img').click(function(){
$('.modal').fadeOut();
});
});
</script>