MapLibre GL JSと国土地理院データで作るWeb地図

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MapLibre 国土地理院 標準地図サンプル</title>
    <!-- MapLibre GL JSのCSS読み込み -->
    <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
        body { margin: 0; padding: 0; }
        #map { width: 100%; height: 100vh; }</style>
</head>
<body>
    <div id="map"></div>

    <!-- MapLibre GL JSのJavaScript読み込み -->
    <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
    <script>
        const map = new maplibregl.Map({
            container: 'map', // 地図を表示するdiv要素のID
            style: {
                version: 8,
                sources: {
                    'gsi-std': {
                        type: 'raster',
                        tiles: [
                            'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'
                        ],
                        tileSize: 256,
                        attribution: '<a href="<https://maps.gsi.go.jp/development/ichiran.html>" target="_blank">国土地理院</a>'
                    }
                },
                layers: [
                    {
                        id: 'gsi-std-layer',
                        type: 'raster',
                        source: 'gsi-std',
                        minzoom: 0,
                        maxzoom: 18
                    }
                ]
            },
            center: [139.7671, 35.6812], // 初期表示の中心座標（東京駅周辺）
            zoom: 11
        });</script>
</body>
</html>

npm install maplibre-gl

import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

const map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            'gsi-pale': {
                type: 'raster',
                tiles: [
                    'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'
                ],
                tileSize: 256,
                attribution: '<a href="<https://maps.gsi.go.jp/development/ichiran.html>" target="_blank">国土地理院</a>'
            }
        },
        layers: [
            {
                id: 'gsi-pale-layer',
                type: 'raster',
                source: 'gsi-pale',
                minzoom: 0,
                maxzoom: 18
            }
        ]
    },
    center: [135.0, 35.0],
    zoom: 7
});

const map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            'gsi-vector': {
                type: 'vector',
                tiles: [
                    'https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf'
                ],
                minzoom: 4,
                maxzoom: 16,
                attribution: '<a href="<https://github.com/gsi-cyberjapan/gsimaps-vector-experiment>" target="_blank">国土地理院ベクトルタイル提供実験</a>'
            }
        },
        layers: [
            {
                id: 'background',
                type: 'background',
                paint: { 'background-color': '#f8f4f0' }
            },
            {
                id: 'transp-road',
                type: 'line',
                source: 'gsi-vector',
                'source-layer': 'road', // ベクトルタイル内のソースレイヤー名
                paint: {
                    'line-color': '#ff9900',
                    'line-width': 1.5
                }
            }
        ]
    },
    center: [139.7671, 35.6812],
    zoom: 14
});

// 地図の初期化とDEMソース・3D地形の設定例
const map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            'gsi-std': {
                type: 'raster',
                tiles: ['https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'],
                tileSize: 256,
                attribution: '<a href="<https://maps.gsi.go.jp/development/ichiran.html>" target="_blank">国土地理院</a>'
            },
            // 標高DEMソースの定義（※利用する環境に応じたDEMタイルURLやエンコード設定が必要）
            'gsi-terrain': {
                type: 'raster-dem',
                tiles: [
                    // 注: 国土地理院の標高タイルをそのまま指定する場合、デコード処理や変換済みタイル配信の併用を推奨
                    'https://cyberjapandata.gsi.go.jp/xyz/dem_png/{z}/{x}/{y}.png'
                ],
                tileSize: 256,
                maxzoom: 15
            }
        },
        layers: [
            {
                id: 'gsi-std-layer',
                type: 'raster',
                source: 'gsi-std'
            },
            {
                id: 'hills',
                type: 'hillshade',
                source: 'gsi-terrain',
                paint: {
                    'hillshade-exaggeration': 0.5 // 陰影の強調度合い
                }
            }
        ]
    },
    center: [138.7274, 35.3606], // 富士山周辺
    zoom: 11,
    pitch: 60, // 傾斜角をつけて3D表示を有効化
    bearing: -20
});

map.on('load', () => {
    // 3D地形の高低差を有効化
    // map.setTerrain({ source: 'gsi-terrain', exaggeration: 1.5 });
});

const vectorStyle = {
    version: 8,
    sources: {
        'gsi-vector': {
            type: 'vector',
            tiles: ['https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf'],
            minzoom: 4,
            maxzoom: 16
        }
    },
    layers: [
        {
            id: 'background',
            type: 'background',
            paint: { 'background-color': '#f2f2f2' }
        },
        {
            id: 'building-layer',
            type: 'fill',
            source: 'gsi-vector',
            'source-layer': 'building', // ベクトルタイル内の建物レイヤー
            paint: {
                'fill-color': '#d0d0d0',
                'fill-opacity': 0.8
            }
        },
        {
            id: 'road-layer',
            type: 'line',
            source: 'gsi-vector',
            'source-layer': 'road', // ベクトルタイル内の道路レイヤー
            paint: {
                'line-color': [
                    'match',
                    ['get', 'class'], // 道路種別プロパティに応じた色分け
                    'highway', '#ff5722',
                    'major_road', '#ff9800',
                    '#b0bec5' // その他道路の色
                ],
                'line-width': [
                    'interpolate', ['linear'], ['zoom'],
                    10, 1,
                    16, 4
                ]
            }
        }
    ]
};

