Muni Bus

パソコンの操作方法や設定方法を忘れないようにメモしています。ブログを一回引っ越ししているので、所々表示がかなり乱れています・・・

【JavaScript】地図上にピンを立てる（「位置情報エンジニア養成講座」（秀和システム）pp.125-126）

JavaScript

オリジナルとは異なり、地図タイルは地理院タイルを指定し出典明示もそのようにしている。また、初期表示の中心座標も少し北側にずらしている。

<!DOCTYPE html>
<html>
    <head>
        <title>pp.125-126</title>
        <!-- LeafletのCSS読み込み -->
        <link
            rel="stylesheet"
            href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
            integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
            crossorigin=""
        />
        <!-- LeafletのJavaScript読み込み -->
        <script
            src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossorigin=""
        ></script>
    </head>
    <body>
        <div id="map" style="height: 80vh;"></div>
        <script>
            // 地図インスタンスを初期化 (＝div要素に地図画像が埋め込まれる)
            const map = L.map('map', {
                center: [34.0, 137.1], // 初期表示の地図中心の[緯度, 経度]
                zoom: 5, // 初期ズームレベル
            });
            // 背景レイヤーインスタンスを初期化
            const backgroundLayer = L.tileLayer(
                'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', // OSMのURLテンプレート
                {
                    maxZoom: 19,
                    attribution:
                        '&copy; <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
                },
            );
            // 地図インスタンスへレイヤーを追加
            map.addLayer(backgroundLayer);
            // ピンを地図に追加する
            L.marker([33.0, 129.5]).bindPopup('平面直角座標 1系 原点').addTo(map);
            L.marker([33.0, 131.0]).bindPopup('平面直角座標 2系 原点').addTo(map);
            L.marker([36.0, 132.0 + 1 / 6]).bindPopup('平面直角座標 3系 原点').addTo(map);
            L.marker([33.0, 133.0 + 1 / 2]).bindPopup('平面直角座標 4系 原点').addTo(map);
            L.marker([36.0, 134.0 + 1 / 3]).bindPopup('平面直角座標 5系 原点').addTo(map);
            L.marker([36.0, 136.0]).bindPopup('平面直角座標 6系 原点').addTo(map);
            L.marker([36.0, 137.0 + 1 / 6]).bindPopup('平面直角座標 7系 原点').addTo(map);
            L.marker([36.0, 138.0 + 1 / 2]).bindPopup('平面直角座標 8系 原点').addTo(map);
            L.marker([36.0, 139.0 + 5 / 6]).bindPopup('平面直角座標 9系 原点').addTo(map);
            L.marker([40.0, 140.0 + 5 / 6]).bindPopup('平面直角座標 10系 原点').addTo(map);
            L.marker([44.0, 140.0 + 1 / 4]).bindPopup('平面直角座標 11系 原点').addTo(map);
            L.marker([44.0, 142.0 + 1 / 4]).bindPopup('平面直角座標 12系 原点').addTo(map);
            L.marker([44.0, 144.0 + 1 / 6]).bindPopup('平面直角座標 13系 原点').addTo(map);
            L.marker([26.0, 142.0]).bindPopup('平面直角座標 14系 原点').addTo(map);
            L.marker([26.0, 127.5]).bindPopup('平面直角座標 15系 原点').addTo(map);
            L.marker([26.0, 124.0]).bindPopup('平面直角座標 16系 原点').addTo(map);
            L.marker([26.0, 131.0]).bindPopup('平面直角座標 17系 原点').addTo(map);
            L.marker([20.0, 136.0]).bindPopup('平面直角座標 18系 原点').addTo(map);
            L.marker([26.0, 154.0]).bindPopup('平面直角座標 19系 原点').addTo(map);
        </script>
    </body>
</html>