Mapbox GL マーカーが全部地図に入るようにする

Javascript

Mapbox GLで地図にマーカーを表示する際に、マーカーの全部を地図の一画面に載せたい、ということはよくあると思います。

普通にboundsを取得して、地図の端っこをそれに合わせることは下記のようにすればできます。

 function resizeToFit(datas) {
 
 	var bounds = new mapboxgl.LngLatBounds();
 
 	datas.forEach(function(data) {
 	    bounds.extend(data.geometry.coordinates);
 	});
  
 	map.fitBounds(bounds);	
 	
 }

が、そうするとマーカーがギリギリに表示されてしまい、見づらいので、少し余裕を持たせます。

 map.fitBounds(bounds, {padding: 30});

自分で書くときは、下記のようにも書けます。

 function resizeToFit(datas) {
 
 	var bounds = new mapboxgl.LngLatBounds();
 
 	datas.forEach(function(data) {
 	    bounds.extend(data.geometry.coordinates);
 	});
 
 	var southWest = bounds.getSouthWest();
 	var northEast = bounds.getNorthEast();
 
 	var adjustLong = (northEast.toArray()[0] - southWest.toArray()[0]) / 20;
 	var adjustLat = (northEast.toArray()[1] - southWest.toArray()[1]) / 20;
 	
 	var adjustSouthWest = [southWest.toArray()[0] - adjustLong, southWest.toArray()[1] - adjustLat];
 	var adjustNorthEast = [northEast.toArray()[0] + adjustLong, northEast.toArray()[1] + adjustLat];
 	
 	var adjustBounds =  mapboxgl.LngLatBounds.convert([adjustSouthWest, adjustNorthEast]);
 
 	map.fitBounds(adjustBounds);	
 	
 }