Mapbox GL marker with popup

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' />
        <link rel="stylesheet" href="style.css">
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script>
    </head>
    <body>
        <div id="map"></div>
        <script src="script.js"></script>
    </body>
</html>

mapboxgl.accessToken = 'pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v8',
    center: [-96, 37.8],
    zoom: 2,
    interactive: true
});

map.on('style.load', function (e) {
    map.addSource('markers', {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-77.03238901390978, 38.913188059745586]
                },
                "properties": {
                    "title": "Mapbox DC",
                    "marker-symbol": "default_marker"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-122.414, 37.776]
                },
                "properties": {
                    "title": "Mapbox SF",
                    "marker-color": "#ff00ff",
                    "marker-symbol": "secondary_marker"
                }
            }]
        }
    });

    map.addLayer({
        "id": "markers",
        "source": "markers",
        "type": "circle",
        "paint": {
            "circle-radius": 10,
            "circle-color": "#007cbf"
        }
    });
    let popup = new mapboxgl.Popup({
        closeButton: false,
        closeOnClick: false
    });
    map.on("mouseenter", "markers", e => {
      map.getCanvas().style.cursor = "pointer";
      popup
          .setLngLat(map.unproject(e.point))
          .setHTML("<h3>" + e.features[0].properties.title + "</h3>")
          .addTo(map);
    });
    map.on("mouseleave", "markers", () => {
        map.getCanvas().style.cursor = "";
        popup.remove();
    });
});

body {
    margin:0;
    padding:0;
}

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