map.on('load', () => {
    // 独自のGeoJSONデータをソースとして追加
    map.addSource('custom-spots', {
        type: 'geojson',
        data: {
            type: 'FeatureCollection',
            features: [
                {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [139.7671, 35.6812]
                    },
                    properties: {
                        title: '東京オフィス',
                        description: '東京都千代田区の拠点です。'
                    }
                }
            ]
        }
    });

    // ポイントを円（Circle）として描画するレイヤーを追加
    map.addLayer({
        id: 'spots-circle',
        type: 'circle',
        source: 'custom-spots',
        paint: {
            'circle-radius': 8,
            'circle-color': '#007cbf',
            'circle-stroke-width': 2,
            'circle-stroke-color': '#ffffff'
        }
    });

    // クリックイベントの設定（ポップアップ表示）
    map.on('click', 'spots-circle', (e) => {
        const coordinates = e.features[0].geometry.coordinates.slice();
        const title = e.features[0].properties.title;
        const description = e.features[0].properties.description;

        // 画面端クリック時のズレを防ぐ処理
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }

        new maplibregl.Popup()
            .setLngLat(coordinates)
            .setHTML(`<strong>${title}</strong><p>${description}</p>`)
            .addTo(map);
    });

    // カーソルをポインタに変更
    map.on('mouseenter', 'spots-circle', () => {
        map.getCanvas().style.cursor = 'pointer';
    });
    map.on('mouseleave', 'spots-circle', () => {
        map.getCanvas().style.cursor = '';
    });
});

const map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            'gsi-pale': {
                type: 'raster',
                tiles: ['https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'],
                tileSize: 256,
                attribution: '<a href="<https://maps.gsi.go.jp/development/ichiran.html>" target="_blank">国土地理院</a>'
            },
            'hazard-data': {
                type: 'geojson',
                data: 'https://example.com/data/flood-risk.json' // 外部のハザードマップGeoJSONデータ
            }
        },
        layers: [
            {
                id: 'gsi-pale-layer',
                type: 'raster',
                source: 'gsi-pale'
            },
            {
                id: 'hazard-fill',
                type: 'fill',
                source: 'hazard-data',
                paint: {
                    'fill-color': '#ff4d4d',
                    'fill-opacity': 0.4,
                    'fill-outline-color': '#b30000'
                }
            }
        ]
    },
    center: [139.6917, 35.6895],
    zoom: 12
});

map.on('load', () => {
    map.addSource('stores', {
        type: 'geojson',
        data: {
            type: 'FeatureCollection',
            features: [
                {
                    type: 'Feature',
                    geometry: { type: 'Point', coordinates: [139.7715, 35.6852] },
                    properties: { name: '店舗A', category: 'cafe', address: '東京都中央区...' }
                },
                {
                    type: 'Feature',
                    geometry: { type: 'Point', coordinates: [139.7630, 35.6810] },
                    properties: { name: '店舗B', category: 'shop', address: '東京都千代田区...' }
                }
            ]
        }
    });

    // カテゴリごとに色を分けて円を描画
    map.addLayer({
        id: 'store-points',
        type: 'circle',
        source: 'stores',
        paint: {
            'circle-radius': 7,
            'circle-color': [
                'match',
                ['get', 'category'],
                'cafe', '#ff7043',
                '#42a5f5'
            ],
            'circle-stroke-width': 2,
            'circle-stroke-color': '#ffffff'
        }
    });

    // クリック時のポップアップ表示
    map.on('click', 'store-points', (e) => {
        const coords = e.features[0].geometry.coordinates.slice();
        const props = e.features[0].properties;

        new maplibregl.Popup()
            .setLngLat(coords)
            .setHTML(`<strong>${props.name}</strong><br>住所: ${props.address}`)
            .addTo(map);
    });
});

const map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            'gsi-std': {
                type: 'raster',
                tiles: ['https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'],
                tileSize: 256,
                attribution: '<a href="<https://maps.gsi.go.jp/development/ichiran.html>" target="_blank">国土地理院</a>'
            },
            'gsi-dem': {
                type: 'raster-dem',
                tiles: ['https://cyberjapandata.gsi.go.jp/xyz/dem_png/{z}/{x}/{y}.png'],
                tileSize: 256,
                maxzoom: 15
            }
        },
        layers: [
            {
                id: 'gsi-std-layer',
                type: 'raster',
                source: 'gsi-std'
            },
            {
                id: 'mountain-hills',
                type: 'hillshade',
                source: 'gsi-dem',
                paint: {
                    'hillshade-exaggeration': 0.7,
                    'hillshade-shadow-color': '#2b3e50'
                }
            }
        ]
    },
    center: [137.6485, 36.2598], // 槍ヶ岳・穂高岳周辺
    zoom: 12,
    pitch: 50
});

sources: {
    'gsi-std': {
        type: 'raster',
        tiles: ['https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'],
        tileSize: 256,
        // 出典表記の標準的な指定例
        attribution: '<a href="<https://maps.gsi.go.jp/development/ichiran.html>" target="_blank">国土地理院</a>'
    }
}