Leaflet.jsと国土数値情報で作る鉄道路線・駅マップ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路線 ＆ 駅マップ</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style>
        body { margin: 0; padding: 0; background: #111; font-family: sans-serif; }
        #map { width: 100vw; height: 100vh; }

        /* ポップアップのダークテーマ化 */
        .leaflet-popup-content-wrapper, .leaflet-popup-tip {
            background-color: #222;
            color: #fff;
            border: 1px solid #444;
        }
        .leaflet-popup-content b { color: #00ffcc; }

        /* 駅名ラベル（背景透明＋黒フチ文字） */
        .station-label {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            color: #ffffff !important;
            font-size: 11px !important;
            font-weight: bold !important;
            text-shadow:
                1px 1px 2px #000,
               -1px -1px 2px #000,
                1px -1px 2px #000,
               -1px 1px 2px #000,
                0px 0px 4px #000;
            pointer-events: none;
        }
        .station-label::before { display: none !important; }
    </style>
</head>
<body>
    <div id="map"></div>

    <!-- JS化した路線・駅データ -->
    <script src="./N02-20_RailroadSection.js"></script>
    <script src="./N02-20_Station.js"></script>

    <script>
        // preferCanvas: true で大量のマーカーもCanvasにまとめて描画する
        const map = L.map('map', { preferCanvas: true })
            .setView([35.6812, 139.7671], 13); // 東京駅周辺

        // Esri ダークグレータイル（Flight Monitorと同じ）
        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
            attribution: '&copy; Esri',
            maxZoom: 16
        }).addTo(map);

        // 1. 路線データの描画（JRは緑、それ以外はオレンジ）
        if (typeof railwayData !== 'undefined') {
            L.geoJSON(railwayData, {
                style: function(feature) {
                    const props = feature.properties || {};
                    const isJR = (props.N02_004 || '').includes('旅客鉄道');
                    return {
                        color: isJR ? '#00ffcc' : '#ff7700',
                        weight: 2.5,
                        opacity: 0.8
                    };
                },
                onEachFeature: function(feature, layer) {
                    const props = feature.properties || {};
                    layer.bindPopup(`<b>${props.N02_004 || ''}</b><br>${props.N02_003 || ''}`);
                }
            }).addTo(map);
        }

        // 2. 駅データを座標の配列としてメモリに保持（この時点ではDOMを作らない）
        const stationList = [];
        if (typeof stationData !== 'undefined') {
            stationData.features.forEach(feature => {
                const geom = feature.geometry || {};
                const props = feature.properties || {};
                let lat, lng;

                if (geom.type === 'MultiLineString' && geom.coordinates.length > 0) {
                    // coordinates[ライン番号][頂点番号][0:経度, 1:緯度]
                    const firstLine = geom.coordinates[0];
                    const mid = Math.floor(firstLine.length / 2);
                    lng = firstLine[mid][0];
                    lat = firstLine[mid][1];
                } else if (geom.type === 'LineString' && geom.coordinates.length > 0) {
                    const mid = Math.floor(geom.coordinates.length / 2);
                    lng = geom.coordinates[mid][0];
                    lat = geom.coordinates[mid][1];
                } else if (geom.type === 'Point') {
                    lng = geom.coordinates[0];
                    lat = geom.coordinates[1];
                }

                if (lat !== undefined && lng !== undefined) {
                    stationList.push({
                        lat: lat,
                        lng: lng,
                        name: props.N02_005 || '駅名未設定',
                        line: props.N02_003 || '',
                        company: props.N02_004 || ''
                    });
                }
            });
        }

        // 3. 画面内に入っている駅だけピンとラベルを生成する
        const visibleStationLayer = L.layerGroup().addTo(map);

        function updateVisibleStations() {
            visibleStationLayer.clearLayers();

            // 広域表示（ズーム13未満）では何も作らない
            if (map.getZoom() < 13) return;

            const bounds = map.getBounds();
            for (let i = 0; i < stationList.length; i++) {
                const st = stationList[i];
                if (!bounds.contains([st.lat, st.lng])) continue;

                const marker = L.circleMarker([st.lat, st.lng], {
                    radius: 5,
                    fillColor: '#ffffff',
                    color: '#00ffff',
                    weight: 2,
                    opacity: 1,
                    fillOpacity: 0.9
                });

                marker.bindTooltip(st.name, {
                    permanent: true,
                    direction: 'right',
                    offset: [6, 0],
                    className: 'station-label'
                });

                marker.bindPopup(`<b>${st.name}駅</b><br>${st.company} / ${st.line}`);
                visibleStationLayer.addLayer(marker);
            }
        }

        // 移動・ズームが止まった時に再判定し、初回ロード時にも実行する
        map.on('moveend', updateVisibleStations);
        updateVisibleStations();
    </script>
</body>
</html>