Last active
July 22, 2018 03:39
-
-
Save amyleew/7b862c7b51b81d464b3ee1d4708d5c21 to your computer and use it in GitHub Desktop.
Beautiful Maps: Blueprint
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset='utf-8' /> | |
<title></title> | |
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' /> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } | |
</style> | |
</head> | |
<body> | |
<div id='map'></div> | |
<script> | |
mapboxgl.accessToken = 'pk.eyJ1IjoibXNsZWUiLCJhIjoiclpiTWV5SSJ9.P_h8r37vD8jpIH1A6i1VRg'; | |
var map = new mapboxgl.Map({ | |
container: 'map', | |
style: 'mapbox://styles/mslee/ciellcr9y001g5pknxuqwjhqm', | |
center: [-74.0315, 40.6989], | |
maxZoom: 16, | |
minZoom: 9, | |
zoom: 9.68 | |
}); | |
var locations = [{ | |
"id": "2", | |
"title": "The Bronx", | |
"description": "This is where hip-hop was born, where the Yankees became a dynasty and where you can find New York City's leading zoo and botanical garden.", | |
"camera": { | |
center: [-73.8709, 40.8255], | |
zoom: 12.21, | |
pitch: 50 | |
} | |
}, { | |
"id": "3", | |
"title": "Brooklyn", | |
"description": "No matter how hip it looks on TV, NYC's most populous borough is best experienced in person. Read on to find out about live music, Prospect Park, Nets basketball and more.", | |
"camera": { | |
center: [-73.9499, 40.6260], | |
bearing: -8.9, | |
zoom: 11.68 | |
} | |
}, { | |
"id": "1", | |
"title": "Manhattan", | |
"description": "Even if you think you know Manhattan—its world-class museums, fine dining and unforgettable views—the borough always has something new and exciting in store.", | |
"camera": { | |
center: [-74.0070, 40.7437], | |
bearing: 25.3, | |
zoom: 11.5 | |
} | |
}, { | |
"id": "4", | |
"title": "Queens", | |
"description": "Taste food from around the globe, watch Mets baseball and US Open tennis, see cutting-edge art and more in one of the world's most diverse places.", | |
"camera": { | |
center: [-73.8432, 40.6923], | |
bearing: 36, | |
zoom: 11.37 | |
} | |
}, { | |
"id": "5", | |
"title": "Staten Island", | |
"description": "Take a free ferry ride to an island getaway filled with historic architecture, stunning views, gardens and many family-friendly attractions.", | |
"camera": { | |
center: [-74.1991, 40.5441], | |
bearing: 28.4, | |
zoom: 11.64 | |
} | |
}, { | |
"title": "Boroughs of new york", | |
"description": "New York City is made up of five boroughs: the Bronx, Brooklyn, Manhattan, Queens and Staten Island. Each one has enough attractions—and enough personality—to be a city all its own.", | |
"camera": { | |
center: [-74.0315, 40.6989], | |
zoom: 9.68, | |
bearing: 0, | |
pitch: 0 | |
} | |
}]; | |
function playback(index) { | |
// Animate the map position based on camera properties | |
map.flyTo(locations[index].camera); | |
map.once('moveend', function() { | |
// Duration the slide is on screen after interaction | |
window.setTimeout(function() { | |
// Increment index | |
index = (index + 1 === locations.length) ? 0 : index + 1; | |
playback(index); | |
}, 3000); // After callback, show the location for 3 seconds. | |
}); | |
} | |
map.on('load', function() { | |
// Start the playback animation for each borough | |
playback(0); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment