Display a popup

Add a Popup to the map. See the example: https://docs.mapbox.com//mapbox-gl-js/example/popup/

by Tristen Brown

HTML

<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
<script src="https://gistcdn.githack.com/tristen/473fb1137bf54c54e140d193d71b14be/raw/1e4dd8ab45aa9fd49d4f3792266be810f12b7814/mapbox-gl.js"></script>
<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
  .cr .property-name { 
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJjajZoOXU4Z2kwNnppMnlxd2d6bTFvZ2xtIn0.PP7AoUakMfeqdXFHdsY0oA';

const atmosphere = {
  type: "gradient",
  "gradient-outer-color": "rgba(0, 0, 0, 1)",
  "gradient-inner-color": "rgba(255, 255, 255, 1)",
  "gradient-outer-radius": 1
};

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  attributionControl: false,
  center: [-46.63, 32.57],
  zoom: 1,
  projection: {
  	name: 'globe',
    atmosphere
  }
});

map.on('load', () => {
	const gui = new dat.GUI();
	gui.add(atmosphere, 'gradient-outer-radius', 0, 10).onChange(e => {
		atmosphere['gradient-outer-radius'] = e; 
		map.setProjection({ name: "globe", atmosphere });
  });

  gui.addColor(atmosphere, 'gradient-outer-color').onChange(e => {
		atmosphere['gradient-outer-color'] = e; 
		map.setProjection({ name: "globe", atmosphere });
  });
  
  gui.addColor(atmosphere, 'gradient-inner-color').onChange(e => {
		atmosphere['gradient-inner-color'] = e; 
		map.setProjection({ name: "globe", atmosphere });
  });
});