Leaflet マーカークラスタ

Leaflet 1系とleaflet.markerclusterプラグイン(v1.4.0)を使用して複数のマーカーをクラスタにまとめます。

注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」

ズームを動かすとマーカーが1つに纏まったり本来の位置に戻ったりします。

自分のサーバーにインストールしなくてもcdnなど外部サーバーから読み込む事ができますが、外部サーバーは停止する事もあるので自分のサーバーにインストールした方が無難です。

ダウンロードは GitHub https://github.com/Leaflet/Leaflet.markercluster からできます。

必要なファイルは dist フォルダの「leaflet.markercluster.js」「MarkerCluster.css」「MarkerCluster.Default.css」だけです。

それらを自分のサーバーにアップロードします。

<div id="mapid" style="width: 100%; height: 400px;"></div>
<script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.js"></script> 
 
 
//leaflet.markercluster.jsプラグインの読み込み
<script src="https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/leaflet.markercluster.js"></script>
 
 
<script>
  function cssLoad(cssFile){
    if(document.all){
      document.createStyleSheet(cssFile);
    }else{
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      link.type = "text/css"
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.css");
 
 
  //leaflet.markercluster.jsで使用するcssの読み込み
  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/MarkerCluster.css");
  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/MarkerCluster.Default.css");
 
 
  function addOnload(evtFunc){
    if(window.addEventListener) {
      window.addEventListener('load', evtFunc, false);
    } else if(window.attachEvent){ //IE用
      window.attachEvent('onload', evtFunc);
    } else {
      //alert('window.onload エラー');
    }
  }
  var mymap;
  addOnload(function(){
 
    mymap = L.map('mapid'); 
    L.tileLayer('https://【タイルサーバーのアドレスとパス】/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="【タイルサーバーの著作権アドレス】" target="_blank">【タイルサーバーの著作者】</a> contributors, '
    }).addTo(mymap);
 
 
    //markerclusterの設定とオプション設定
    var clusters = L.markerClusterGroup({
      disableClusteringAtZoom:11, //クラスタ化を解除するズーム
      maxClusterRadius: 50  //クラスタ化の半径(初期値80)
    });
 
    //クラスタ変数にマーカーを登録
    clusters.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都") );
    clusters.addLayer( L.marker([35.6050, 140.1234]).bindPopup("千葉県") );
    clusters.addLayer( L.marker([35.8572, 139.6490]).bindPopup("埼玉県") );
    clusters.addLayer( L.marker([34.9769, 138.3830]).bindPopup("静岡県") );
    clusters.addLayer( L.marker([35.4478, 139.6426]).bindPopup("神奈川県") );
 
    //クラスタ情報をマップのレイヤーに反映
    mymap.addLayer(clusters);
 
 
    mymap.setView([35.6896, 139.6918], 7);
});
</script>

基本部分はLeaflet - OpenStreetMap表示をご覧ください。

markercluster.jsプラグインのロード。

<script src="https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/leaflet.markercluster.js"></script>

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);