Skip to content

Instantly share code, notes, and snippets.

@rfriberg

rfriberg/index.html

Created January 9, 2014 21:57
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 rfriberg/8342814 to your computer and use it in GitHub Desktop.
Save rfriberg/8342814 to your computer and use it in GitHub Desktop.
Download ZIP
Climate Stations UTFGrid
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link
href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css'
rel='stylesheet' />
<style>
body {
margin:0;
padding:0;
background-color:#454545;
color:#efefef;
}
h2{
color:#fafafa;
margin-left:20px;
margin-bottom:5px;
letter-spacing:1pt;
}
h4{
font-weight:normal;
margin-top:0;
margin-left:20px;
letter-spacing:1pt;
}
#map {
width:100%;
height:550px;
background-color:#fff;
margin:0px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
}
/* MAP TOOLTIP */
.map-tooltip, .map-tooltip-0{
width: 400px;
height:100px;
overflow:show;
right: 145px;
padding:0;
margin:0;
background-image: none;
background-color:none;
}
.map-tooltip .imgWrapper{
border:3px solid #454545;
border-bottom-width:6px;
background-color:#454545;
letter-spacing: 0.075em;
font-family:"Trebuchet MS", Helvetica, sans-serif;
height:270px !important;
}
.map-tooltip .title{
color:#efefef;
font-size:10pt;
margin:0;
padding:0px;
text-align:center;
}
.map-tooltip img{
margin-bottom:7px;
}
.totalsText{
padding:0;
margin:2px;
margin-left:5px;
color:#efefef;
font-size:9pt;
letter-spacing: 0.075em;
font-family:"Trebuchet MS", Helvetica, sans-serif;
}
#totalPrecip{
color:#B6CAFD;
float:left;
}
#totalElev{
float:right;
width:140px;
padding-left: 10px;
color:#ccc;
}
#totalSnow{
color:#fff;
clear:both;
}
.hl{
font-weight:bold;
font-size:10pt;
}
/* LEGEND */
#legend{
padding:5px 10px;
margin:10px;
color:#efefef;
}
#legend span{
padding: 2px 10px;
font-size:10pt;
opacity:0.9;
}
#legend .disclaimer{
font-size:10pt;
color:#bfbfbf;
font-weight:normal;
letter-spacing: 0.5pt;
}
</style>
</head>
<body>
<div id='map'></div>
<h2>U.S. Weather Stations</h2>
<h4>Average Temperature Across the U.S.</h4>
<div id='legend'>
<span style='background-color:#0000CD'>&lt; 32&deg; </span>
<span style='background-color:#3F3BC1'> 32-40&deg; </span>
<span style='background-color:#7F76B6'> 40-45&deg; </span>
<span style='background-color:#BFB1AB;color:#333'> 45-50&deg; </span>
<span style='background-color:#FFEDA0;color:#333'> 50-55&deg; </span>
<span style='background-color:#FFBE84;color:#333'> 55-60&deg; </span>
<span style='background-color:#FF9069'> 60-65&deg; </span>
<span style='background-color:#FF614E'> 65-70&deg; </span>
<span style='background-color:#FF3333'> &gt; 70&deg;</span>
<p class='disclaimer'>Gradient shows average temperature in degrees-Farenheit across the contiguous U.S.<br>Weather stations show temperature and precipitation averages over 30-year period.</p>
</div>
<script>
mapbox.load(['trulia.us-stations', 'rfriberg.map-lgtxt16t'], function(data) {
var map = mapbox.map('map');
map.ui.zoomer.add();
map.addLayer(data[1].layer);
map.addLayer(data[0].layer);
map.interaction.auto();
//map.getLayerAt(1).parent.style.opacity = 0.5; // to set layer opacity
map.setZoomRange(2, 9);
map.zoom(4).center({ lat: 39, lon: -95 });
// Attribute map
map.ui.attribution.add()
.content('<a href="http://www.trulia.com">Trulia</a> | <a href="http://mapbox.com/about/maps">MapBox</a>');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment