04-01-static-directory/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>04-01-static-directory</title>
        <!-- maplibre gl js-->
        <script src="https://unpkg.com/maplibre-gl@^4.0/dist/maplibre-gl.js"></script>
        <link
            rel="stylesheet"
            href="https://unpkg.com/maplibre-gl@^4.0/dist/maplibre-gl.css"
        />
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map" style="height: 100vh"></div>
        <script>
            // ベクトルタイルとラスタータイルのURL
            const vectortile =
                window.location.origin + '/vector/{z}/{x}/{y}.pbf';
            const rastertile =
                window.location.origin + '/raster/{z}/{x}/{y}.png';

            const map = new maplibregl.Map({
                hash: true,
                container: 'map', // container id
                style: {
                    version: 8,
                    sources: {
                        rastertile: {
                            type: 'raster',
                            tiles: [rastertile],
                            minzoom: 0,
                            maxzoom: 6,
                            tileSize: 256,
                            attribution: 'Natural Earth',
                        },
                        vectortile: {
                            type: 'vector',
                            tiles: [vectortile],
                            minzoom: 0,
                            maxzoom: 6,
                            attribution: '国土数値情報 - 学校データ',
                        },
                    },
                    layers: [
                        {
                            id: 'rastertile',
                            type: 'raster',
                            source: 'rastertile',
                        },
                        {
                            id: 'vectortile',
                            type: 'circle',
                            source: 'vectortile',
                            'source-layer': 'vector',
                            paint: {
                                'circle-color': 'red',
                            },
                        },
                    ],
                },
            });
        </script>
    </body>
</html>