Leaflet 全マーカーを画面内に収める

全てのマーカーが画面内に収まるように座標とズームを自動調整して表示します。

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

表示した時にマーカーが画面内に収まるように座標とズームが自動調整されます。（PCならブラウザの幅を大きくしたり小さくした後に再表示すると画面内にマーカーが収まるようなズーム値になっているのがわかると思います）

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

html部分

<div id="mapid" style="width: 100%; height: 400px;"></div>

JavaScript部分

<script src="https://www.achiachi.net/blog/_outside/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://www.achiachi.net/blog/_outside/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'); 
    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);
 
 
    //マーカーをグループ化する変数を準備
    iconMarkers = L.featureGroup();
 
    //アイコンマーカーをiconMarkersグループに登録
    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)") );
 
    //マーカーを地図上に表示
    iconMarkers.addTo(mymap);
 
    //削除→mymap.setView([35.6896, 139.6918], 9);
 
    //グループが全て収まる座標とズームで表示
    mymap.fitBounds(iconMarkers.getBounds());
 
 
  });
</script>

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

マーカーをグループ化する変数を準備します

iconMarkers = L.featureGroup();

マーカーをグループ化します。マーカーについての説明はLeaflet マーカーとポップアップ表示をご覧ください。

iconMarkers.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都(icon)") );
iconMarkers.addLayer( L.marker([35.6050, 140.1234]).bindPopup("千葉県(icon)") );
//グループ変数.addLayer( マーカー設定 );

グループ化したマーカーを地図にセット

iconMarkers.addTo(mymap);

getBounds()にグループ化したマーカーの北端・南端・西端・東端を抽出して、fitBounds()で画面におさまる座標と倍率で地図を表示します。

mymap.fitBounds(iconMarkers.getBounds());

グループ化を使わなくてもマーカーの北端・南端・西端・東端の緯度経度を手動でセットする事で同じような事ができます。

var bounds = L.latLngBounds([35.8572,139.6918], [35.6050,140.1234]);    
//var bounds = L.latLngBounds([北端緯度,西端経度], [南端緯度,東端経度]);
//   （※全ての端が分かればよいので、北と南は入れ替わってもよい、西と東は入れ替わってもよいです）
mymap.fitBounds(bounds);