yhahn/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src='http://underscorejs.org/underscore-min.js'></script>
<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:0px;
  padding:0px;
  font:normal 12px/15px Arial,sans-serif;
  background:#fff;
  }

#pane {
  position:fixed;
  top:0px;
  bottom:0px;
  width:100%;
  overflow:hidden;
  }

#map  {
  position:absolute;
  top:0px;
  bottom:0px;
  width:120%;
  height:150%;
  transition:opacity 250ms;
  -moz-transition:opacity 250ms;
  -webkit-transition:opacity 250ms;
  }

article {
  background:#fff;
  width:20%;
  min-width:260px;
  position:relative;
  }

article header,
article footer,
article section {
  padding:10px 15px 9px;
  border-bottom:1px solid #eee;
  }

article section { cursor:pointer; }

article section.active {
  background:#26c;
  color:#fff;
  }

article h1,
article h2 { margin:0px; }

/* Hide content in the article with .tooltip class. Displays
   in the map tooltips only. */
article .tooltip { display:none; }

/* Text styles */
section.active a { color:#111; }
section.active { background:#fff; }
section.active small { color:#666; }
h1 { font-size:2em; line-height:1em; }
h2 { font-size:1.3333em; }
h1,h2 { margin:0px 0px 10px; }
p { margin:0px; }
a { text-decoration:none; color:inherit; }

footer p { margin-bottom:10px; }
.swatch {
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  vertical-align:middle;
  }

.swatch.west { background:#e66; }
.swatch.east { background:#8ac; }

/* Images */
.image {
  height:100px;
  margin:0px 0px 20px;
  background-position:50% 50%;
  background-repeat:no-repeat;
  background-size:cover;
  }
.spot-new-york .image      { background-image:url(http://farm4.staticflickr.com/3080/3191428445_a999dd3c5a.jpg); }
.spot-chicago  .image      { background-image:url(http://farm4.staticflickr.com/3154/2718941649_1c453a99cf.jpg); }
.spot-denver   .image      { background-image:url(http://farm2.staticflickr.com/1023/1228100634_b8dfe3ec1f.jpg); }
.spot-dallas   .image      { background-image:url(http://farm1.staticflickr.com/170/471774454_179e3b2212.jpg); }
.spot-seattle  .image      { background-image:url(http://farm4.staticflickr.com/3461/3293292089_ce1695e598.jpg); }
.spot-san-francisco .image { background-image:url(http://farm1.staticflickr.com/148/330134132_c0fd796c3a.jpg); }
.spot-atlanta  .image      { background-image:url(http://farm9.staticflickr.com/8477/8267849903_c126dc3b6f.jpg); }

/* Styles for dots on the map and their tooltip contents. */
.spot {
  width:20px;
  height:20px;
  border:#ace solid 5px;
  margin:-15px 0px 0px -15px;
  background:#8ac;
  position:absolute;
  border-radius:50%;
  cursor:pointer;
  pointer-events:all;
  }

.spot.active {
  background:#26c;
  border-color:#48e;
  }

/* Tooltip styling for popups */
.spot section {
  display:none;
  position:absolute; left:50%; bottom:100%;
  margin:0px 0px 10px -150px;
  background:#fff;
  padding:20px;
  width:260px;
  color:#333;
  border-radius:5px;
  text-shadow:rgba(255,255,255,0.25) 0px 0px 4px;
  }

.spot section:before {
  content:'';
  border-top:15px solid #fff;
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-bottom:15px solid transparent;
  position:absolute; top:100%; left:50%;
  margin:0px 0px 0px -15px;
  }

.spot.active { z-index:9999; }
.spot.active section { display:block; }

/* Styling a spot/class differently based on its class */
article section.west.active {
  background:#c44;
  }

.spot.west {
  background:#e66;
  border-color:#f88;
  }

.spot.west.active {
  background:#c44;
  border-color:#e66;
  }

/* Map controls - move zoomer to right */
.zoomer { left:auto; right:16.6666%; } /* adjusts for map offset */
.zoomin { margin-right:10px; }
.zoomout { margin-right:39px; }

@media (max-width:640px) {
  body {
    font-size:11px;
    line-height:15px;
    }
  article { display:none; }
  #pane { width:100%; }
  #map  {
    bottom:0%;
    left:0%;
    width:100%;
    height:150%;
    }
  .zoomer { right:0px; }
  }
</style>
</head>
<body>

<div id='pane'><div id='map'></div></div>

<article>
  <header>
    <h1>American Cities</h1>
  </header>
  <section id='new-york' data-lon='-73.938' data-lat='40.664'>
    <div class='image tooltip'></div>
    <h2>New York, New York</h2>
    <p class='tooltip'>New York is the most populous city in the United States and the center of the New York Metropolitan Area, one of the most populous urban agglomerations in the world. The city is referred to as New York City or the City of New York to distinguish it from the State of New York, of which it is a part.</p>
    <small class='tooltip'>
      Photo from <a href='http://www.flickr.com/photos/joiseyshowaa/3191428445/'>joiseyshowaa</a>
    </small>
  </section>
  <section id='atlanta' data-lon='-84.422' data-lat='33.762'>
    <div class='image tooltip'></div>
    <h2>Atlanta, Georgia</h2>
    <p class='tooltip'>Atlanta is the capital of and the most populous city in the U.S. state of Georgia, with an estimated 2011 population of 432,427. Atlanta is the cultural and economic center of the Atlanta metropolitan area, home to 5,359,205 people and the ninth largest metropolitan area in the country.</p>
    <small class='tooltip'>
      Photo from <a href='http://www.flickr.com/photos/terence_s_jones/8267849903/'>Terence Jones</a>
    </small>
  </section>
  <section id='chicago' data-lon='-87.681' data-lat='41.837'>
    <div class='image tooltip'></div>
    <h2>Chicago, Illinois</h2>
    <p class='tooltip'>Chicago is the most populous city in the U.S. state of Illinois, and the third most populous city in the United States, with approximately 2.8 million residents. Its metropolitan area (also called "Chicagoland"), which extends into Indiana and Wisconsin, is the third-largest in the United States, after those of New York City and Los Angeles, with an estimated 9.8 million people.</p>
    <small class='tooltip'>
      Photo from <a href='http://www.flickr.com/photos/pagedooley/2718941649/'>Kevin Dooley</a>
    </small>
  </section>
  <section id='dallas' class='west' data-lon='-96.765' data-lat='32.794'>
    <div class='image tooltip'></div>
    <h2>Dallas, Texas</h2>
    <p class='tooltip'>Dallas is the eighth most populous city in the United States and the third most populous city in the state of Texas. The Dallas-Fort Worth metroplex is the largest metropolitan area in the South and fourth-largest metropolitan area in the United States.</p>
    <small class='tooltip'>
      Photo from <a href='http://www.flickr.com/photos/dph1110/471774454/'>David Herrera</a>
    </small>
  </section>
  <section id='denver' class='west' data-lon='-104.880' data-lat='39.761'>
    <div class='image tooltip'></div>
    <h2>Denver, Colorado</h2>
    <p class='tooltip'>The City and County of Denver is the largest city and the capital of the U.S. state of Colorado. Denver is also the second most populous county in Colorado after El Paso County. Denver is a consolidated city and county located in the South Platte River Valley on the western edge of the High Plains just east of the Front Range of the Rocky Mountains.</p>
    <small class='tooltip'>
      Photo from <a href='http://www.flickr.com/photos/84263554@N00/1228100634/'>Ron Reiring</a>
    </small>
  </section>
  <section id='seattle' class='west' data-lon='-122.459' data-lat='47.481'>
    <div class='image tooltip'></div>
    <h2>Seattle, Washington</h2>
    <p class='tooltip'>Seattle is a major coastal seaport and the seat of King County, in the U.S. state of Washington. With 620,778 residents as estimated in 2011, Seattle is the largest city in the Pacific Northwest region of North America and the largest city on the West Coast north of San Francisco.</p>
    <small class='tooltip'>
      Photo from <a href='http://www.flickr.com/photos/seattlemunicipalarchives/3293292089/'>Seattle Municipal Archives</a>
    </small>
  </section>
  <section id='san-francisco' class='west' data-lon='-122.419' data-lat='37.778'>
    <div class='image tooltip'></div>
    <h2>San Francisco, California</h2>
    <p class='tooltip'>San Francisco, officially the City and County of San Francisco, is the leading financial and cultural center of Northern California and the San Francisco Bay Area. The only consolidated city-county in California, San Francisco encompasses a land area of about 46.9 square miles (121 km2).</p>
    <small class='tooltip'>
      Photo from <a href='http://www.flickr.com/photos/groundzero/73471268/'>Leonardo Pallotta</a>
    </small>
  </section>
  <footer>
    <p>
      <span class='swatch west'></span> Western city<br/>
      <span class='swatch east'></span> Eastern city
    </p>

    Text CC Sharealike <a href='http://en.wikipedia.org'>Wikipedia</a><br/>
    Map data &copy; <a href='http://openstreetmap.org/copyright'>OpenStreetMap Contributors</a><br/>
    Map design &copy; <a href='http://mapbox.com/about/maps/'>MapBox</a>
  </footer>
</article>

<script>
var tiles = mapbox.layer().tilejson({
  // Replace this example map ID with your own.
  tiles: [ "http://a.tiles.mapbox.com/v3/examples.map-20v6611k/{z}/{x}/{y}.png" ]
});

var geojson = _(document.getElementsByTagName('section')).chain()
  // Generate geojson data from section elements.
  .map(function(el) {
    var lon = el.getAttribute('data-lon');
    var lat = el.getAttribute('data-lat');
    if (!lon || !lat) return false;
    return {
      "geometry": {
        "type": "Point",
        "coordinates": [ parseFloat(lon), parseFloat(lat) ]
      },
      "properties": {
        "id":el.id
      }
    };
  })
  // Filter out any false values.
  .compact()
  // Get array back from chain of operations.
  .value();

var spots = mapbox.markers.layer()
  // Load up markers from geojson data.
  .features(geojson)
  // Define a new factory function. Takes geojson input and returns a
  // DOM element that represents the point.
  .factory(function(f) {
    var section = document.getElementById(f.properties.id);

    // Add section text to spot element.
    var el = document.createElement('div');
    el.className = 'spot spot-' + section.id + ' ' + section.className;
    el.innerHTML = '<section>' + document.getElementById(f.properties.id).innerHTML + '</section>';

    var setActive = function(e) {
      // Remove active class from all markers, sections.
      _(spots.markers()).each(function(m) {
          m.element.className = m.element.className.replace(/\s+active/g, '')
      });
      _(document.getElementsByTagName('section')).each(function(s) {
          s.className = s.className.replace(/\s+active/g, '')
      });

      // Add active class to clicked marker, section.
      el.className += ' active';
      section.className += ' active';

      // Pan the map to active marker.
      map.ease.location({
        lat: f.geometry.coordinates[1],
        lon: f.geometry.coordinates[0]
      }).zoom(map.zoom()).optimal();
      // Optionally use the code below and comment out the above
      // to move the map without animation.
      // map.centerzoom({
      //   lat: f.geometry.coordinates[1],
      //   lon: f.geometry.coordinates[0]
      // }, map.zoom());
    };

    // Add handlers for click, touchend for markers and click on sections.
    MM.addEvent(el, 'click', setActive);
    MM.addEvent(el, 'touchend', setActive);
    section.onclick = setActive;
    return el;
  });

var map = mapbox.map('map', [tiles, spots]);
map.setZoomRange(5, 7);
map.centerzoom({lon:-90,lat:40}, 5);
map.ui.zoomer.add();
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='UTF-8'/>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script src='http://underscorejs.org/underscore-min.js'></script>
	<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:0px;
	padding:0px;
	font:normal 12px/15px Arial,sans-serif;
	background:#fff;
	}

	#pane {
	position:fixed;
	top:0px;
	bottom:0px;
	width:100%;
	overflow:hidden;
	}

	#map {
	position:absolute;
	top:0px;
	bottom:0px;
	width:120%;
	height:150%;
	transition:opacity 250ms;
	-moz-transition:opacity 250ms;
	-webkit-transition:opacity 250ms;
	}

	article {
	background:#fff;
	width:20%;
	min-width:260px;
	position:relative;
	}

	article header,
	article footer,
	article section {
	padding:10px 15px 9px;
	border-bottom:1px solid #eee;
	}

	article section { cursor:pointer; }

	article section.active {
	background:#26c;
	color:#fff;
	}

	article h1,
	article h2 { margin:0px; }

	/* Hide content in the article with .tooltip class. Displays
	in the map tooltips only. */
	article .tooltip { display:none; }

	/* Text styles */
	section.active a { color:#111; }
	section.active { background:#fff; }
	section.active small { color:#666; }
	h1 { font-size:2em; line-height:1em; }
	h2 { font-size:1.3333em; }
	h1,h2 { margin:0px 0px 10px; }
	p { margin:0px; }
	a { text-decoration:none; color:inherit; }

	footer p { margin-bottom:10px; }
	.swatch {
	display:inline-block;
	width:10px;
	height:10px;
	border-radius:50%;
	vertical-align:middle;
	}

	.swatch.west { background:#e66; }
	.swatch.east { background:#8ac; }

	/* Images */
	.image {
	height:100px;
	margin:0px 0px 20px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	}
	.spot-new-york .image { background-image:url(http://farm4.staticflickr.com/3080/3191428445_a999dd3c5a.jpg); }
	.spot-chicago .image { background-image:url(http://farm4.staticflickr.com/3154/2718941649_1c453a99cf.jpg); }
	.spot-denver .image { background-image:url(http://farm2.staticflickr.com/1023/1228100634_b8dfe3ec1f.jpg); }
	.spot-dallas .image { background-image:url(http://farm1.staticflickr.com/170/471774454_179e3b2212.jpg); }
	.spot-seattle .image { background-image:url(http://farm4.staticflickr.com/3461/3293292089_ce1695e598.jpg); }
	.spot-san-francisco .image { background-image:url(http://farm1.staticflickr.com/148/330134132_c0fd796c3a.jpg); }
	.spot-atlanta .image { background-image:url(http://farm9.staticflickr.com/8477/8267849903_c126dc3b6f.jpg); }

	/* Styles for dots on the map and their tooltip contents. */
	.spot {
	width:20px;
	height:20px;
	border:#ace solid 5px;
	margin:-15px 0px 0px -15px;
	background:#8ac;
	position:absolute;
	border-radius:50%;
	cursor:pointer;
	pointer-events:all;
	}

	.spot.active {
	background:#26c;
	border-color:#48e;
	}

	/* Tooltip styling for popups */
	.spot section {
	display:none;
	position:absolute; left:50%; bottom:100%;
	margin:0px 0px 10px -150px;
	background:#fff;
	padding:20px;
	width:260px;
	color:#333;
	border-radius:5px;
	text-shadow:rgba(255,255,255,0.25) 0px 0px 4px;
	}

	.spot section:before {
	content:'';
	border-top:15px solid #fff;
	border-left:15px solid transparent;
	border-right:15px solid transparent;
	border-bottom:15px solid transparent;
	position:absolute; top:100%; left:50%;
	margin:0px 0px 0px -15px;
	}

	.spot.active { z-index:9999; }
	.spot.active section { display:block; }

	/* Styling a spot/class differently based on its class */
	article section.west.active {
	background:#c44;
	}

	.spot.west {
	background:#e66;
	border-color:#f88;
	}

	.spot.west.active {
	background:#c44;
	border-color:#e66;
	}

	/* Map controls - move zoomer to right */
	.zoomer { left:auto; right:16.6666%; } /* adjusts for map offset */
	.zoomin { margin-right:10px; }
	.zoomout { margin-right:39px; }

	@media (max-width:640px) {
	body {
	font-size:11px;
	line-height:15px;
	}
	article { display:none; }
	#pane { width:100%; }
	#map {
	bottom:0%;
	left:0%;
	width:100%;
	height:150%;
	}
	.zoomer { right:0px; }
	}
	</style>
	</head>
	<body>

	<div id='pane'><div id='map'></div></div>

	<article>
	<header>
	<h1>American Cities</h1>
	</header>
	<section id='new-york' data-lon='-73.938' data-lat='40.664'>
	<div class='image tooltip'></div>
	<h2>New York, New York</h2>
	<p class='tooltip'>New York is the most populous city in the United States and the center of the New York Metropolitan Area, one of the most populous urban agglomerations in the world. The city is referred to as New York City or the City of New York to distinguish it from the State of New York, of which it is a part.</p>
	<small class='tooltip'>
	Photo from <a href='http://www.flickr.com/photos/joiseyshowaa/3191428445/'>joiseyshowaa</a>
	</small>
	</section>
	<section id='atlanta' data-lon='-84.422' data-lat='33.762'>
	<div class='image tooltip'></div>
	<h2>Atlanta, Georgia</h2>
	<p class='tooltip'>Atlanta is the capital of and the most populous city in the U.S. state of Georgia, with an estimated 2011 population of 432,427. Atlanta is the cultural and economic center of the Atlanta metropolitan area, home to 5,359,205 people and the ninth largest metropolitan area in the country.</p>
	<small class='tooltip'>
	Photo from <a href='http://www.flickr.com/photos/terence_s_jones/8267849903/'>Terence Jones</a>
	</small>
	</section>
	<section id='chicago' data-lon='-87.681' data-lat='41.837'>
	<div class='image tooltip'></div>
	<h2>Chicago, Illinois</h2>
	<p class='tooltip'>Chicago is the most populous city in the U.S. state of Illinois, and the third most populous city in the United States, with approximately 2.8 million residents. Its metropolitan area (also called "Chicagoland"), which extends into Indiana and Wisconsin, is the third-largest in the United States, after those of New York City and Los Angeles, with an estimated 9.8 million people.</p>
	<small class='tooltip'>
	Photo from <a href='http://www.flickr.com/photos/pagedooley/2718941649/'>Kevin Dooley</a>
	</small>
	</section>
	<section id='dallas' class='west' data-lon='-96.765' data-lat='32.794'>
	<div class='image tooltip'></div>
	<h2>Dallas, Texas</h2>
	<p class='tooltip'>Dallas is the eighth most populous city in the United States and the third most populous city in the state of Texas. The Dallas-Fort Worth metroplex is the largest metropolitan area in the South and fourth-largest metropolitan area in the United States.</p>
	<small class='tooltip'>
	Photo from <a href='http://www.flickr.com/photos/dph1110/471774454/'>David Herrera</a>
	</small>
	</section>
	<section id='denver' class='west' data-lon='-104.880' data-lat='39.761'>
	<div class='image tooltip'></div>
	<h2>Denver, Colorado</h2>
	<p class='tooltip'>The City and County of Denver is the largest city and the capital of the U.S. state of Colorado. Denver is also the second most populous county in Colorado after El Paso County. Denver is a consolidated city and county located in the South Platte River Valley on the western edge of the High Plains just east of the Front Range of the Rocky Mountains.</p>
	<small class='tooltip'>
	Photo from <a href='http://www.flickr.com/photos/84263554@N00/1228100634/'>Ron Reiring</a>
	</small>
	</section>
	<section id='seattle' class='west' data-lon='-122.459' data-lat='47.481'>
	<div class='image tooltip'></div>
	<h2>Seattle, Washington</h2>
	<p class='tooltip'>Seattle is a major coastal seaport and the seat of King County, in the U.S. state of Washington. With 620,778 residents as estimated in 2011, Seattle is the largest city in the Pacific Northwest region of North America and the largest city on the West Coast north of San Francisco.</p>
	<small class='tooltip'>
	Photo from <a href='http://www.flickr.com/photos/seattlemunicipalarchives/3293292089/'>Seattle Municipal Archives</a>
	</small>
	</section>
	<section id='san-francisco' class='west' data-lon='-122.419' data-lat='37.778'>
	<div class='image tooltip'></div>
	<h2>San Francisco, California</h2>
	<p class='tooltip'>San Francisco, officially the City and County of San Francisco, is the leading financial and cultural center of Northern California and the San Francisco Bay Area. The only consolidated city-county in California, San Francisco encompasses a land area of about 46.9 square miles (121 km2).</p>
	<small class='tooltip'>
	Photo from <a href='http://www.flickr.com/photos/groundzero/73471268/'>Leonardo Pallotta</a>
	</small>
	</section>
	<footer>
	<p>
	<span class='swatch west'></span> Western city<br/>
	<span class='swatch east'></span> Eastern city
	</p>

	Text CC Sharealike <a href='http://en.wikipedia.org'>Wikipedia</a><br/>
	Map data © <a href='http://openstreetmap.org/copyright'>OpenStreetMap Contributors</a><br/>
	Map design © <a href='http://mapbox.com/about/maps/'>MapBox</a>
	</footer>
	</article>

	<script>
	var tiles = mapbox.layer().tilejson({
	// Replace this example map ID with your own.
	tiles: [ "http://a.tiles.mapbox.com/v3/examples.map-20v6611k/{z}/{x}/{y}.png" ]
	});

	var geojson = _(document.getElementsByTagName('section')).chain()
	// Generate geojson data from section elements.
	.map(function(el) {
	var lon = el.getAttribute('data-lon');
	var lat = el.getAttribute('data-lat');
	if (!lon \|\| !lat) return false;
	return {
	"geometry": {
	"type": "Point",
	"coordinates": [ parseFloat(lon), parseFloat(lat) ]
	},
	"properties": {
	"id":el.id
	}
	};
	})
	// Filter out any false values.
	.compact()
	// Get array back from chain of operations.
	.value();

	var spots = mapbox.markers.layer()
	// Load up markers from geojson data.
	.features(geojson)
	// Define a new factory function. Takes geojson input and returns a
	// DOM element that represents the point.
	.factory(function(f) {
	var section = document.getElementById(f.properties.id);

	// Add section text to spot element.
	var el = document.createElement('div');
	el.className = 'spot spot-' + section.id + ' ' + section.className;
	el.innerHTML = '<section>' + document.getElementById(f.properties.id).innerHTML + '</section>';

	var setActive = function(e) {
	// Remove active class from all markers, sections.
	_(spots.markers()).each(function(m) {
	m.element.className = m.element.className.replace(/\s+active/g, '')
	});
	_(document.getElementsByTagName('section')).each(function(s) {
	s.className = s.className.replace(/\s+active/g, '')
	});

	// Add active class to clicked marker, section.
	el.className += ' active';
	section.className += ' active';

	// Pan the map to active marker.
	map.ease.location({
	lat: f.geometry.coordinates[1],
	lon: f.geometry.coordinates[0]
	}).zoom(map.zoom()).optimal();
	// Optionally use the code below and comment out the above
	// to move the map without animation.
	// map.centerzoom({
	// lat: f.geometry.coordinates[1],
	// lon: f.geometry.coordinates[0]
	// }, map.zoom());
	};

	// Add handlers for click, touchend for markers and click on sections.
	MM.addEvent(el, 'click', setActive);
	MM.addEvent(el, 'touchend', setActive);
	section.onclick = setActive;
	return el;
	});

	var map = mapbox.map('map', [tiles, spots]);
	map.setZoomRange(5, 7);
	map.centerzoom({lon:-90,lat:40}, 5);
	map.ui.zoomer.add();
	</script>

	</body>
	</html>