JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.1/mapbox-gl.css">
<div id='map'></div>
<br/>
<button onclick='fly();' id='fly'>Fly</button>

CSS

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;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiY2hya2kiLCJhIjoiY2lpNzgwY2M0MDIxanRva2Y0ZzNsYml4bSJ9._PfrsitBr29xAel_oi9wZw';
var flying = false;
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v8',
    center: [-74.50, 40],
    zoom: 9
});
map.on('moveend', function(e){
	if(flying) {
    var tooltip = new mapboxgl.Popup()
      .setLngLat(map.getCenter())
      .setHTML('<h1>Hello World!</h1>')
      .addTo(map);
    map.fire('flyend');
  }
});
map.on('flystart', function(){
	flying = true;
});
map.on('flyend', function(){
	flying = false;
});

function fly() {
  // Fly to a random location by offsetting the point -74.50, 40
  // by up to 5 degrees.
  map.flyTo({
    center: [
      -74.50 + (Math.random() - 0.5) * 10,
      40 + (Math.random() - 0.5) * 10]
  });
  map.fire('flystart');
}