|
<!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> |
