-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
100 lines (95 loc) · 5.42 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
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg"
crossorigin="anonymous">
<title>COG-Explorer</title>
</head>
<body>
<div class="modal" id="initModal" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cloud Optimized GeoTIFF (COG) Explorer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h2>Howdie!</h2>
<p>
Welcome to the COG-Explorer!
</p>
<p>
This app allows you to visually inspect individual Cloud Optimized GeoTIFFs (COGs) like
scenes from the Landsat-8 archive on Amazon S3.
Either copy the URL to the COG or to the <code>index.html</code> of the Landsat 8 scene you want to
investigate in the "Custom URL" field and hit "Load URL or sample", or alternatively, show
one of the preselected samples using the <button class="btn btn-sm"><i class="fas fa-caret-down"></i></button> button. Note, while optimizing
the data access by utilizing the COG features to only retrieve necessary parts of the data this
app downloads the actual raster values, UInt16 for Landsat 8, which uses quite some download bandwidth.
Additionally the data is download in its original projection and re-projected on the fly.
</p>
<p>
The selected COG is displayed on the map, which you can zoom and pan as you
like. It is visualized as natural color composite with some default processing
steps applied. Using the <button class="btn btn-sm"><i class="fas fa-wrench"></i></button>
button you can adjust the visualization by selecting the bands to use and processing
steps to apply.
</p>
<p>
For the band selection, either define red, green, and blue channels
individually or use one of the predefined scenarios. As image processing steps
currently sigmoidal contrast enhancement and gamma can be applied on all or
individual channels.
</p>
<p>
This app uses the <a href="https://github.com/geotiffjs/geotiff.js">geotiff.js</a>
library to read the actual raster values like UInt16 from the band files (or the overviews, depending on the maps
zoomlevel). Taking advantage of the optimized structure of COGs, only the parts
of the file that are actually required are requested, drastically reducing
the overall amount of data transmitted from the archive.
</p>
<p>
Please keep in mind that at the moment this app is a proof-of-concept demonstration
with some room for improvement. Nevertheless we're looking forward to hear your feedback.
Also let us know if you want to help in any way.
</p>
<p>
If you want to know more about COGs please refer to <a href="http://www.cogeo.org/">their introduction page</a>.
</p>
<p>Proudly presented by:
<br>
<a href="https://eox.at" target="_blank">
<img src="images/EOX_Logo.svg" style="width: 120px; margin-top: 10px;">
</a>
</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary">Okay</button>
</div>
</div>
</div>
</div>
<button class="btn" data-toggle="modal" data-target="#initModal" style="position: absolute; bottom: 10px; left: 10px; z-index: 99;">
<i class="fas fa-question"></i>
</button>
<div id="app">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="app.bundle.js"></script>
<script type="text/javascript">
$(window).on('load', function () {
if (localStorage && localStorage.getItem('has-shown-welcome') !== 'true') {
$('#initModal').modal('show');
localStorage.setItem('has-shown-welcome', 'true');
}
});
</script>
</body>
</html>