[[:programming_start]] ====== Leaflet ズームでマーカー表示・非表示を切り替え ====== ズームレベルによって地図上のマーカーを表示と非表示を切り替えます。注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== ズームを変えるとマーカーが変化します。初期状態ではアイコンマーカーを表示し、広域ではアイコンを消して警告マーカーが表示されます。

---- ===== ソースコード ===== 主にコメント行がある部分が[[map]]からの変更部分です。 HTML部分

JavaScript部分

---- ===== 説明 ===== マップの基本部分については[[map]]をご覧ください。複数のマーカーを一回で切り替えるためL.featureGroupでマーカーをグループ化する変数を準備します。


iconMarkers = L.featureGroup(); //通常マーカー用
stopMarkers = L.featureGroup(); //警告マーカー用

通常のアイコンマーカーを ''addLayer'' でiconMarkersグル―プに登録します。アイコンマーカーについては[[marker]]をご覧ください。


iconMarkers.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都(icon)") );
iconMarkers.addLayer( L.marker([35.6050, 140.1234]).bindPopup("千葉県(icon)") );
iconMarkers.addLayer( L.marker([35.8572, 139.6490]).bindPopup("埼玉県(icon)") );

警告用マーカーを ''addLayer'' でstopMarkersグル―プに登録します。警告用マーカーのが常に中心に表示される動作は[[cross]]を参考にして下さい。


/* スタイルシート */
.divicon2{background:#ff0; color:red; text-align: center; font-size: 16px;vertical-align: middle;}


//広域用のdivIconをセット
var divIcon4 = L.divIcon({
  html: 'この倍率では
マーカー表示できません',
  className: 'divicon2',iconSize: [200,50],iconAnchor: [100,25]
});
//警告マーカーを(仮座標)で登録
var msgMarker = L.marker( [0,0],{
  icon:divIcon4,
  zIndexOffset:1000,
  interactive:false
});
stopMarkers.addLayer( msgMarker );

警告用マーカーをマップ中心に表示するための処理をserViewの後に挿入


//setView後に警告マーカーを中心に移動
msgMarker.setLatLng(mymap.getCenter());

//ムーブイベントでセンタークロスを移動
mymap.on('move', function(e) {
  msgMarker.setLatLng(mymap.getCenter());
});

ズーム変更時のイベントで表示するグループを切り替え。 ''removeLayer()''でグル―プを非表示にして、''addLayer()''でグル―プを表示します。


mymap.on('zoomend', function() {
  if (mymap.getZoom() >8){ //倍率が8を越える(詳細)ならアイコン表示
    mymap.removeLayer(stopMarkers);
    mymap.addLayer(iconMarkers);
  } else {                 //8以下(広域)ならメッセージ表示
    mymap.removeLayer(iconMarkers);
    mymap.addLayer(stopMarkers);
  }
});