~~NOCACHE~~ [[:programming_start]] ====== Leaflet 全マーカーを画面内に収める ====== 全てのマーカーが画面内に収まるように座標とズームを自動調整して表示します。注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== 表示した時にマーカーが画面内に収まるように座標とズームが自動調整されます。（PCならブラウザの幅を大きくしたり小さくした後に再表示すると画面内にマーカーが収まるようなズーム値になっているのがわかると思います）

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

JavaScript部分

---- ===== 説明 ===== マップの基本部分については[[map]]をご覧ください。マーカーをグループ化する変数を準備します


iconMarkers = L.featureGroup();

マーカーをグループ化します。マーカーについての説明は[[marker]]をご覧ください。


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