malwoodsantoro/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Fly to a location</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <style>
  </style>
  <div id="map"></div>
  <br>
  <script>
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.5, 40],
      zoom: 9
    });
  map.on('load', function(){
    var popup = new mapboxgl.Popup({ closeOnClick: false })
      .setLngLat([-122.26409,
        37.81412])
      .setHTML('<h1>Hello World!</h1>')
      .addTo(map);


      map.flyTo({
        center: [
          -122.26409,
          37.8141237
        ],
        essential: true // this animation is considered essential with respect to prefers-reduced-motion
      });
    });
  </script>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Fly to a location</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
	<style>
	body {
	margin: 0;
	padding: 0;
	}

	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}
	</style>
	</head>

	<body>
	<style>
	</style>
	<div id="map"></div>
	<br>
	<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v11',
	center: [-74.5, 40],
	zoom: 9
	});
	map.on('load', function(){
	var popup = new mapboxgl.Popup({ closeOnClick: false })
	.setLngLat([-122.26409,
	37.81412])
	.setHTML('<h1>Hello World!</h1>')
	.addTo(map);


	map.flyTo({
	center: [
	-122.26409,
	37.8141237
	],
	essential: true // this animation is considered essential with respect to prefers-reduced-motion
	});
	});
	</script>

	</body>

	</html>