勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Leafletで「Leaflet.markercluster」プラグインを導入してマーカークラスタ機能を追加する方法

  JavaScript

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で、マップのズームアウト時にマーカーをクラスタ化させたい。「Leaflet.markercluster」プラグインを導入することで実装できる模様。以下にサンプル及びソースコードをメモ。

 

Leaflet.markercluster

GitHub

https://github.com/Leaflet/Leaflet.markercluster

デモページ

https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.min.css">

 

サンプル

https://taitan916.info/sample/leaflet.js/plugin/Leaflet.markercluster/

ズームアウトしていくとマーカーがクラスタ化される点が確認できる。また、クラスタ化されたマーカーをクリックするとズームインされる筈。

 

実装方法

ソースコード

<div id="map"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-sprite@1.0.0/dist/leaflet.sprite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.min.css">

<script>
let map;
map = L.map('map');

//中心の経度緯度
const center = ['35.681236', '139.767125'];

//ズームレベル
const zoom = 13;

//マップの中心地とズームレベルを指定
map.setView(center, zoom);

const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>',
    maxZoom: 19
});
tileLayer.addTo(map);

//マーカー生成
const mapData = [
    { 'lat' : '35.689607', 'lng' : '139.700571', 'title' : '新宿駅', }, 
    { 'lat' : '35.681236', 'lng' : '139.767125', 'title' : '東京駅', 'icon' : 'green'}, 
    { 'lat' : '35.628471', 'lng' : '139.73876', 'title' : '品川駅', 'icon' : 'orange'}, 
    { 'lat' : '35.658581', 'lng' : '139.745433', 'title' : '東京タワー', 'icon' : 'yellow'}, 
    { 'lat' : '35.660238', 'lng' : '139.730077', 'title' : '六本木ヒルズ', 'icon' : 'red'}, 
    { 'lat' : '35.714765', 'lng' : '139.796655', 'title' : '浅草寺', 'icon' : 'purple'}, 
    { 'lat' : '35.636564', 'lng' : '139.763144', 'title' : 'レインボーブリッジ', 'icon' : 'violet'}, 
];
var marker;

//クラスタグループの生成
var cluster = L.markerClusterGroup();
for( key in mapData ){
    marker = makeMarker(mapData[key]);

    //クラスターにマーカーを追加
    cluster.addLayer(marker);
}

//マップにクラスターを追加
map.addLayer(cluster);

function makeMarker( mapData ){
    const icon = L.spriteIcon(mapData.icon);

    //ポップアップの表示位置調整
    icon.options.popupAnchor = [2, -35];
    const marker =  L.marker([mapData.lat, mapData.lng], {icon: icon, title : mapData.title})
    .bindPopup(mapData.title)
    .addTo(map);

    return marker;
}
</script>

 - JavaScript

  関連記事

Leafletで「sidebar-v2」プラグインを導入してマップ上にサイドバーを設置する方法

Leafletでマップ上にサイドバー及びサイドメニューを実装したい。調べたところ ...

Leafletにて操作内容を履歴に残し「進む」「戻る」ボタンで履歴を実行できる「Leaflet.NavBar」の利用方法

Leafletにてマップ移動やズーム等、ユーザーの操作内容を履歴に残して、「進む ...

Leafletで「leaflet-locatecontrol」プラグインを導入して現在地表示機能を追加する方法

LeafletとOpenStreetMapでマップ表示させ、特定のアイコンをクリ ...

Leafletで「Leaflet-MiniMap」プラグインを導入し通常のマップと連動するミニマップを表示する方法

Leafletでマップを表示した上で、そのマップと連動したミニマップを表示させた ...

Leafletで「leaflet.sprite」プラグインを導入してマーカーの色を変更する方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置したい。 ...