This map visualizes max lat/lon landsat scene capture locations. The data is available via the Landsat Ingester project as a link in the README of that repo.
This map uses CartoDB to view points of LandSat imagery capture across the globe with links to the images as TIFs in the tooltip ID for each point; they are arranged as a choropleth map according to the average percent of cloud cover that might obscure the image capture process.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>LandSat Clouds | CartoDB</title> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
| <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" /> | |
| <style> | |
| html, body { | |
| background: #62d1ff; | |
| color: #333; | |
| font: 'Helvetica-Neue', sans-serif; | |
| height: 100vh; | |
| margin: 0; | |
| padding: 0; | |
| overflow-x: hidden; | |
| width: 100%; | |
| } | |
| #header { | |
| color: #01f915; | |
| background-color: #000F01; | |
| font-family: 'Helvetica-Neue', sans-serif; | |
| font-size: 45px; | |
| font-weight: bold; | |
| padding-top: 10px; | |
| text-align: center; | |
| text-transform: uppercase; | |
| } | |
| #map { | |
| background-repeat: no-repeat; | |
| background-size: contain; | |
| bottom: 0; | |
| left: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 60px; | |
| } | |
| #background-wrap { | |
| bottom: 0; | |
| left: 0; | |
| padding-top: 50px; | |
| pointer-events: none; | |
| position: fixed; | |
| right: 0; | |
| top: 0; | |
| z-index: 1; | |
| } | |
| /* KEYFRAMES */ | |
| @-webkit-keyframes animateCloud { | |
| 0% { | |
| margin-left: -1000px; | |
| } | |
| 100% { | |
| margin-left: 100%; | |
| } | |
| } | |
| @-moz-keyframes animateCloud { | |
| 0% { | |
| margin-left: -1000px; | |
| } | |
| 100% { | |
| margin-left: 100%; | |
| } | |
| } | |
| @keyframes animateCloud { | |
| 0% { | |
| margin-left: -1000px; | |
| } | |
| 100% { | |
| margin-left: 100%; | |
| } | |
| } | |
| /* ANIMATIONS */ | |
| .x1 { | |
| -webkit-animation: animateCloud 35s linear infinite; | |
| -moz-animation: animateCloud 35s linear infinite; | |
| animation: animateCloud 35s linear infinite; | |
| -webkit-transform: scale(0.65); | |
| -moz-transform: scale(0.65); | |
| transform: scale(0.65); | |
| } | |
| .x2 { | |
| -webkit-animation: animateCloud 20s linear infinite; | |
| -moz-animation: animateCloud 20s linear infinite; | |
| animation: animateCloud 20s linear infinite; | |
| -webkit-transform: scale(0.3); | |
| -moz-transform: scale(0.3); | |
| transform: scale(0.3); | |
| } | |
| .x3 { | |
| -webkit-animation: animateCloud 30s linear infinite; | |
| -moz-animation: animateCloud 30s linear infinite; | |
| animation: animateCloud 30s linear infinite; | |
| -webkit-transform: scale(0.5); | |
| -moz-transform: scale(0.5); | |
| transform: scale(0.5); | |
| } | |
| .x4 { | |
| -webkit-animation: animateCloud 18s linear infinite; | |
| -moz-animation: animateCloud 18s linear infinite; | |
| animation: animateCloud 18s linear infinite; | |
| -webkit-transform: scale(0.4); | |
| -moz-transform: scale(0.4); | |
| transform: scale(0.4); | |
| } | |
| .x5 { | |
| -webkit-animation: animateCloud 25s linear infinite; | |
| -moz-animation: animateCloud 25s linear infinite; | |
| animation: animateCloud 25s linear infinite; | |
| -webkit-transform: scale(0.55); | |
| -moz-transform: scale(0.55); | |
| transform: scale(0.55); | |
| } | |
| /* OBJECTS */ | |
| .cloud { | |
| background: #fff; | |
| background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1)); | |
| background: -webkit-linear-gradient(top, #fff 5%,#f1f1f1 100%); | |
| background: -o-linear-gradient(top, #fff 5%,#f1f1f1 100%); | |
| background: -ms-linear-gradient(top, #fff 5%,#f1f1f1 100%); | |
| background: linear-gradient(top, #fff 5%,#f1f1f1 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 ); | |
| -webkit-border-radius: 100px; | |
| -moz-border-radius: 100px; | |
| border-radius: 100px; | |
| -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); | |
| box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); | |
| height: 120px; | |
| position: relative; | |
| width: 350px; | |
| } | |
| .cloud:after, .cloud:before { | |
| background: #fff; | |
| content: ''; | |
| position: absolute; | |
| z-indeX: -1; | |
| } | |
| .cloud:after { | |
| -webkit-border-radius: 100px; | |
| -moz-border-radius: 100px; | |
| border-radius: 100px; | |
| height: 100px; | |
| left: 50px; | |
| top: -50px; | |
| width: 100px; | |
| } | |
| .cloud:before { | |
| -webkit-border-radius: 200px; | |
| -moz-border-radius: 200px; | |
| border-radius: 200px; | |
| width: 180px; | |
| height: 180px; | |
| right: 50px; | |
| top: -90px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="header">LandSat CloudCover</div> | |
| <div id="map"></div> | |
| <div id="background-wrap"> | |
| <div class="x1"> | |
| <div class="cloud"></div> | |
| </div> | |
| <div class="x2"> | |
| <div class="cloud"></div> | |
| </div> | |
| <div class="x3"> | |
| <div class="cloud"></div> | |
| </div> | |
| <div class="x4"> | |
| <div class="cloud"></div> | |
| </div> | |
| <div class="x5"> | |
| <div class="cloud"></div> | |
| </div> | |
| </div> | |
| <!-- include cartodb.js library --> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script> | |
| <script> | |
| window.onload = function() { | |
| var vizjson_url = 'https://team.cartodb.com/u/aureliamoser/api/v2/viz/4f443e6a-da1c-11e4-bd06-0e49835281d6/viz.json'; | |
| var options = { | |
| zoom: 3, | |
| cartodb_logo:false, | |
| } | |
| cartodb.createVis(map, vizjson_url, options) | |
| .done(function(vis, layers) { | |
| // do stuff | |
| console.log("Map successfully created"); | |
| }) | |
| .error(function(err) { | |
| // report error | |
| console.log("An error occurred: " + err); | |
| }); | |
| } | |
| </script> | |
| <!-- snaps to Valentin Radulescu for your tutorial on css3 animations! --> | |
| </body> | |
| </html> |
