Created
April 10, 2014 00:37
-
-
Save amyleew/10333569 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
} | |
#forecasts h2 { | |
font-size: 14px; | |
text-transform:uppercase; | |
margin-top: 45px; | |
} | |
#forecasts h3 { | |
font-size: 12px; | |
text-transform:uppercase; | |
} | |
#forecasts h3.time { | |
text-transform:lowercase; | |
} | |
#forecasts img, #forecasts h3 { | |
display: none; } | |
#forecasts .forecast-0 h3, #forecasts .forecast-0 img { | |
display: inline; } | |
#map { <!-- my map --> | |
width: 100%; | |
height: 1000px; | |
; | |
} | |
.map { <!-- emma's map --> | |
width: 100%; | |
height: 1000px; | |
; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> | |
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> | |
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>Full Hourly</title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<!-- Place favicon.ico and apple-touch-icon.png in the root directory --> | |
<link rel="stylesheet" href="css/normalize.css"> | |
<link rel="stylesheet" href="css/main.css"> | |
<!-- Leaflet js code for Mapbox --> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> | |
<!-- End Leaflet --> | |
<!-- script code for combining JS --> | |
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script> | |
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> | |
<!-- end script code for JS combos --> | |
<script src="js/vendor/modernizr-2.6.2.min.js"></script> | |
</head> | |
<body> | |
<!--[if lt IE 7]> | |
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> | |
<![endif]--> | |
<!-- Add your site or application content here --> | |
<div id="map"></div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var map = L.map('map').setView([37.77, -122.46], 13, {zoomControl: false}); | |
// disable zoom handlers | |
map.touchZoom.disable(); | |
map.doubleClickZoom.disable(); | |
map.scrollWheelZoom.disable(); | |
// disable tap handler, if present. | |
if (map.tap) map.tap.disable(); | |
// pull in mapbox design | |
L.tileLayer('http://{s}.tiles.mapbox.com/v3/mslee.hke585p2/{z}/{x}/{y}.png', { | |
maxZoom: 18, | |
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>' | |
}).addTo(map); | |
// pull in all API data | |
var req = $.ajax({ | |
url: 'http://api.wunderground.com/api/419ec08f527a6f9b/geolookup/conditions/hourly/q/CA/San_Francisco.json', | |
dataType: 'jsonp', | |
type: "GET" | |
}); | |
req.done(function(l1) { | |
var stations = l1.location.nearby_weather_stations.pws.station; | |
for (var i=0; i < stations.length; i++) { | |
// hard populate neighborhood names | |
var hood = ['',"SOMA", "Upper Mission", "Mission Bay", "The Castro"], | |
id = stations[i].id, | |
// var ids = [" ", "KCASANFR259", "KCASANFR53", "KPCASANF2"] | |
// var titles = ["SOMA", "Upper Mission", "Mission Bay", "The Castro"] | |
lat = stations[i].lat, | |
lon = stations[i].lon; | |
for (var j=0; j < stations.length; j++) { | |
var hourly = l1.hourly_forecast, | |
hour = hourly[j].FCTTIME.civil, | |
condition = hourly[j].condition, | |
temp = hourly[j].temp.english; | |
} | |
// add data to right neighborhood on map | |
switch (id) { | |
case "KCASANFR58": | |
console.log("We are looking "+hood[1]+", which is ID "+id); | |
console.log("... at "+hour+", it was "+condition+" and "+temp+" ºF"); | |
L.marker([lat, lon]).addTo(map).bindPopup(hood[1]).openPopup(); | |
break; | |
case "KCASANFR259": | |
//console.log("We are looking "+hood[2]+", which is ID "+id); | |
L.marker([lat, lon]).addTo(map).bindPopup(hood[2]); | |
break; | |
case "KCASANFR53": | |
//console.log("We are looking "+hood[3]+", which is ID "+id); | |
L.marker([lat, lon]).addTo(map).bindPopup(hood[3]); | |
break; | |
case "KPCASANF2": | |
//console.log("We are looking "+hood[4]+", which is ID "+id); | |
L.marker([lat, lon]).addTo(map).bindPopup(hood[4]); | |
break; | |
//default: | |
//document.write("Sorry, not sure what's the problem."); | |
} | |
} | |
}); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment