【Leaflet入門】Leafletで世界地図を作成して、首都にピン(マーカー)を立てる方法

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

今回は、JavaScriptの地図作成ライブラリであるLeafletを使って、世界地図を作成して、首都にピン(マーカー)を立てる方法について解説していきます。

1 SampleCodeの実行イメージ
2 世界地図を作成して、首都にピン(マーカー)を立てるSampleCode全文
3 Mapのインスタンス(地図のObject)を作成する
4 Web上で公開されている地図データを読み込む
5 MapのインスタンスにMarkerを追加する
6 JavaScript書籍 Ver. 中級-上級者向け
7 JavaScript書籍 Ver. 初級者向け
8 Twitterやってます！Follow Me！
9 最近の投稿

SampleCodeの実行イメージ

今回の世界の首都の座標情報(「緯度/経度」の情報)は、アマノ技研さんのデータを使わせていただきました。

世界の首都の位置データ Location Data of World Capitals

アマノ技研さん、素晴らしいCSVデータをありがとうございます。

まずは、完成物のイメージから見ていきましょう。

Sampleなのでいくつかの国にしか「ピン」(LeafletではMarkerと言う)を立ててはいません。

ちなみに、右端で日本のMarkerからPopupが出ていますが、MarkerをClickするとPopupが現れるようになっています。

世界地図を作成して、首都にピン(マーカー)を立てるSampleCode全文

上記の世界地図を作っているSrcCodeは次のとおりです。

簡単にポイントをピックアップすると、

Mapのインスタンス(地図のObject)を作成する。
Web上で公開されている地図データを読み込む。
MapのインスタンスにMarkerを追加する。

このような、3-Stepで世界地図&ピン(マーカー)生成をしています。

それぞれ、解説していきます。

<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').setView([51.5, -0.09], 3);

    // setView([ 緯度, 経度 ], ZoomLevel) で初期のView中心地点を設定

    // [51.5, -0.09] => 指定座標は、イギリス
    

    // 2. 地図データの読み込み & 設定値を追加

    // 2-1. openstreetmap の地図データを読み込む！
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    // Web配信されている地図のURL
    // => OpenStreetMap や 国土地理院などのMap-Dataを選択することができる！

        // 2-2. 設定値を追加する
        {   // attribution: 地図の右下の属性表示・内容
            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            maxZoom: 12, // maxZoom: ズームレベルの最大値を指定します。
            minZoom: 2,  // minZoom: ズームレベルの最小値を指定します。
        }
    ) // 2-3. Map-Instanceに登録する。
    .addTo(map);

    
    // 3. marker() & addTo() で指定-Pointに、Markerを追加する！
    // => marker() を作成して、addTo() で Map-Instanceに登録する。
    L.marker([51.5, -0.09]).addTo(map).bindPopup('ロボ玉万歳！！<br> 神聖グンマー帝国、万歳！！');

    // 4. bindPopup() でPopupを設定できる！

    L.marker([38.9, -77.01]).addTo(map).bindPopup('アメリカ合衆国-Robotama').openPopup();

    L.marker([38.9, 35.2]).addTo(map).bindPopup('イスラエル国-Robotama');

    L.marker([41.89, 12.48]).addTo(map).bindPopup('イタリア共和国-Robotama');

    L.marker([52.5, 13.4]).addTo(map).bindPopup('ドイツ連邦共和国-Robotama').openPopup();

    // 5. openPopup() でデフォルトで開かれるPopupを指定することができる。
    L.marker([35.68, 139.69]).addTo(map).bindPopup('日本-Robotama🔥').openPopup();

    // 複数の markerで openPopup()されている場合は、一番最後のPopupが開かれる！

    L.marker([13.75, 100.5]).addTo(map).bindPopup('タイ王国-Robotama');

    L.marker([-41.289, 174.7]).addTo(map).bindPopup('ニュージーランド-Robotama');


</script>

</html>

