ocations-gl.html example that I showed to mike and david and also used for measuring performance when comparing mapbox-gl vs mapbox.js for cpl 2020, april

<!DOCTYPE html>

 <html class="no-js"> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script>
        <link href="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css" rel="stylesheet" />

</head>
    <style>
    #mapid {
    width: 80%; 
    height: 320px; 
    position: relative;
    margin-bottom: 3em; 
}
    </style>
    <body>
        
        <div id="mapid"></div>
        <script>

// https://c.tile.openstreetmap.org/16/17923/24475.png

mapboxgl.accessToken = 'pk.eyJ1Ijoic2tvcmFzYXVydXMiLCJhIjoiY2s5dmRjbnZpMDVlZzNlcjN3MHowYzVrbSJ9.AcSdcVS034Hhl0RhBHoC2A';
var myMap = new mapboxgl.Map({

container: 'mapid',
  center: [-81.68334960937501, 41.51783221717116],
  zoom: 11,
  style: 'mapbox://styles/skorasaurus/ck2ew6z291ct01cnmjc5lz50b?optimize=true',
  hash: true,
});

myMap.on('load', function() {
        myMap.addSource('libraries-points', {
            'type': 'geojson',
	    'data': {
  "type": "FeatureCollection",
  "features": [    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -81.66675,
          41.49756
        ]
      },
      "properties": {
        "city": "Cleveland",
        "housenumber": 2200,
        "postcode": 44115,
        "state": "OH",
        "street": "East 30th Street",
        "amenity": "library",
        "internet_access": "wlan",
        "internet_access:fee": "no",
        "name": "Sterling Branch",
        "opening_hours": "Mo, Tu, Th 10:00-19:00; We, Fr, Sa 10:00-18:00; PH off",
        "operator": "Cleveland Public Library",
        "phone": "216-623-7074",
        "shortlink": "sterling"
      },
      "id": "node/368152695"
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -81.57576,
          41.556
        ]
      },
      "properties": {
        "city": "Cleveland",
        "housenumber": 856,
        "postcode": 44110,
        "state": "OH",
        "street": "East 152nd Street",
        "amenity": "library",
        "internet_access": "wlan",
        "internet_access:fee": "no",
        "name": "Collinwood Branch",
        "opening_hours": "Mo, Tu, Th 10:00-19:00; We, Fr, Sa 10:00-18:00; PH off",
        "operator": "Cleveland Public Library",
        "phone": "216-623-6934",
        "shortlink": "collinwood"
      },
      "id": "node/368152918"
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -81.58444,
          41.46417
        ]
      },
      "properties": {
        "city": "Cleveland",
        "housenumber": 14000,
        "postcode": 44120,
        "state": "OH",
        "street": "Kinsman Road",
        "amenity": "library",
        "internet_access": "wlan",
        "internet_access:fee": "no",
        "name": "Mount Pleasant Branch",
        "opening_hours": "Mo, Tu, Th 10:00-19:00; We, Fr, Sa 10:00-18:00; PH off",
        "operator": "Cleveland Public Library",
        "phone": "216-623-7032",
        "shortlink": "mtpleasant"
      },
      "id": "node/368153278"
    }]
}
								   
								   
        });
        console.log('success');
        myMap.addLayer({
            id: 'libraries',
            type: 'circle',
            source: 'libraries-points',
            paint: {
                // Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
                'circle-opacity': 0.98,
                'circle-color': '#fc8d62',
                'circle-radius': 10
            }
        });    
});

myMap.on('click', 'libraries', function(e) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML('<a href="'+e.features[0].properties.shortlink+'">'+e.features[0].properties.name +'</a><br>' + e.features[0].properties.housenumber + ' ' + e.features[0].properties.street+ '<br>' + 
	    '<a href="https://www.google.com/maps/search/'+e.features[0].properties.housenumber + ' ' + e.features[0].properties.street+ " Cleveland" + ' ' + e.features[0].properties.postcode + '">'+' Get directions </a>')
.addTo(myMap);
});
     
        </script>

</body>
</html>

https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js