nickpeihl/index.html

## index.html
<!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.12.5/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.5/mapbox-gl.css' rel='stylesheet' />
        <style>
         body { margin:0; padding:0; }
         #map { position:absolute; top:0; bottom:0; width:100%; }
         #fly {
             display: block;
             position: relative;
             margin: 0px auto;
             width: 50%;
             height: 40px;
             padding: 10px;
             border: none;
             border-radius: 3px;
             font-size: 12px;
             text-align: center;
             color: #fff;
             background: #ee8a65;
         }
        </style>
    </head>
    <body>

        <div id='map'></div>
        <br />
        <button onclick="fly();" id="fly">Fly</button>
        <script>
         var platMap;
         var map = new mapboxgl.Map({
             container: 'map', // container id
             style: {
                 "version": 8,
                 "sources": {
                     "sjc-aerials": {
                         "type": "raster",
                         "tiles": [
                             "http://sjcgis.org/arcgis/rest/services/Basemaps/Aerials_2013_WM/MapServer/tile/{z}/{y}/{x}"
                         ],
                         "tileSize": 256
                     }
                 },
                 "layers": [{
                     "id": "sjc-aerials",
                     "type": "raster",
                     "source": "sjc-aerials",
                     "minzoom": 10,
                     "maxzoom": 19
                 }]
             },
             center: [-122.960358,48.577516], // starting position
             zoom: 11 // starting zoom
         });

         function fly() {
             // Fly to a random location by offsetting the map center
             // by up to 0.25 degrees. i.e. Island hoppin'
             map.flyTo({
                 center: [
           -122.960358 + (Math.random() - 0.5) * 0.25,
                     48.577516 + (Math.random() - 0.5) * 0.25],
                 zoom: 14,
                 pitch: Math.random() * (85 - 45) + 45,
                 bearing: Math.random() * (90)
             });
         }
        </script>

    </body>
</html>
	<!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.12.5/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.5/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	#fly {
	display: block;
	position: relative;
	margin: 0px auto;
	width: 50%;
	height: 40px;
	padding: 10px;
	border: none;
	border-radius: 3px;
	font-size: 12px;
	text-align: center;
	color: #fff;
	background: #ee8a65;
	}
	</style>
	</head>
	<body>

	<div id='map'></div>
	<br />
	<button onclick="fly();" id="fly">Fly</button>
	<script>
	var platMap;
	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: {
	"version": 8,
	"sources": {
	"sjc-aerials": {
	"type": "raster",
	"tiles": [
	"http://sjcgis.org/arcgis/rest/services/Basemaps/Aerials_2013_WM/MapServer/tile/{z}/{y}/{x}"
	],
	"tileSize": 256
	}
	},
	"layers": [{
	"id": "sjc-aerials",
	"type": "raster",
	"source": "sjc-aerials",
	"minzoom": 10,
	"maxzoom": 19
	}]
	},
	center: [-122.960358,48.577516], // starting position
	zoom: 11 // starting zoom
	});

	function fly() {
	// Fly to a random location by offsetting the map center
	// by up to 0.25 degrees. i.e. Island hoppin'
	map.flyTo({
	center: [
	-122.960358 + (Math.random() - 0.5) * 0.25,
	48.577516 + (Math.random() - 0.5) * 0.25],
	zoom: 14,
	pitch: Math.random() * (85 - 45) + 45,
	bearing: Math.random() * (90)
	});
	}
	</script>

	</body>
	</html>