【Leaflet.markercluster】クラスター機能を追加する

ネコニウム研究所

PCを利用したモノづくりに関連する情報や超個人的なナレッジを掲載するブログ

【Leaflet.markercluster】クラスター機能を追加する

2022-8-29 | ,

Leafletで作ったカスタム画像を使った地図にクラスター機能を追加したい!

概要

今回の記事では、Leafletで作ったカスタム画像を使った地図にクラスター機能を追加する手順を掲載する。

Leaflet.markercluster」というライブラリを使ってクラスター機能を追加する。

仕様書

環境

  • Leaflet 1.7.1
  • Leaflet.markercluster 1.4.1

手順書

今回は、「Leaflet.markercluster」というライブラリを使ってクラスター機能を追加する。
最北の部屋の中にある4本の柱にピンを設置して1つのクラスターに属させてみる。

コードは下記のようになる。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Leaflet Test</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
        <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
        <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
        <script>
            function init()
            {
                var xy2lat = function (x, y) {
                return map.unproject([x, y], 4);
                };

                var image = {
                    url: "https://blog.nekonium.com/wp-content/uploads/catacombs_of_the_cursed_witch.png",
                    width: 2030,
                    height: 2730,
                };

                var map = L.map("leaflet-container", {
                    crs: L.CRS.Simple,
                    minZoom: -1,
                    maxZoom: 5,
                });

                var imageBounds = L.latLngBounds([map.unproject([0, image.height], 4), map.unproject([image.width, 0], 4)]);

                map.fitBounds(imageBounds);
                map.setMaxBounds(imageBounds.pad(0.5));

                L.imageOverlay(image.url, imageBounds).addTo(map);

                var custom_pin = L.icon({
                    iconUrl: 'https://blog.nekonium.com/wp-content/uploads/custom-pin.png',
                    iconSize: [32, 32],
                    iconAnchor: [16, 31],
                    popupAnchor: [0, -31],
                });

                var markers = L.markerClusterGroup({
                    spiderfyOnMaxZoom: false,
                    showCoverageOnHover: false,
                    zoomToBoundsOnClick: false
                });

                var mk1 = L.marker(xy2lat(560, 140), { icon: custom_pin }).bindPopup('TopLeft Post');
                markers.addLayer(mk1);
                var mk2 = L.marker(xy2lat(630, 140), { icon: custom_pin }).bindPopup('TopRight Post');
                markers.addLayer(mk2);
                var mk3 = L.marker(xy2lat(560, 210), { icon: custom_pin }).bindPopup('BottomLeft Post');
                markers.addLayer(mk3);
                var mk4 = L.marker(xy2lat(630, 210), { icon: custom_pin }).bindPopup('BottomRight Post');
                markers.addLayer(mk4);
                map.addLayer(markers);
            }
        </script>
    </head>
    <body onload="init()">
        <div id="leaflet-container" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"></div>
    </body>
</html>

解説

クラスターをインスタンス化する部分。引数でオプションを指定できる。

                var markers = L.markerClusterGroup({
                    spiderfyOnMaxZoom: false,
                    showCoverageOnHover: false,
                    zoomToBoundsOnClick: false
                });

ピンを作成して、クラスターに追加する。最後にマップにクラスターを追加する。

                var mk1 = L.marker(xy2lat(560, 140), { icon: custom_pin }).bindPopup('TopLeft Post');
                markers.addLayer(mk1);
                var mk2 = L.marker(xy2lat(630, 140), { icon: custom_pin }).bindPopup('TopRight Post');
                markers.addLayer(mk2);
                var mk3 = L.marker(xy2lat(560, 210), { icon: custom_pin }).bindPopup('BottomLeft Post');
                markers.addLayer(mk3);
                var mk4 = L.marker(xy2lat(630, 210), { icon: custom_pin }).bindPopup('BottomRight Post');
                markers.addLayer(mk4);
                map.addLayer(markers);

デモ

CODEPENで動かしてみると下記のような感じ。

See the Pen
Leaflet MakerCluster Test
by 108nen (@108nen)
on CodePen.

まとめ(感想文)

地図上に統計データを表示するのに使えるかもね!