Display a popup

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

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css">

<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoibHVrYXNsb2VmZmxlciIsImEiOiJjazkxb2tvdGIwMXE3M21ud3FrdXRuaXhtIn0.jSlerkJwI02Qi5_UBWuBCg';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-96, 37.8],
        zoom: 3
    });
    
   	
    var popup = new mapboxgl.Popup()
      .setText('Description')
      .addTo(map);
   
    let marker = new mapboxgl
      .Marker()
        .setLngLat([-96, 37.8])
        .addTo(map)
        .setPopup(popup);