This repository has been archived by the owner on Jun 14, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
329 lines (276 loc) · 14.6 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
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Search for Landsat-8 and Sentinel-2 Images">
<meta name="author" content="Vincent Sarago">
<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="Search for Landsat-8 and Sentinel-2 Images" />
<meta name="twitter:creator" content="@_VincentS_" />
<meta name="twitter:image:src" content="https://remotepixel.ca/img/satsearch.jpg" />
<meta property="og:title" content="Satellite Search" />
<meta property="og:url" content="https://remotepixel.ca/projects/satellitesearch.html" />
<meta property="og:image" content="https://remotepixel.ca/img/satsearch.jpg" />
<meta property="og:description" content="Search for Landsat-8 and Sentinel-2 Images" />
<meta property="og:site_name" content="Remote Pixel" />
<title>Remote Pixel | Satellite Search</title>
<!-- Mapbox JavaScript -->
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-supported/v0.1.2/mapbox-gl-supported.js'></script>
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/checkbox-slider.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/css/style.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60678866-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body data-target=".navbar-fixed-top">
<div class="content">
<div class="site-info in">
<div class="info">
<button type="button" class="close" onclick="showSiteInfo()">Close <i class="fa fa-close"></i></button>
<h2>Satellite Search</h2>
<p>A simple and light interface to search for Landsat-8 and Sentinel-2 Images</p>
<img class="img-responsive center" src="img/help_satsearch.gif">
<h4>Info</h4>
<p>Landsat and Sentinel image search results is powered by
<a href="https://github.com/sat-utils/sat-api" target="_blank">Developmentseed new Satellite API</a>.</p>
<p>Landsat and Sentinel images previews are from <a href="https://earthexplorer.usgs.gov" target="_blank">USGS Earth Explorer</a>
and <a href="http://sentinel-pds.s3-website.eu-central-1.amazonaws.com" target="_blank"> Sentinel on AWS S3</a>
(via <a href="http://www.sinergise.com" target="_blank">Sinergise</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>HowTo</h4>
<ul>
<li>Zoom / Pan map into your area of interest (AOI)</li>
<li>Set Sat Checkbox to the satellite you want (Sentinel-2 / Landsat-8)</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 (bottom in case of small screen)</li>
<li>Scroll through the available images</li>
<li>Click on AWS/USGS logo to access summary product page</li>
<li>Click on <i class="fa fa-download"></i> button to get more download option</li>
<li>Preview image bands combinations</li>
</ul>
<h6>Landsat Only</h6>
<p>Inside the download modal you can download a full
resolution (30m) image of the selected band combination.
Image is processed on-demand (about 20sec) and then available on AWS S3 RemotePixel bucket. (wait for the 'Ready' button).</p>
<p>The processed Landsat is in Top Of Atmosphere (TOA) reflectances and * 10000 to reduce disk usage.</p>
<p>Image is delivered as 16-bit data, for display purpose you'll have to scale the values between 0 and 255.</p>
<p>Note: Making Landsat RGB combination available at full resolution
(30m) cost money (AWS hosting and processing).
Depending on the usage, this feature could be disabled.
</p>
<h4>Processing Level</h4>
<p>Landsat 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 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>
<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>
<h4>Contact</h4>
<p>Questions or comments to <a href="mailto:contact@remotepixel.ca">contact@remotepixel.ca</a></p>
<h4>Thanks</h4>
<div class="thanks-images row">
<a href="https://www.mapbox.com" target="_blank" class="col-xs-3"><img class="img-responsive" src="img/mapbox.png"></a>
<a href="http://www.sinergise.com" target="_blank" class="col-xs-3"><img class="img-responsive" src="img/sinergise.png"></a>
<a href="https://developmentseed.org" target="_blank" class="col-xs-3"><img class="img-responsive" src="img/devseed.png"></a>
<a href="https://aws.amazon.com/" target="_blank" class="col-xs-3"><img class="img-responsive" src="img/awservice.png"></a>
</div>
<div class="site-version">Version: 3.0</div>
</div>
</div>
<div class="main-container">
<div id="map" class="map">
<div class="block-control-map">
<div>Landsat 8 / Sentinel 2</div>
<label class="checkbox-slider checkbox-slider-sm checkbox-slider-primary" >
<input id="sat-checkbox" type="checkbox"/><span></span>
</label>
</div>
<div class="bottom-right-button">
<a id="twitter" class="sharebutt" href="" title="Share on Twitter" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a id="linkedin" class="sharebutt" href="" title="Share on LinkedIn" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
<a id="facebook" class="sharebutt" href="" title="Share on Facebook" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<div class="sharebutt" onclick="showSiteInfo()">
<i class="fa fa-info fa-2x"></i>
</div>
</div>
<div class="loading-map">
<div class="middle-center">
<span>Loading</span>
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
</div><!--
@whitespace
--><div id="info-img" class="info-img">
<div class="list-img">
<span class="nodata-error">Click on Tile</span>
</div>
<span class="spin display-none"><i class="fa fa-spinner fa-spin"></i></span>
</div>
</div>
</div>
<div class="modal" id="modalGL" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="hmodal-info">
<p>Oh! your browser don't support webGL...
you are going to be redirected to a non-GL version
of Satellite Search.
</p>
<p>For a better experience try again with a webGL friendly browser.</p>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- Modal -->
<div class="modal" id="modalPreview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="img-preview"></div>
</div>
<!-- /.modal -->
<div class="modal" id="modalDownloadL8" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body row">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-12 dwn-bands"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-12 img-ovr">
<div class="dropdown button-inline">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Natural Color (4,3,2)
<span class="caret"></span>
</button>
<button class="btn btn-download" type="button" onclick="landsatdownload()">
<span>Download</span>
<i class="fa fa-spinner fa-spin"></i>
</button>
<a class="btn btn-download" href="" target="_blank" download>Ready</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li data-bands="[4,3,2]"><a class="on">Natural Color (4,3,2)</a></li>
<li data-bands="[7,6,4]"><a>False Color Urban (7,6,4)</a></li>
<li data-bands="[5,4,3]"><a>Color Infrared Vegetation (5,4,3)</a></li>
<li data-bands="[6,5,2]"><a>Agriculture (6,5,2)</a></li>
<li data-bands="[7,6,5]"><a>Atmospheric Penetration (7,6,5)</a></li>
<li data-bands="[5,6,2]"><a>Healthy Vegetation (5,6,2)</a></li>
<li data-bands="[5,6,4]"><a>Land/Water (5,6,4)</a></li>
<li data-bands="[7,5,3]"><a>Natural With Atmo Removal (7,5,3)</a></li>
<li data-bands="[7,5,4]"><a>Shortwave Infrared (7,5,4)</a></li>
<li data-bands="[6,5,4]"><a>Vegetation Analysis (6,5,4)</a></li>
<li data-bands="ndvi"><a>NDVI Normalized Vegetation index</a></li>
</ul>
</div>
<div data-id="" class="overview">
<span><i class="fa fa-spinner fa-spin"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal" id="modalDownloadS2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body row">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dwn-bands"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-12 img-ovr">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Natural Color (4,3,2)
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li data-bands="04,03,02"><a class="on">Natural Color (4,3,2)</a></li>
<li data-bands="08,04,03"><a>Color Infrared Vegetation (8,4,3)</a></li>
<li data-bands="12,11,05"><a>False Color Urban (12,11,5) 20m</a></li>
<li data-bands="ndvi"><a>NDVI Normalized Vegetation index</a></li>
</ul>
</div>
<div data-id="" class="overview">
<span><i class="fa fa-spinner fa-spin"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal -->
<!-- jQuery -->
<script src="/js/jquery.js"></script>
<!-- <script src="/js/jquery.easing.min.js"></script> -->
<script src="/js/moment.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.lazyClass = 'img-item';
window.lazySizesConfig.expand = 500;
window.lazySizesConfig.loadMode = 2;
</script>
<script src="/js/lazysizes.min.js" async=""></script>
<!-- Custom JavaScript -->
<script src="/js/app.js" charset="utf-8"></script>
</body>
</html>