Skip to content

Instantly share code, notes, and snippets.

@yhahn

yhahn/index.html

Created February 3, 2013 18:39
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 yhahn/4703048 to your computer and use it in GitHub Desktop.
Save yhahn/4703048 to your computer and use it in GitHub Desktop.
Download ZIP
custom markers + custom tooltips
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<!--[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;
}
.hidden { display:none; }
#pane {
position:absolute;
top:0px;
bottom:0px;
width:100%;
overflow:hidden;
}
#map {
position:absolute;
top:0px;
bottom:0px;
width:100%;
height:150%;
transition:opacity 250ms;
-moz-transition:opacity 250ms;
-webkit-transition:opacity 250ms;
}
.spot {
width:80px;
height:80px;
margin:-40px 0px 0px -40px;
background-position:50% 50%;
background-repeat:no-repeat;
position:absolute;
border-radius:50%;
cursor:pointer;
pointer-events:all;
transition:width 200ms, height 200ms, margin 200ms;
-moz-transition:width 200ms, height 200ms, margin 200ms;
-webkit-transition:width 200ms, height 200ms, margin 200ms;
}
.spot.active { width:150px; height:150px; margin:-75px 0px 0px -75px; }
.spot-cover { display:none; }
.spot-new-york { background-image:url(http://farm4.staticflickr.com/3080/3191428445_a999dd3c5a_q.jpg); }
.spot-chicago { background-image:url(http://farm4.staticflickr.com/3154/2718941649_1c453a99cf_q.jpg); }
.spot-denver { background-image:url(http://farm2.staticflickr.com/1023/1228100634_b8dfe3ec1f_q.jpg); }
.spot-dallas { background-image:url(http://farm1.staticflickr.com/170/471774454_179e3b2212_q.jpg); }
.spot-seattle { background-image:url(http://farm4.staticflickr.com/3461/3293292089_ce1695e598_q.jpg); }
.spot-san-francisco { background-image:url(http://farm1.staticflickr.com/148/330134132_c0fd796c3a_q.jpg); }
.spot-atlanta { background-image:url(http://farm9.staticflickr.com/8477/8267849903_c126dc3b6f_q.jpg); }
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;
pointer-events:none;
text-shadow:rgba(255,255,255,0.25) 0px 0px 4px;
}
section:before {
content:'';
border-top:20px solid #fff;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
position:absolute; top:100%; left:50%;
margin:0px 0px 0px -20px;
}
.spot.active { z-index:9999; }
.spot.active section { display:block; }
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; }
@media (max-width:640px) {
body {
font-size:11px;
line-height:15px;
}
article {
width:100%;
min-width:100%;
padding-top:0px;
padding-bottom:200%;
}
#pane { width:100%; }
#map {
bottom:0%;
left:0%;
width:100%;
height:150%;
}
}
</style>
</head>
<body>
<div id='pane'><div id='map'></div></div>
<article class='hidden'>
<section id='cover' class='cover active'>
<h1>American Cities</h1>
<p>MapBox scrollable example</p>
<small class='scroll'>Scroll ▼</small>
</section>
<section id='new-york'>
<h2>New York, New York</h2>
<p>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='colophon'>
Photo from <a href='http://www.flickr.com/photos/joiseyshowaa/3191428445/'>joiseyshowaa</a>
</small>
</section>
<section id='atlanta'>
<h2>Atlanta, Georgia</h2>
<p>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='colophon'>
Photo from <a href='http://www.flickr.com/photos/terence_s_jones/8267849903/'>Terence Jones</a>
</small>
</section>
<section id='chicago'>
<h2>Chicago, Illinois</h2>
<p>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='colophon'>
Photo from <a href='http://www.flickr.com/photos/pagedooley/2718941649/'>Kevin Dooley</a>
</small>
</section>
<section id='dallas'>
<h2>Dallas, Texas</h2>
<p>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='colophon'>
Photo from <a href='http://www.flickr.com/photos/dph1110/471774454/'>David Herrera</a>
</small>
</section>
<section id='denver'>
<h2>Denver, Colorado</h2>
<p>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='colophon'>
Photo from <a href='http://www.flickr.com/photos/84263554@N00/1228100634/'>Ron Reiring</a>
</small>
</section>
<section id='seattle'>
<h2>Seattle, Washington</h2>
<p>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='colophon'>
Photo from <a href='http://www.flickr.com/photos/seattlemunicipalarchives/3293292089/'>Seattle Municipal Archives</a>
</small>
</section>
<section id='san-francisco'>
<h2>San Francisco, California</h2>
<p>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='colophon'>
Photo from <a href='http://www.flickr.com/photos/groundzero/73471268/'>Leonardo Pallotta</a>
</small>
</section>
</article>
<script>
var geojson = [
{ "geometry": { "type": "Point", "coordinates": [-73.938, 40.664] },
"properties": { "id": "new-york" } },
{ "geometry": { "type": "Point", "coordinates": [-84.422, 33.762] },
"properties": { "id": "atlanta" } },
{ "geometry": { "type": "Point", "coordinates": [-87.681, 41.837] },
"properties": { "id": "chicago" } },
{ "geometry": { "type": "Point", "coordinates": [-96.765, 32.794] },
"properties": { "id": "dallas" } },
{ "geometry": { "type": "Point", "coordinates": [-104.880, 39.761] },
"properties": { "id": "denver" } },
{ "geometry": { "type": "Point", "coordinates": [-122.459, 47.481] },
"properties": { "id": "seattle" } },
{ "geometry": { "type": "Point", "coordinates": [-122.419, 37.778] },
"properties": { "id": "san-francisco" } }
];
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 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 el = document.createElement('div');
el.className = 'spot spot-' + f.properties.id;
// Add section text to spot element.
el.innerHTML = '<section>' + document.getElementById(f.properties.id).innerHTML + '</section>';
// Add function that centers marker on click
MM.addEvent(el, 'click', function(e) {
// Remove active class from all markers.
_(spots.markers()).each(function(m) { m.element.className = m.element.className.replace(' active', '') });
// Add active class to clicked marker.
el.className += ' active';
map.ease.location({
lat: f.geometry.coordinates[1],
lon: f.geometry.coordinates[0]
}).zoom(map.zoom()).optimal();
});
return el;
});
var map = mapbox.map('map', [tiles, spots]);
map.setZoomRange(5, 7);
map.centerzoom({lon:-90,lat:40}, 5);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment