MateoV · January 19, 2012 21:43
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset='utf-8' />
  <title>Tornadoes in the U.S. - 2010</title>
  <script src='http://mapbox.com/wax/dist/modestmaps.js' type='text/javascript'></script>
  <script src='http://mapbox.com/wax/dist/wax.mm.min.js' type='text/javascript'></script>
  <link href='http://mapbox.com/wax/css/controls.css' rel='stylesheet' type='text/css' />
  
  <style type='text/css'>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      overflow: hidden;
    }
    p {
      line-height: 20px;
    }
    a {
      color: #29A1E1;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    #mymap {
      position: absolute;
      top: 0;
      right: 400px;
      left: 0;
      height: 100%;
    }
    #sidebar {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 359px;
      background: #111;
      color: #fff;
      border-left:1px solid #000;
      padding: 20px;
    }
    .source {
      font-size: 80%;
    }
    .wax-tooltip {
      right: 10px;
      left: auto;
    }
  </style>
 </head>

 <body>
  <div id='sidebar'>
    <h2>Tornadoes in the U.S. - 2010</h2>
    <p>This map shows every tornado that occurred in the United States in 2010. Sizes of the dots are based on F-scale. Hover over them to view detailed statistics.</p>
    <p><span class='source'>Source: <a href='http://www.weather.gov/'>NOAA's National Weather Service</a></span></p>
  </div>
  <div id='mymap'></div>
  
  <script type='text/javascript'>
    // Your map's TileJSON url. Define your map layers here.
    var url = 'http://api.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jul,mapbox.world-borders-light,mapbox.tornadoes-2010.jsonp';
    // Shortening of 'com.modestmaps'
    var mm = com.modestmaps;
    
    wax.tilejson(url, function(tilejson) {
      // Set up a new map in a div with id 'mymap'
      var m = new mm.Map('mymap',
      // Add a new map layer with Wax's connector
      new wax.mm.connector(tilejson));
      // Add zoom controls
      wax.mm.zoomer(m, tilejson).appendTo(m.parent);
      // Add interactivity (tooltips)
      var interaction = wax.mm.interaction(m, tilejson);
      // Set the initial center and zoom level
      m.setCenterZoom(new mm.Location(39, -98), 5);
    });
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Tornadoes in the U.S. - 2010</title>
	<script src='http://mapbox.com/wax/dist/modestmaps.js' type='text/javascript'></script>
	<script src='http://mapbox.com/wax/dist/wax.mm.min.js' type='text/javascript'></script>
	<link href='http://mapbox.com/wax/css/controls.css' rel='stylesheet' type='text/css' />

	<style type='text/css'>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	overflow: hidden;
	}
	p {
	line-height: 20px;
	}
	a {
	color: #29A1E1;
	text-decoration: none;
	}
	a:hover {
	text-decoration: underline;
	}
	#mymap {
	position: absolute;
	top: 0;
	right: 400px;
	left: 0;
	height: 100%;
	}
	#sidebar {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 359px;
	background: #111;
	color: #fff;
	border-left:1px solid #000;
	padding: 20px;
	}
	.source {
	font-size: 80%;
	}
	.wax-tooltip {
	right: 10px;
	left: auto;
	}
	</style>
	</head>

	<body>
	<div id='sidebar'>
	<h2>Tornadoes in the U.S. - 2010</h2>
	<p>This map shows every tornado that occurred in the United States in 2010. Sizes of the dots are based on F-scale. Hover over them to view detailed statistics.</p>
	<p><span class='source'>Source: <a href='http://www.weather.gov/'>NOAA's National Weather Service</a></span></p>
	</div>
	<div id='mymap'></div>

	<script type='text/javascript'>
	// Your map's TileJSON url. Define your map layers here.
	var url = 'http://api.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jul,mapbox.world-borders-light,mapbox.tornadoes-2010.jsonp';
	// Shortening of 'com.modestmaps'
	var mm = com.modestmaps;

	wax.tilejson(url, function(tilejson) {
	// Set up a new map in a div with id 'mymap'
	var m = new mm.Map('mymap',
	// Add a new map layer with Wax's connector
	new wax.mm.connector(tilejson));
	// Add zoom controls
	wax.mm.zoomer(m, tilejson).appendTo(m.parent);
	// Add interactivity (tooltips)
	var interaction = wax.mm.interaction(m, tilejson);
	// Set the initial center and zoom level
	m.setCenterZoom(new mm.Location(39, -98), 5);
	});
	</script>
	</body>
	</html>