Mapのインスタンス(地図のObject)を作成する

まずこのStepでは、Mapのインスタンス(地図のObject)を作成しています。

L.map(‘map’)で、id名「map」のHTML要素をMapのインスタンス(地図のObject)に設定しています。

また、次の setView([ 緯度, 経度 ], ZoomLevel) で初期のView中心地点を設定しています。

今回の初期のView中心地点は、イギリスに設定しています。

<!-- 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').setView([51.5, -0.09], 3);

    // setView([ 緯度, 経度 ], ZoomLevel) で初期のView中心地点を設定

    // [51.5, -0.09] => 指定座標は、イギリス


</script>

Web上で公開されている地図データを読み込む

次は、Web上で公開されている地図データを読み込む部分です。

L.tileLayer() の第一引数に読み込む地図データ情報を設定します。

今回、設定している「 ‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’ 」は「OpenStreetMap」と言う地図データです。

機能面で考えて「OpenStreetMap」はすぐれているのでオススメです。

日本の地理情報に限定するのなら「国土地理院」の地図データ情報にするのもいいと思います。

第二引数には、Mapの右下に表示される属性表示を設定できたり、

地図のZoomレベルを指定することができます。

そして、最後に addTo() で設定したデータをMapインスタンスに登録します。

<script>

    // 2. 地図データの読み込み & 設定値を追加

    // 2-1. openstreetmap の地図データを読み込む！
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    // Web配信されている地図のURL
    // => OpenStreetMap や 国土地理院などのMap-Dataを選択することができる！

        // 2-2. 設定値を追加する
        {   // attribution: 地図の右下の属性表示・内容
            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            maxZoom: 12, // maxZoom: ズームレベルの最大値を指定します。
            minZoom: 2,  // minZoom: ズームレベルの最小値を指定します。
        }
    ) // 2-3. Map-Instanceに登録する。
    .addTo(map);

</script>

MapのインスタンスにMarkerを追加する

最後に、今回の目玉である首都にピン(Marker)を追加する実装部分です。

L.marker( [ 緯度, 経度] ) でMarkerインスタンスを指定の座標に作成します。

そしてそれを addTo() でMapインスタンスに登録します。

これが地図にMarkerを追加する基本です。

そして、今回の場合はPopupを表示する実装をしていますが、

それは bindPopup() の部分です。

bindPopupメソッドの引数には、Popupに表示させる内容を設定します。

また、openPopup() でデフォルトで開かれるPopupを指定することができます。

ただ、注意点として、複数の markerで openPopup()されている場合は、

一番最後のPopupが開かれるような仕様になっているようなので気をつけてください。

<script>

    // 3. marker() & addTo() で指定-Pointに、Markerを追加する！
    // => marker() を作成して、addTo() で Map-Instanceに登録する。
    L.marker([51.5, -0.09]).addTo(map).bindPopup('ロボ玉万歳！！<br> 神聖グンマー帝国、万歳！！');

    // 4. bindPopup() でPopupを設定できる！

    L.marker([38.9, -77.01]).addTo(map).bindPopup('アメリカ合衆国-Robotama').openPopup();

    L.marker([38.9, 35.2]).addTo(map).bindPopup('イスラエル国-Robotama');

    L.marker([41.89, 12.48]).addTo(map).bindPopup('イタリア共和国-Robotama');

    L.marker([52.5, 13.4]).addTo(map).bindPopup('ドイツ連邦共和国-Robotama').openPopup();

    // 5. openPopup() でデフォルトで開かれるPopupを指定することができる。
    L.marker([35.68, 139.69]).addTo(map).bindPopup('日本-Robotama🔥').openPopup();

    // 複数の markerで openPopup()されている場合は、一番最後のPopupが開かれる！

    L.marker([13.75, 100.5]).addTo(map).bindPopup('タイ王国-Robotama');

    L.marker([-41.289, 174.7]).addTo(map).bindPopup('ニュージーランド-Robotama');

</script>