index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Map</title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
        <link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.css" rel="stylesheet" type="text/css">
        <link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
        <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.js"></script>
        <link href="styles/map.css" rel="stylesheet">
    </head>
    <body>
        <main>
            <div id="map"></div>
            
            <nav id="filter-group" class="filter-group">
                <h2>Demo Checkboxes</h2>
            </nav>    
        </main>
        <script src="./scripts/map.js" type="module"></script>
    </body>
</html>