amyleew/jsbin.wetux.css

## jsbin.wetux.css
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;
;
}

## jsbin.wetux.html
<!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 Display 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>

## jsbin.wetux.js
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
		}).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,
          icon = hourly[j].icon_url,
          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("<h2>"+hood[1]+"</h2>"+"<h3> AT "+hour+"</h3>"+"Weather Conditions are "+condition+"<br> Temperature is "+temp).openPopup();
      break;
   case "KCASANFR259":
      //console.log("We are looking "+hood[2]+", which is ID "+id);
      //console.log("... at  "+hour+", it was "+condition+" and "+temp+" ºF");
      L.marker([lat, lon]).addTo(map).bindPopup("<h2>"+hood[2]+"</h2>"+"<h3> AT "+hour+"</h3>"+"Weather Conditions are "+condition+"<br> Temperature is "+temp);
      break;
   case "KCASANFR53":
      //console.log("We are looking "+hood[3]+", which is ID "+id);
      L.marker([lat, lon]).addTo(map).bindPopup("<h2>"+hood[3]+"</h2>"+"<h3> AT "+hour+"</h3>"+"Weather Conditions are "+condition+"<br> Temperature is "+temp);
      break;
   case "KPCASANF2":
      //console.log("We are looking "+hood[4]+", which is ID "+id);
      L.marker([lat, lon]).addTo(map).bindPopup("<h2>"+hood[4]+"</h2>"+"<h3> AT "+hour+"</h3>"+"Weather Conditions are "+condition+"<br> Temperature is "+temp);
      break;
   //default:
      //document.write("Sorry, not sure what's the problem.");
  }
}
  }

});
	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;
	;
	}
	<!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 Display 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>
	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
	}).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,
	icon = hourly[j].icon_url,
	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("<h2>"+hood[1]+"</h2>"+"<h3> AT "+hour+"</h3>"+"Weather Conditions are "+condition+"<br> Temperature is "+temp).openPopup();
	break;
	case "KCASANFR259":
	//console.log("We are looking "+hood[2]+", which is ID "+id);
	//console.log("... at "+hour+", it was "+condition+" and "+temp+" ºF");
	L.marker([lat, lon]).addTo(map).bindPopup("<h2>"+hood[2]+"</h2>"+"<h3> AT "+hour+"</h3>"+"Weather Conditions are "+condition+"<br> Temperature is "+temp);
	break;
	case "KCASANFR53":
	//console.log("We are looking "+hood[3]+", which is ID "+id);
	L.marker([lat, lon]).addTo(map).bindPopup("<h2>"+hood[3]+"</h2>"+"<h3> AT "+hour+"</h3>"+"Weather Conditions are "+condition+"<br> Temperature is "+temp);
	break;
	case "KPCASANF2":
	//console.log("We are looking "+hood[4]+", which is ID "+id);
	L.marker([lat, lon]).addTo(map).bindPopup("<h2>"+hood[4]+"</h2>"+"<h3> AT "+hour+"</h3>"+"Weather Conditions are "+condition+"<br> Temperature is "+temp);
	break;
	//default:
	//document.write("Sorry, not sure what's the problem.");
	}
	}
	}

	});