roads.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Roads</title>
        <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
        />
        <script src="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.js"></script>
        <link
            href="https://api.mapbox.com/mapbox-gl-js/v1.9.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 })

            const types = {
                geojson: { data: './data/santafe7roads.json', type: 'geojson' },
                tile: {
                    data: 'mapbox://backspaces.c3ezilfb',
                    type: 'vector',
                },
            }
            const { data, type } = types[name]
            const id = 'santaFe'
            console.log({ type, data, id })

            map.on('load', function () {
                if (type === 'vector' || type === 'mb') {
                    map.addLayer({
                        id: id,
                        type: 'line',
                        source: { type, url: data },
                        layout: {},
                        paint: { 'line-color': 'red' },
                        'source-layer': 'roads',
                    })
                } else {
                    map.addLayer({
                        id: id,
                        type: 'line',
                        source: { type, data },
                        layout: {},
                        paint: { 'line-color': 'red' },
                    })
                }
            })
        </script>
    </body>
</html>