Skip to content

Instantly share code, notes, and snippets.

@springmeyer

springmeyer/index.html

Last active December 25, 2015 05:29
Show Gist options
  • Save springmeyer/6925129 to your computer and use it in GitHub Desktop.
Save springmeyer/6925129 to your computer and use it in GitHub Desktop.
Download ZIP
A tour of amazing places in the MapBox Cloudless Atlas
Raw
index.html
<!DOCTYPE html>
<Html>
<Head>
<Meta charset=utf-8 />
<Title></Title>
<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:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
#map-ui {
position:absolute;
top:10px;left:10px;
z-index:100;
}
#map-ui ul {
list-style:none;
margin:0;padding:0;
}
#map-ui a {
font-size:13px;
background:#FFF;
color:#3C4E5A;
display:block;
margin:0;padding:0;
border:1px solid #BBB;
border-bottom-width:0;
min-width:138px;
padding:10px;
text-decoration:none;
}
#map-ui a:hover { background:#ECF5FA; }
#map-ui li:last-child a {
border-bottom-width:1px;
-webkit-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
}
#map-ui li:first-child a {
-webkit-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
}
</Style>
</Head>
<Body>
<Div id='map-ui'>
<Ul>
<Li><A href='#' id='1'>Bahamas</A></Li>
<Li><A href='#' id='2'>Australia</A></Li>
<Li><A href='#' id='3'>Great Barrier Reef</A></Li>
<Li><A href='#' id='4'>Amur River</A></Li>
<Li><A href='#' id='5'>Taiwan</A></Li>
<Li><A href='#' id='6'>Tibet</A></Li>
<Li><A href='#' id='7'>Tibet Zoom</A></Li>
<Li><A href='#' id='8'>Angola/Namibia</A></Li>
</Ul>
</Div>
<Div id='map'></Div>
<Script>
var map = mapbox.map('map');
var layer = mapbox.layer().id('springmeyer.map-oclouv0v');
map.addLayer(layer);
map.zoom(2);
var places = [
{ place:'1', lat: 23.975507060561622, lon: -77.28332519531249, zoom:8 },
{ place: '2', lat: -29.048035771630012, lon: 138.94015549263534, zoom:5 },
{ place: '3', lat: -10.627526378678866, lon: 143.29847366360818, zoom:8 },
{ place: '4', lat: 52.927285549508014, lon: 141.37194903886763, zoom:7 },
{ place: '5', lat: 23.712405679249454, lon: 120.99472398981851, zoom:8 },
{ place: '6', lat: 32.682657291997366, lon: 86.22574205622477, zoom:6 },
{ place: '7', lat: 34.40361516928514, lon: 81.07427199520984, zoom:8 },
{ place: '8', lat: -17.387337184561474, lon: 15.790100097656252, zoom:7 }
];
places.forEach(function(item){
document.getElementById(item.place).onclick = function() {
map.ease.location({ lat: item.lat, lon: item.lon }).zoom(item.zoom || 7).optimal();
return false;
}
});
</Script>
</Body>
</Html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment