layer.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Layer</title>
        <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
        />
        <script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
        <link
            href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
            rel="stylesheet"
        />
        <style>
            body {
                margin: 10;
                padding: 10;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                /* height: 800px; */
                width: 95%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script type="module">
            import util from 'https://backspaces.github.io/agentscript/src/util.js'
            // const modelParams = util.parseQueryString()
            // const name = Object.keys(modelParams)[0] || 'geojson'

            mapboxgl.accessToken =
                'pk.eyJ1IjoiYmFja3NwYWNlcyIsImEiOiJjanVrbzI4dncwOXl3M3ptcGJtN3oxMmhoIn0.x9iSCrtm0iADEqixVgPwqQ'
            const map = new mapboxgl.Map({
                container: 'map', // container id
                style: 'mapbox://styles/mapbox/streets-v11',
                center: [-105.941109, 35.68222],
                zoom: 9,
                renderWorldCopies: false,
            })
            util.toWindow({ util, map })

            map.on('load', function () {
                // map.addLayer({
                //     id: 'circle',
                //     type: 'circle',
                //     source: {
                //         type: 'geojson',
                //         data: './data/centroids.json',
                //     },
                //     layout: {},
                //     paint: { 'circle-color': 'red' },
                // })

                map.addLayer({
                    id: 'raster',
                    type: 'hillshade', // only layer type for raster-dem
                    source: {
                        type: 'raster-dem',
                        url: 'mapbox://mapbox.terrain-rgb',
                    },
                })

                function report(eventType) {
                    const bounds = map.getBounds().toArray()
                    const [west, south] = bounds[0]
                    const [east, north] = bounds[1]
                    const bbox = [west, south, east, north]
                    const zoom = map.getZoom()
                    console.log(eventType, bbox, zoom)
                }
                map.on('dragend', function (e) {
                    report('dragend')
                    // console.log('dragend', report('dragend'))
                })
                map.on('zoomend', function (e) {
                    report('zoomend')
                    // console.log('zoomend', report('dragend'))
                })
            })
        </script>
    </body>
</html>