【Leaflet入門】Leafletの地図タイル切り替えを実装する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptの地図作成ライブラリであるLeafletの地図タイル切り替えを実装する方法について解説していきます。

1 地図タイル切り替えを実装イメージ
2 地図タイル切り替えを実装するSampleCode
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 Twitterやってます！Follow Me！
6 参考・引用
7 最近の投稿

地図タイル切り替えを実装イメージ

地図タイルの切り替えを実装すると、次のような表示する地図タイル・データの種類を選択することができます。

地図タイル切り替えを実装するSampleCode

複数の地図タイルを切り替えるコントロール追加するには、

L.tileLayer() での地図タイル表示ではなく、L.control.layers() で地図タイルのデータを登録しておきます。

今回は、5つの種類の地図タイルをL.control.layers() でLeaflet-Map-Instanceに登録しています。

Defaultでどの地図タイルデータを表示させるのか、addTo() で指定するのを忘れないように注意です。

<html lang="ja" style="height: 100%; margin: 0;">
<head>
    <meta charset="UTF-8">

    <!-- LeafletのLibraryをLoadする -->
    <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css" />
    <script src="./node_modules/leaflet/dist/leaflet.js"></script>

    <title>Leaflet-タイル切替</title>
</head>

<!-- Leafletを全面表示で設定する -->
<body style="height: 100%; margin: 0; overflow: hidden;">
    <div id="map" style="height: 100%; width:100%;" ></div>
</body>

<script>

    // [ Leaflet の 地図タイル切り替え ]

    // 複数の地図タイルを切り替えるコントロール追加します。

    // 1. Map-Instanceを作成する => L(Leaflet)の map() で初期値を設定する。
    const map = L.map('map');

    // 2. タイルサーバーを登録します。
    //（注意：タイルサーバーはそれぞれ利用制限があります確認して利用して下さい）
    L.control.layers(
        {
            "OpenStreetMap": L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', 
            {
                maxZoom: 18,
                attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, '
            }),
            //.addTo(map),
            "地理院 標準地図": L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', 
            {
                maxZoom: 18,
                attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
            })
            // 3. Default-Settingをしておくこと！
            .addTo(map),
            "地理院 淡色地図(Zoom2～)": L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', 
            {
                minZoom: 2,
                maxZoom: 18,
                attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
            }),
            "地理院 English(Zoom2～)": L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/english/{z}/{x}/{y}.png', 
            {
                minZoom: 2,
                maxZoom: 18,
                attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
            }),
            "地理院 陰影起伏(Zoom2～)": L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png', 
            {
                minZoom: 2,
                maxZoom: 18,
                attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
            }),
        }
    ).addTo(map);

    // 4. setView([ 緯度, 経度 ], ZoomLevel) で初期のView地点を設定
    map.setView([51.5, -0.09], 3);


    // [ 参考・引用 ]

    // 1. Leaflet 地図タイル切り替え [あちあち情報局]
    // https://www.achiachi.net/blog/leaflet/layers

    
</script>

</html>