ズームレベルによって地図上のマーカーを表示と非表示を切り替えます。

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

ズームを変えるとマーカーが変化します。初期状態ではアイコンマーカーを表示し、広域ではアイコンを消して警告マーカーが表示されます。

主にコメント行がある部分がLeaflet - OpenStreetMap表示からの変更部分です。

HTML部分

<!-- 警告表示用のスタイル設定 -->
<style>
  .divicon2{background:#ff0; color:red; text-align: center; font-size: 16px;vertical-align: middle;}
</style>
 
 
<div id="mapid" style="width: 100%; height: 400px;"></div>

JavaScript部分

<script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.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");
  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'); 
    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);
 
 
    //グループを2つ準備
    iconMarkers = L.featureGroup();
    stopMarkers = L.featureGroup();
 
 
    //アイコンマーカーをiconグループに登録
    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)") );
 
 
    //広域用のdivIconをセット
    var divIcon4 = L.divIcon({
      html: 'この倍率では<br>マーカー表示できません',
      className: 'divicon2',iconSize: [200,50],iconAnchor: [100,25]
    });
 
    //警告マーカーを(仮座標)で登録
    var msgMarker = L.marker( [0,0],{
      icon:divIcon4,
      zIndexOffset:1000,
      interactive:false
    });
 
    //警告マーカーをグループに登録
    stopMarkers.addLayer( msgMarker );
 
 
    //ズームイベント
    mymap.on('zoomend', function() {
      if (mymap.getZoom() >8){ //8越え(詳細)ならアイコン表示
        mymap.removeLayer(stopMarkers);
        mymap.addLayer(iconMarkers);
      } else {                  //9以下(広域)ならメッセージ表示
        mymap.removeLayer(iconMarkers);
        mymap.addLayer(stopMarkers);
      }
    });
 
 
    mymap.setView([35.6896, 139.6918], 9);
 
 
    //setView後に警告マーカーを中心に移動
    msgMarker.setLatLng(mymap.getCenter());
 
    //ムーブイベントでセンタークロスを移動
    mymap.on('move', function(e) {
      msgMarker.setLatLng(mymap.getCenter());
    });
 
 
  });
</script>

マップの基本部分についてはLeaflet - OpenStreetMap表示をご覧ください。

複数のマーカーを一回で切り替えるためL.featureGroupでマーカーをグループ化する変数を準備します。

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

通常のアイコンマーカーを addLayer でiconMarkersグル―プに登録します。アイコンマーカーについてはLeaflet マーカーとポップアップ表示をご覧ください。

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グル―プに登録します。警告用マーカーのが常に中心に表示される動作はLeaflet センタークロス表示を参考にして下さい。

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

//広域用のdivIconをセット
var divIcon4 = L.divIcon({
  html: 'この倍率では<br>マーカー表示できません',
  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);
  }
});