Mapbox - helper.html in Storytelling

Ref:

https://blog.mapbox.com/how-to-build-a-scrollytelling-map-ead6baf2cd1b
https://github.com/mapbox/storytelling

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Position Helper</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        #target { 
            position:absolute; top:0; bottom:0; width:100%;
            display: flex; justify-content: center; align-items: center;
            pointer-events: none;
        }
        #target img { width:50px; height:50px; }
        #position { 
            position:absolute; top:0; height: 80px; width: 300px; 
            background-color: #fff;
            padding: 15px;
            margin: 10px;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>

mapboxgl.accessToken = 'pk.eyJ1IjoiaGlyb3NhamkiLCJhIjoiY2szOWlqZWNzMDJueTNjcWhyNjhqdXBnOSJ9._6mJT202QqpnMuK-jvMr3g';
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/hirosaji/ck8pi8a2i0fcq1imikt012wtt', // stylesheet location
        center: [137.5, 37.0], // starting position [lng, lat]
        zoom: 4.5, // starting zoom
        pitch: 45,
        bearing: 0
    });

map.addControl(new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        mapboxgl: mapboxgl
    }));

map.addControl(new mapboxgl.NavigationControl());
    
    map.on("load", function() {
        updatePosition();

// Insert the layer beneath any symbol layer
        var layers = map.getStyle().layers;

var labelLayerId;
        for (var i = 0; i < layers.length; i++) {
            if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
                labelLayerId = layers[i].id;
                break;
            }
        }

map.addLayer({
            'id': '3d-buildings',
            'source': 'composite',
            'source-layer': 'building',
            'filter': ['==', 'extrude', 'true'],
            'type': 'fill-extrusion',
            'minzoom': 15,
            'paint': {
                'fill-extrusion-color': '#aaa',

// add a smooth transition effect to the buildings as the user zooms in
                'fill-extrusion-height': [
                    "interpolate", ["linear"], ["zoom"],
                    15, 0,
                    15.05, ["get", "height"]
                ],
                'fill-extrusion-base': [
                    "interpolate", ["linear"], ["zoom"],
                    15, 0,
                    15.05, ["get", "min_height"]
                ],
                'fill-extrusion-opacity': .6
            }
        }, labelLayerId);
    });

map.on("moveend", function() {
        updatePosition()
    });

var updatePosition = function() {
        var settings = 'center: [' + map.getCenter().lng.toFixed(5) + ', ' + map.getCenter().lat.toFixed(5) + '],\n' +
            'zoom: ' + map.getZoom().toFixed(2) + ',\n' + 
            'pitch: ' + map.getPitch().toFixed(2) + ',\n' + 
            'bearing: ' + map.getBearing().toFixed(2) + '\n';
        
        position.innerText = settings;
    };
</script>

</body>
</html>

https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js

https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js