Skip to content

Instantly share code, notes, and snippets.

@twelch

twelch/index.html

Created July 28, 2018 00:31
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 twelch/ef499d63c8cd0db9e79862bc93adc022 to your computer and use it in GitHub Desktop.
Save twelch/ef499d63c8cd0db9e79862bc93adc022 to your computer and use it in GitHub Desktop.
Download ZIP
Modern to Prehistoric transition
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
</head>
<body>
<style>
body {
overflow: hidden;
}
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<div id='before' class='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidHdlbGNoIiwiYSI6ImNqZW5vazRvcjEyczAyd25xamczMmh3OG0ifQ.vJy47O0vb1Z_F7OWIbZpyg';
var map = new mapboxgl.Map({
container: 'before',
style: 'mapbox://styles/twelch/cjk2vwft2c4hq2sqvcz2gixe5',
center: [-111.835493, 33.436899],
zoom: 11,
pitch: 45
});
map.on('load', function() {
setTimeout(function() {
map.fitBounds([
[-111.845, 33.420],
[-111.823, 33.444]
], {
speed: 0.15
});
}, 2000);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment