auremoser/README.md

## README.md

      
    Raw
  

              README.md
            
          
    [project] weather-based transport recs for NYC
####DESCRIPTION
This is a short little experiment to fuse the forcast.io api with some public data about transportation possibilities in NYC. If the weather is nice, bike options are shown, if it's cold or rainy, subways are highlighted and "danger zones" for bikers centered around CityBike stations as a centroid are displayed, if the weather is "wintery mix" you are encouraged to seek a subway entrance.
For context a small div in the upper left displays the current temperature and precipitation type, if any for NYC's lat/long.
main.js hosts pretty much all the code that wires up the switches, so check it out for logic :).
<iframe width="100%" height="520" frameborder="0" src="https://auremoser.cartodb.com/viz/804b5998-51b0-11e4-bc35-0e018d66dc29/embed_map" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
####DATA

Bike Parking (2013) : dataset
Bike Routes (2014) : dataset
Danger Stations (2014) : dataset | blogpost
Subway Entrances (2010) : dataset


## index.html
<!DOCTYPE html>
<html>
	<head>
		<title>Meteorologic</title>
		<link rel="shortcut icon" href="https://raw.githubusercontent.com/auremoser/metrologic/master/assets/favicon.ico" type="image/x-icon">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css"/>
		<style>
			html, body {
			  background-color: #d3d3d3;
			  height: 100%;
			  margin: 0;
			  padding: 0;
			}
			#title {
			  color: #252525;
			  font-family: 'Helvetica-Neue', sans-serif;
			  font-size: 24px;
			  opacity: 0.4;
			  padding-top: 10px;
			  padding-left: 20px;
			  text-align: left;
			 /* text-transform: uppercase;*/
			}
			#map {
			  background-repeat: no-repeat;
			  background-size: contain;
			  bottom: 0;
			  left: 0;
			  position: absolute;
			  right: 0;
			  top: 40px;
			}
			#weather {
			  background-color: rgba(255,255,255,0.9);
			  border-radius: 5px;
			  color: #252525;
			  font-family: 'Helvetica-Neue', sans-serif;
			  font-size: 14px;
			  left: 70px;
			  opacity: 0.7;
			  padding: 8px;
			  position: absolute;
			  text-align: left;
			  top: 62px;
			  width: 180px;
			}
			/*#snow{
				background: none;
				font-family: Androgyne;
				background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
				height: 100%;
				left: 0;
				opacity: 0.5;
				position: absolute;
				top: 0;
				width: 100%;
				z-index:1;
				-webkit-animation: snow 10s linear infinite;
				-moz-animation: snow 10s linear infinite;
				-ms-animation: snow 10s linear infinite;
				animation: snow 10s linear infinite;
			}
				@keyframes snow {
			  	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
			  	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
			  	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
				}
				@-moz-keyframes snow {
			  	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
			  	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
			  	100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
				}
				@-webkit-keyframes snow {
			  	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
			  	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
			  	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
				}
				@-ms-keyframes snow {
			  	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
			  	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
			  	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
				}*/
		</style>
	</head>
	<body>
		<div id="title">Metrologic | NYC Transit Tips ∪ Weather</div>
		<div id="snow"></div>
		<div id="map" style="width: 100%"></div>
		<div id="weather"><div>

		<!-- include jquery  -->
		<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
		<!-- include google maps library *before* load cartodb.js -->
		<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<!-- include cartodb.js library -->
		<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
		<script src="main.js"></script>
	</body>
</html>

## main.js
'use strict'

function main() {
  var vis;

  var layerUrl = 'https://auremoser.cartodb.com/api/v2/viz/804b5998-51b0-11e4-bc35-0e018d66dc29/viz.json';

  var options = {
    // zoom projection to adjust starting point zoom
    zoom: 12,
    // legit_lat: 40.7127,
    // legit_lon: -74.0059,
    center_lat: 40.7217,
    center_lon: -74.0059,
    cartodb_logo: false,
    layer_selector: true,
  }

  cartodb.createVis('map', layerUrl, options)
    .done(function(vis, layers) {
      	console.log('layers', layers)
      	window.vis = vis;
      	window.overlay = vis.getLayers()[1];
      	window.layers = layers;
      	weather();
      })

    .on('error', function() {
      cartodb.log.log("some error occurred");
    });

}

var layerIds = {
	'subwayStations':0,
	'bikeParking':1,
	'bikeRoutes':2,
	'dangerousStations':3,
};

function weather(){
	var apiKey = '8d8290d21b239f27da30f07296f3adfe';
	var url = 'https://api.forecast.io/forecast/';
	var lat = 40.7217;
	var lon = -74.0059;
	var data;

	$.getJSON(url + apiKey + "/" + lat + "," + lon + "?callback=?", function(data) {
		console.log(data);
		// pricipType: rain, snow, sleet, hail, none
		var precipitation = data.currently.precipType ? data.currently.precipType : 'none';
		var precipIntensity = data.daily.precipIntensityMax ? data.daily.precipIntensityMax : 'low';
		$('#weather').html('Current Temp: ' + data.currently.temperature + ' ˚F' + ' Precipitation: ' + precipitation + ' <a href="ttp://s3.amazonaws.com/thejefflarson/ethics.html" style="background-color: #7fbfff; opacity: 0.7">Snowmaggedon Index:</a> ' + precipIntensity);
		// access sublayer and hide directly, but layer_selector does not reflect change
		// window.overlay.getSubLayers()[1].hide()

		// get the layer selector button corresponding to our sublayer
		var temp = parseFloat(data.currently.temperature );
		// winter mix (freezing and bad precipitation) = don't show bike options; show bike danger zones + subways
		if(temp < 32 || (precipitation === 'sleet' || precipitation === 'hail')){
			disableLayer('bikeParking');
			disableLayer('bikeRoutes');
		//show snow falling only if it is heavy snow
			if(precipIntensity > 0.2) $('#snow').css({opacity:1});
		}
		// if above freezing = don't show dangerzones, show bikes + subways
		if(temp > 32 && temp < 60 || (precipitation === 'rain')) {
			disableLayer('dangerousStations');
		}
		// if nice weather = show bikes, encourage biking
		else if(temp >= 60 && (precipitation === 'none')) {
			disableLayer('subwayStations');
			disableLayer('dangerousStations');
		}
	});
}

