あちあち情報局

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
~~NOCACHE~~
[[:programming_start]]
====== Leaflet マーカークラスタ ======
Leaflet 1系とleaflet.markerclusterプラグイン(v1.4.0)を使用して複数のマーカーをクラスタにまとめます。

注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」
----
===== デモ =====
ズームを動かすとマーカーが1つに纏まったり本来の位置に戻ったりします。

<html>
<div id="mapid" style="width: 100%; height: 400px;"></div>
<script src="https://www.achiachi.net/blog/_outside/leaflet/v1/leaflet.js"></script>
<script src="https://www.achiachi.net/blog/_outside/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://www.achiachi.net/blog/_outside/leaflet/v1/leaflet.css");
  cssLoad("https://www.achiachi.net/blog/_outside/leaflet_cluster/v1/MarkerCluster.css");
  cssLoad("https://www.achiachi.net/blog/_outside/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(){

    var clusters = L.markerClusterGroup({
      disableClusteringAtZoom:11, //クラスタ化を解除するズーム
      maxClusterRadius: 50,  //クラスタ化の半径(初期値80)
     animate:false
    });

    mymap = L.map('mapid'); 
    L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, '
    }).addTo(mymap);

  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>
</html>


<html>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- respon_0 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9251612436023685"
     data-ad-slot="1409739163"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</html>


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

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

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

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

----
===== ソースコード =====
<code javascript>
<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>
</code>

<html>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- respon_0 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9251612436023685"
     data-ad-slot="1409739163"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</html>


----
===== 説明 =====
基本部分は[[map]]をご覧ください。

markercluster.jsプラグインのロード。
<code javascript>
<script src="https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/leaflet.markercluster.js"></script>
</code>

markercluster.jsで使用するcssの読み込み。通常はヘッダ要素内でロードしますがDokuWIkiでは個別にヘッダを編集できないのでJavaScriptでロードしています。
<code javascript>
cssLoad("https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/MarkerCluster.css");
cssLoad("https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/MarkerCluster.Default.css");
</code>

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

マーカーをクラスタレイヤーに登録
<code javascript>
clusters.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都") );
</code>

クラスタレイア―をマップに反映
<code javascript>
mymap.addLayer(clusters);
</code>