-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
297 lines (240 loc) · 13.3 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="robots" content="index">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<meta name="description" content="Remotepixel Satellite data search tools for Sentinel-2, Landsat-8 and CBERS-4">
<meta name="author" content="Vincent Sarago for RemotePixel.ca">
<meta name="keywords" content="Sentinel, Landsat, CBERS, AWS PDS, Satellite, Search">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@RemotePixel" />
<meta name="twitter:title" content="Satellite Search" />
<meta name="twitter:description" content="Remotepixel Satellite data search tools for Sentinel-2, Landsat-8 and CBERS-4"/>
<meta name="twitter:creator" content="@_VincentS_" />
<meta name="twitter:image:src" content="https://search.remotepixel.ca/img/satsearch.jpg" />
<meta property="og:title" content="Satellite Search" />
<meta property="og:url" content="https://search.remotepixel.ca" />
<meta property="og:image" content="https://search.remotepixel.ca/img/satsearch.jpg" />
<meta property="og:description" content="Remotepixel Satellite data search tools for Sentinel-2, Landsat-8 and CBERS-4a" />
<meta property="og:site_name" content="RemotePixel" />
<title>Remote Pixel | Satellite Search</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://api.mapbox.com/mapbox-assembly/v0.20.0/assembly.min.css" rel="stylesheet">
<script async defer src="https://api.mapbox.com/mapbox-assembly/v0.20.0/assembly.js"></script>
<link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60678866-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="content flex-parent flex-parent-inline">
<div class="site-info">
<div class="info prose">
<button id='btn-close-help' class='btn-close-help' onclick='showSiteInfo()'>
<svg class='icon icon--l txt-xl'><use xlink:href='#icon-close'/></svg>
</button>
<h2>Satellite Search</h2>
<p>A simple and light interface to search for AWS Landsat-8, Sentinel-2 and CBERS-4 Public Datasets</p>
<img class="img-responsive center" src="img/help_satsearch.gif">
<h4>HowTo</h4>
<ul>
<li>Zoom / Pan map into your area of interest (AOI)</li>
<li>Select the satellite you want on the top right</li>
<li>Click on the blue tile covering the AOI</li>
<li>Click on the item of interest on the image list on the left</li>
<li>Scroll through the available images</li>
<li>Click on the preview button to get more download option</li>
<li>Click on AWS/USGS logo to access summary product page</li>
<li>Preview image bands combinations</li>
</ul>
<h4>Info</h4>
<p>Landsat/Sentinel/CBERS search results is powered by
<a href="https://github.com/remotepixel/aws-sat-api-py" target="_blank">RemotePixel Satellite API</a>.
</p>
<p>Images previews are from Landsat, Sentinel and CBERS <a href="https://aws.amazon.com/fr/public-datasets/" target="_blank">AWS Public Dataset</a>.</p>
<p>This project is powered by Mapbox-GL API and the awesome vector tile technology develloped by <a href="https://mapbox.com" target="_blank">Mapbox</a>.</p>
<p>Continue reading: <a href="/blog/satellitesearch_20160610.html">Blog post</a> on RemotePixel.ca</p>
<h4>Public dataset on AWS</h4>
<p>Landsat-8 data available on AWS are in Level <strong>1T</strong>:</p>
<blockquote>
Standard Terrain Correction (Level 1T) -
provides systematic radiometric and geometric accuracy by incorporating ground
control points while employing a Digital Elevation Model (DEM) for topographic accuracy.
Geodetic accuracy of the product depends on the accuracy of the
ground control points and the resolution of the DEM used:
Ground control points used for Level 1T correction are derived from the GLS2000 data set.
DEM sources include SRTM, NED, CDED, DTED, GTOPO 30, and GIMP.
<p>Info: <a href="http://landsat.usgs.gov/Landsat_Processing_Details.php" target="_blank">http://landsat.usgs.gov/</a></p>
</blockquote>
<p>Sentinel-2 data available on AWS are in Level <strong>1C</strong>:</p>
<blockquote>
Level-1C processing includes radiometric and geometric corrections including ortho-rectification and spatial registration on a global reference system with sub-pixel accuracy.
Level-1C processing is broken down into the following steps:
- Tiles association: selection of pre-defined tiles intersecting the footprint of the required image.
- Resampling grid computation: enabling linking of the native geometry image to the target geometry image (ortho-rectified).
- Resampling of each spectral band in the geometry of the ortho-image using the resampling grids and an interpolation filter. Calculation of the TOA reflectances also occurs in this step.
- Masks computation: cloud and land/water masks are generated.
- Imagery compression of the resultant Level-1C imagery via the JPEG2000 algorithm and a GML geographic imagery-encoded header.
<p>Info: <a href="https://sentinel.esa.int/web/sentinel/user-guides/sentinel-2-msi/processing-levels/level-1" target="_blank">https://sentinel.esa.int</a></p>
Reflectance, often between 0 and 1, is converted into integer values, in order to preserve the dynamic range of the data by applying a fixed coefficient (1000 by default).
<p>Info: <a href="https://sentinel.esa.int/web/sentinel/technical-guides/sentinel-2-msi/level-1c/algorithm" target="_blank">https://sentinel.esa.int</a></p>
</blockquote>
<p>CBERS-4:</p>
<blockquote>
DEMO, more info soon.
</blockquote>
<h4>Contribute</h4>
<p>Source code of the project is on <a href="https://github.com/RemotePixel/satellitesearch"><i class="fa fa-github"></i> GitHub</a>.</p>
<p>Landsat, Sentinel and CBERS services are also open-source <a href="https://github.com/RemotePixel/remotepixel-api"><i class="fa fa-github"></i> GitHub</a>.</p>
<h4>Contact</h4>
<p>Questions or comments to <a href="mailto:[email protected]">[email protected]</a></p>
<h4>Thanks</h4>
<div class="thanks-images grid">
<a href="https://www.mapbox.com" target="_blank" class="col col--3 col--offl1 mr6 ml6"><img class="img-responsive" src="/img/mapbox.png"></a>
<a href="http://www.sinergise.com" target="_blank" class="col col--3 col--offl1 mr6 ml6"><img class="img-responsive" src="/img/sinergise.png"></a>
<a href="https://aws.amazon.com/" target="_blank" class="col col--3 mr6 ml6"><img class="img-responsive" src="/img/awservice.png"></a>
</div>
<div class="site-version">Version: 4.0</div>
</div>
</div>
<div class="main-pane flex-parent flex-parent--wrap viewport-full h-full w-full relative clip">
<div id="map" class="flex-child flex-child--grow bg-darken10">
<!-- Satellite Selection -->
<div class="map-top-right z1">
<div id='satellite-toggle' class='toggle-group txt-m bg-gray-faint'>
<label class='toggle-container'>
<input sat="landsat" checked name='toggle-sat' type='radio' />
<div class='toggle color-gray-dark-on-hover'>Landsat-8</div>
</label>
<label class='toggle-container'>
<input sat="sentinel" name='toggle-sat' type='radio' />
<div class='toggle color-gray-dark-on-hover'>Sentinel-2</div>
</label>
<label class='toggle-container'>
<input sat="cbers" name='toggle-sat' type='radio' />
<div class='toggle color-gray-dark-on-hover'>CBERS-4</div>
</label>
</div>
</div>
<div class="map-bottom-right z1 bg-darken25">
<button id='btn-info' class='shadow-darken10-bold-on-hover bg-gray-dark-on-hover round' onclick='showSiteInfo()'>
<svg class='icon icon--m'><use xlink:href='#icon-question'/></svg>
</button>
</div>
<div class="loading-map z5">
<div class="middle-center">
<div class="round animation-spin animation--infinite animation--speed-1">
<svg class='icon icon--l inline-block'><use xlink:href='#icon-satellite'/></svg>
</div>
</div>
</div>
</div>
<div id="info-img" class="flex-child w300 relative">
<div class="h-full w-full scroll-auto absolute">
<span class="metaloader off middle-center">
<div class="round animation-spin animation--infinite animation--speed-1">
<svg class='icon icon--l color-black inline-block'><use xlink:href='#icon-satellite'/></svg>
</div>
</span>
</div>
<div class="list-img h-full w-full scroll-auto absolute">
<span id="nodata" class="middle-center txt-l">Click on Tile</span>
</div>
</div>
</div>
</div>
<!-- Previews -->
<div id="preview" class='absolute bg-black z3 top left right bottom'>
<button id="close-preview" class='fixed top right px12 py12 color-gray-faint z5'>
<svg class='icon icon--l txt-h1'><use xlink:href='#icon-close'/></svg>
</button>
<div id='preview-info' class='absolute right bottom color-white bg-darken10 py12 px12 z5'>
<span id='gridname' class='block txt-m txt-bold align-r'></span>
<span id='nbimg' class='block txt-m txt-bold align-r'></span>
</div>
<div id="download" data-scene="" class='h-full w300 relative bg-white flex-child scroll-auto'>
<!-- Add Scene info on top -->
<ul id='toolbar' class='grid'>
<li id='band' class="col col--4 active" title="download" onclick="switchPane(this)">
<svg class='icon icon--l inline-block'><use xlink:href='#icon-minus'/></svg>
</li>
<li id='rgb' class="col col--4 " title="rgb" onclick="switchPane(this)">
<svg class='icon icon--l inline-block'><use xlink:href='#icon-menu'/></svg>
</li>
<li id='process' class="col col--4" title="process" onclick="switchPane(this)">
<svg class='icon icon--l inline-block'><use xlink:href='#icon-raster'/></svg>
</li>
</ul>
<div id='menu-content' class='relative'>
<section id='band' class="px12 py12 active">
<div class='txt-h5 mb12 color-black'>Download Files</div>
<!-- List of files to download -->
<ul></ul>
</section>
<section id='rgb' class="px12 py12">
<div class='txt-h5 mb12 color-black'>Band Combinations</div>
<div class='select-container wmax-full'>
<select id='rgb-selection' class='select select--s select--stroke wmax-full color-black'></select>
<div class='select-arrow color-black'></div>
</div>
<div id='rgb-buttons' class='align-center px6 py6'>
<div class='select-container'>
<select id='r' disabled class='select select--stroke select--stroke--2 color-red mx6 my6'></select>
</div>
<div class='select-container'>
<select id='g' disabled class='select select--stroke select--stroke--2 color-green mx6 my6'></select>
</div>
<div class='select-container'>
<select id='b' disabled class='select select--stroke select--stroke--2 color-blue mx6 my6'></select>
</div>
</div>
</section>
<section id='process' class="px12 py12">
<div class='txt-h5 mb12 color-black'>Band ratios</div>
<div class='select-container w-full'>
<select id='ratio-selection' class='select select--s select--stroke w-full color-black'></select>
<div class='select-arrow color-black'></div>
</div>
</section>
<div id='download-options'>
<hr class='txt-hr mt-neg3 mb-neg6'>
<div id='img-preview' class="px6 py6 relative">
<div class="overview">
<img class="img-responsive img-grid none">
<span class="loading"></span>
</div>
</div>
<div id='download-button' class="relative">
<button id='btn-dwn' class='btn btn--stroke btn--stroke--2 mx6'>Download</button>
<a id='btn-dwn-ready' disabled class='btn btn--stroke btn--stroke--2 mx6 none' href="" target="_blank" download><div class="loading loading--s"></div></a>
<hr class='txt-hr my6'>
<div class='prose'>
<small class='px12'>Full resolution download. Processing made live on AWS lambda function via RemotePixel api. File creation takes between 20-25sec.</small>
</div>
</div>
</div>
<!-- Download button here -->
</div>
</div>
<div id='scenes-preview' class="h-full scroll-auto grid relative flex-child"></div>
</div>
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.min.js'></script>
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.expand = 500;
window.lazySizesConfig.loadMode = 2;
</script>
<script src="/js/lazysizes.min.js" async=""></script>
<script src="/js/app.js" charset="utf-8"></script>
</body>
</html>