function disableLayer(layerId){
	var layerIndex = layerIds[layerId];

	var layerSelectorBtn = $('.cartodb-dropdown li')[layerIndex];
	//trigger click!
	$(layerSelectorBtn).trigger('click');
}

$(main);
// $(weather);

## metrologic-full.jpg

      
    Raw
  

              metrologic-full.jpg
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<title>Meteorologic</title>
	<link rel="shortcut icon" href="https://raw.githubusercontent.com/auremoser/metrologic/master/assets/favicon.ico" type="image/x-icon">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css"/>
	<style>
	html, body {
	background-color: #d3d3d3;
	height: 100%;
	margin: 0;
	padding: 0;
	}
	#title {
	color: #252525;
	font-family: 'Helvetica-Neue', sans-serif;
	font-size: 24px;
	opacity: 0.4;
	padding-top: 10px;
	padding-left: 20px;
	text-align: left;
	/* text-transform: uppercase;*/
	}
	#map {
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 40px;
	}
	#weather {
	background-color: rgba(255,255,255,0.9);
	border-radius: 5px;
	color: #252525;
	font-family: 'Helvetica-Neue', sans-serif;
	font-size: 14px;
	left: 70px;
	opacity: 0.7;
	padding: 8px;
	position: absolute;
	text-align: left;
	top: 62px;
	width: 180px;
	}
	/*#snow{
	background: none;
	font-family: Androgyne;
	background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
	height: 100%;
	left: 0;
	opacity: 0.5;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:1;
	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;
	}
	@keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
	}
	@-moz-keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
	}
	@-webkit-keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
	}
	@-ms-keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
	}*/
	</style>
	</head>
	<body>
	<div id="title">Metrologic \| NYC Transit Tips ∪ Weather</div>
	<div id="snow"></div>
	<div id="map" style="width: 100%"></div>
	<div id="weather"><div>

	<!-- include jquery -->
	<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
	<!-- include google maps library before load cartodb.js -->
	<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<!-- include cartodb.js library -->
	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	'use strict'

	function main() {
	var vis;

	var layerUrl = 'https://auremoser.cartodb.com/api/v2/viz/804b5998-51b0-11e4-bc35-0e018d66dc29/viz.json';

	var options = {
	// zoom projection to adjust starting point zoom
	zoom: 12,
	// legit_lat: 40.7127,
	// legit_lon: -74.0059,
	center_lat: 40.7217,
	center_lon: -74.0059,
	cartodb_logo: false,
	layer_selector: true,
	}

	cartodb.createVis('map', layerUrl, options)
	.done(function(vis, layers) {
	console.log('layers', layers)
	window.vis = vis;
	window.overlay = vis.getLayers()[1];
	window.layers = layers;
	weather();
	})

	.on('error', function() {
	cartodb.log.log("some error occurred");
	});

	}

	var layerIds = {
	'subwayStations':0,
	'bikeParking':1,
	'bikeRoutes':2,
	'dangerousStations':3,
	};

	function weather(){
	var apiKey = '8d8290d21b239f27da30f07296f3adfe';
	var url = 'https://api.forecast.io/forecast/';
	var lat = 40.7217;
	var lon = -74.0059;
	var data;

	$.getJSON(url + apiKey + "/" + lat + "," + lon + "?callback=?", function(data) {
	console.log(data);
	// pricipType: rain, snow, sleet, hail, none
	var precipitation = data.currently.precipType ? data.currently.precipType : 'none';
	var precipIntensity = data.daily.precipIntensityMax ? data.daily.precipIntensityMax : 'low';
	$('#weather').html('Current Temp: ' + data.currently.temperature + ' ˚F' + ' Precipitation: ' + precipitation + ' <a href="ttp://s3.amazonaws.com/thejefflarson/ethics.html" style="background-color: #7fbfff; opacity: 0.7">Snowmaggedon Index:</a> ' + precipIntensity);
	// access sublayer and hide directly, but layer_selector does not reflect change
	// window.overlay.getSubLayers()[1].hide()

	// get the layer selector button corresponding to our sublayer
	var temp = parseFloat(data.currently.temperature );
	// winter mix (freezing and bad precipitation) = don't show bike options; show bike danger zones + subways
	if(temp < 32 \|\| (precipitation === 'sleet' \|\| precipitation === 'hail')){
	disableLayer('bikeParking');
	disableLayer('bikeRoutes');
	//show snow falling only if it is heavy snow
	if(precipIntensity > 0.2) $('#snow').css({opacity:1});
	}
	// if above freezing = don't show dangerzones, show bikes + subways
	if(temp > 32 && temp < 60 \|\| (precipitation === 'rain')) {
	disableLayer('dangerousStations');
	}
	// if nice weather = show bikes, encourage biking
	else if(temp >= 60 && (precipitation === 'none')) {
	disableLayer('subwayStations');
	disableLayer('dangerousStations');
	}
	});
	}

	function disableLayer(layerId){
	var layerIndex = layerIds[layerId];

	var layerSelectorBtn = $('.cartodb-dropdown li')[layerIndex];
	//trigger click!
	$(layerSelectorBtn).trigger('click');
	}

	$(main);
	// $(weather);