D3 Examples - Mapbox.GL custom FOAM CSC basemap

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
    <meta charset='utf-8' />
    <title>FOAM API Example - Custom Basemap</title>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }
​
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
​
<body>
    <div id="map"></div>
​
    <script>
​
        mapboxgl.accessToken = 'pk.eyJ1Ijoid2lsbGNhcnRlciIsImEiOiJjamV4b2g3Z2ExOGF4MzFwN3R1dHJ3d2J4In0.Ti-hnuBH8W4bHn7k6GCpGw';
​
        // https://www.mapbox.com/api-documentation/#styles
        let map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/willcarter/cjfad2lai27br2rqkdl80zh7l',
            center: [-72.359521,41.683863],
            zoom: 7,
            minZoom: 1,
            maxZoom: 17,
            pitch: 40.5,
            bearing: -27.396674584323023
        });
​
        map.on('mousemove', (evt) => {
​
            //get all features close to the pointer
            map.featuresAt(evt.point, {
                radius: 15,
                layer: ['beacons'] //we chose which layers should be 'hoverable'
            }, (err, features) => {
​
                //if features are hovered, display a tooltip with the data
                if (features.length) {
                    tooltip.update(features[0].properties);
                    tooltip.updatePosition(evt.point);
                }
                else {
                    //if no features were found, hide the tooltip
                    tooltip.hide();
                }
​
            })
​
        });
​
​
    </script>
​
</body>
​
</html>
    