Skip to content

Instantly share code, notes, and snippets.

@stuartlynn
Created November 7, 2017 14:59
Show Gist options
  • Save stuartlynn/9d06c6cddeb430d5cb607423403e5356 to your computer and use it in GitHub Desktop.
Save stuartlynn/9d06c6cddeb430d5cb607423403e5356 to your computer and use it in GitHub Desktop.
Katrina
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<!-- 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]-->
<style>
html,body, #map{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#title{
position:absolute;
left:5%;
top:10%;
z-index:2;
color:grey;
}
</style>
</head>
<body>
<div id='title'>
<h1>Hurricane Katrina</h1>
<h3>NEXRad</h3>
</div>
<div id="map"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8">
var css = "#katrina{\
polygon-fill: transparent;\
polygon-opacity: 0.8;\
line-color: #FFF;\
line-width: 0;\
line-opacity: 1;\
}\
#katrina [ value <= 59.5] {\
polygon-fill: #B10026;\
}\
#katrina [ value <= 52] {\
polygon-fill: #E31A1C;\
}\
#katrina [ value <= 46] {\
polygon-fill: #FC4E2A;\
}\
#katrina [ value <= 39.5] {\
polygon-fill: #FD8D3C;\
}\
#katrina [ value <= 33.5] {\
polygon-fill: #FEB24C;\
}\
#katrina [ value <= 27] {\
polygon-fill: #FED976;\
}\
#katrina [ value <= 21] {\
polygon-fill: #FFFFB2;\
}"
window.onload = function() {
var sql = new cartodb.SQL({ user: 'stuartlynn' });
console.log("LOADED")
sql.execute("SELECT distinct(sweeptime) FROM stuartlynn.katrina order by sweeptime").done(function(data) {
console.log('DATA IS DATA ', data)
var map = new L.Map('map', {
zoomControl: false,
center: [43, 0],
zoom: 3
});
map.fitBounds([ [31.147006308556566, -76.86035156249999],[28.168875180063345,-107.16064453125]])
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
var times = data.rows.map(function(d){return d.sweeptime})
console.log(times, data )
var duration = 30;
var frameCount = times.length
var perFrame = duration*1.0/frameCount
var frameNo = 0;
var layers = []
times.forEach(function(time,index){
cartodb.createLayer(map, {
user_name: 'stuartlynn',
type: 'cartodb',
sublayers: [{
sql: "SELECT * FROM stuartlynn.katrina where sweeptime='"+time+"'",
cartocss: css
}]
})
.addTo(map)
.done(function(layer){
layers.push(layer)
if (index >0){
layer.setOpacity(0);
}
}) // add the layer to our map which already contains 1 sublayer
});
setInterval(function(){
layers[frameNo].setOpacity(0)
frameNo+=1;
frameNo = frameNo%frameCount
layers[frameNo].setOpacity(1)
},perFrame*100)
})
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment