【Leaflet入門】世界地図にMarkerをまとめて生成する方法

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

今回は、Leafletで世界地図にMarkerをまとめて生成する方法について解説していきます。

1 世界地図にMarkerをまとめて生成するSampleCode
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

世界地図にMarkerをまとめて生成するSampleCode

世界地図にMarkerをまとめて生成するSampleCodeを用意しました。

ポイントは、追加したいマーカーの座標データ(緯度・経度)や処理に使いたいデータを1つのObjectとして用意して、

それを配列にまとめ、for文でMarkerを作成している点です。


<html style="height: 100%; margin: 0;">
    <head>
        <title>Leaflet</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css" />
        <script src="./node_modules/leaflet/dist/leaflet.js"></script>
    </head>
    
    <body style="height: 100%; margin: 0; overflow: hidden;">
        <div id="map" style="height: 100%; width: 100%;"></div>
    </body>
  

    <script>

        // [ 世界地図にMarkerをまとめて生成するSampleCode ]

        // worldCopyJump => // 世界地図を移動してもMarkerが継承される
        const map = L.map("map", {worldCopyJump: true, scrollWheelZoom:false});
        const markers = [];


        console.log({screen});

        let defaultCenter = [11.759904021299954, 29.48264020837478];

        // Screen-Size によって、Default の中心表示座標を変える
        if(screen.width < 768) {
            defaultCenter = [35.3622222, 138.7313889];
        }

        // Mapのtileを選択
        map.options.maxZoom = 4;
        map.options.minZoom = 2;
        L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/english/{z}/{x}/{y}.png", {
            attribution:
            "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>",
        }).addTo(map);

        map.setView(defaultCenter, 3);

        // マーカーの座標データ(緯度・経度)とクリックイベントで渡したいデータをセット
        const countries = [
            {id: 1, pos:[35.689444,139.69167]},
            {id: 2, pos:[30.0444196,31.2357116]},
            {id: 3, pos:[-34.6036844,-58.3815591]},
            {id: 4, pos:[-35.308129,149.124402]},
            {id: 5, pos:[4.9030522,114.939821]},
            {id: 6, pos:[45.4215296,-75.6971931]},
            {id: 7, pos:[-21.2129007,-159.7823059]},
            {id: 8, pos:[6.8867616,79.9187142]},
            {id: 9, pos:[52.5200066,13.404954]},
            {id: 10, pos:[9.0764785,7.398574]},
            {id: 11, pos:[2.0469343,45.3181623]},
            {id: 12, pos:[-15.794392,-47.882004]},
            {id: 13, pos:[48.856614,2.3522219]},
            {id: 14, pos:[41.7151377,44.827096]},
            {id: 15, pos:[37.9838096,23.7275388]},
            {id: 16, pos:[-13.8506958,-171.7513551]},
            {id: 17, pos:[-9.4438004,147.1802671]},
            {id: 18, pos:[28.6139391,77.2090212]},
            {id: 19, pos:[33.6844202,73.0478848]},
            {id: 20, pos:[41.9027835,12.4963655]},
            {id: 21, pos:[26.2285161,50.5860497]},
            {id: 22, pos:[50.8503463,4.3517211]},
            {id: 23, pos:[11.5563738,104.9282099]},
            {id: 24, pos:[55.6760968,12.5683372]},
            {id: 25, pos:[59.9138688,10.7522454]},
            {id: 26, pos:[24.7135517,46.6752957]},
            {id: 27, pos:[40.4167754,-3.7037902]},
            {id: 28, pos:[13.7563309,100.5017651]},
            {id: 29, pos:[-21.1393418,-175.204947]},
            {id: 30, pos:[3.139003,101.686855]},
            {id: 31, pos:[-41.2864603,174.776236]},
            {id: 32, pos:[-19.0553711,-169.9178709]},
            {id: 33, pos:[36.753768,3.0587561]},
            {id: 34, pos:[23.810332,90.4125181]},
            {id: 35, pos:[39.9041999,116.4073963]},
            {id: 36, pos:[39.9041999,116.4073963]},
            {id: 37, pos:[38.7222524,-9.1393366]},
            {id: 38, pos:[40.4092617,49.8670924]},
            {id: 39, pos:[-33.4488897,-70.6692655]},
            {id: 40, pos:[9.9280694,-84.0907246]},
            {id: 41, pos:[11.5720765,43.1456475]},
            {id: 42, pos:[13.6929403,-89.2181911]},
            {id: 43, pos:[59.4369608,24.7535747]},
            {id: 44, pos:[-18.1248086,178.4500789]},
            {id: 45, pos:[60.1698557,24.9383791]},
            {id: 46, pos:[5.6037168,-0.1869644]},
            {id: 47, pos:[18.594395,-72.3074326]},
            {id: 48, pos:[64.1265206,-21.8174392]},
            {id: 49, pos:[-6.2087634,106.845599]},
            {id: 50, pos:[-1.2920659,36.8219462]},
            {id: 51, pos:[1.4518171,172.9716617]},
            {id: 52, pos:[37.552361,126.991432]},
            {id: 53, pos:[-18.8791902,47.5079055]},
            {id: 54, pos:[4.1754959,73.5093474]},
            {id: 55, pos:[35.8989085,14.5145528]},
            {id: 56, pos:[-20.1608912,57.5012222]},
            {id: 57, pos:[-0.5466857,166.9210913]},
            {id: 58, pos:[7.4951158,134.6336896]},
            {id: 59, pos:[-12.0463731,-77.042754]},
            {id: 60, pos:[52.2296756,21.0122287]},
            {id: 61, pos:[14.716677,-17.4676861]},
            {id: 62, pos:[-4.619143,55.4513149]},
            {id: 63, pos:[8.4656765,-13.2317225]},
            {id: 64, pos:[1.355429,103.867722]},
            {id: 65, pos:[-25.7478676,28.2292712]},
            {id: 66, pos:[7.1164214,171.1857736]},
            {id: 67, pos:[14.5995124,120.9842195]},
            {id: 68, pos:[19.7633057,96.0785104]},
            {id: 69, pos:[10.6549013,-61.5019256]},
            {id: 70, pos:[39.9333635,32.8597419]},
        ];

        for(var i = 0; i< countries.length; i++) {

            // Marker作成
            markers[i] = L.marker(countries[i].pos)
            .addTo(map)
            .on("click", function (e) {
                onClickMarker(e);
            });

            markers[i].country_id = countries[i].id;
        }

        // クリックイベントで発火する関数
        function onClickMarker(e) {
            console.log(e);
        }
    </script>
        
    </script>
    </html>

HTMLファイルを実行すると次のような世界地図が表示されます。