~~NOCACHE~~ [[:programming_start]] ====== Leaflet マーカークラスタ ====== Leaflet 1系とleaflet.markerclusterプラグイン(v1.4.0)を使用して複数のマーカーをクラスタにまとめます。注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== ズームを動かすとマーカーが1つに纏まったり本来の位置に戻ったりします。

---- ===== leaflet.markerclusterのインストール ===== 自分のサーバーにインストールしなくてもcdnなど外部サーバーから読み込む事ができますが、外部サーバーは停止する事もあるので自分のサーバーにインストールした方が無難です。ダウンロードは GitHub https://github.com/Leaflet/Leaflet.markercluster からできます。必要なファイルは dist フォルダの「leaflet.markercluster.js」「MarkerCluster.css」「MarkerCluster.Default.css」だけです。それらを自分のサーバーにアップロードします。 ---- ===== ソースコード =====



 


//leaflet.markercluster.jsプラグインの読み込み

---- ===== 説明 ===== 基本部分は[[map]]をご覧ください。 markercluster.jsプラグインのロード。

markercluster.jsで使用するcssの読み込み。通常はヘッダ要素内でロードしますがDokuWIkiでは個別にヘッダを編集できないのでJavaScriptでロードしています。


cssLoad("https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/MarkerCluster.css");
cssLoad("https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/MarkerCluster.Default.css");

クラスタ用レイヤー変数の準備とクラスタオプションの設定


var clusters = L.markerClusterGroup({
  disableClusteringAtZoom:11, //クラスタ化を解除するズーム(11以上は通常表示)
  maxClusterRadius: 50  //クラスタ化の半径(初期値80)、大きくすると離れたマーカーも1つにまとめます
  //これ以外にも色々オプションがあります。
});

マーカーをクラスタレイヤーに登録


clusters.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都") );

クラスタレイア―をマップに反映


mymap.addLayer(clusters);