Skip to content

Instantly share code, notes, and snippets.

@auremoser
Last active October 6, 2015 20:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save auremoser/0a028ebe87166402d6e4 to your computer and use it in GitHub Desktop.
Save auremoser/0a028ebe87166402d6e4 to your computer and use it in GitHub Desktop.
LandSat Cloudy Map

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment