🗺️
Mapbox で初期表示位置(中心とズームレベルまたは範囲)を指定
初期位置を指定したい、しかもクエリパラメータなどで動的に、「中心とズームレベル」または「指定した範囲」を初期位置としたい場合は、new mapboxgl.Map({...})
で直接指定するのではなく、変数にしておいて center
, zoom
のペアまたは bounds
を設定するとよいです。
center
は LngLatLike
であり [経度, 緯度] という degree の配列、bounds
は LngLatBoundsLike
であり、LngLatLike
の配列([[西南], [東北]])です。
index.js
const opt = {
container: 'map',
style: {
// 省略 //
},
};
// ランダム(時刻)で、富士山(中心とズームレベル) か 琵琶湖(範囲) を切り替え
if (new Date().getTime() % 2 == 0) {
opt.center = [138.73072, 35.36286];
opt.zoom = 13;
} else {
opt.bounds = [[135.856934, 34.981346], [136.282654, 35.531947]]; // [[west, south], [east, north]]
// opt.bounds = [135.856934, 34.981346, 136.282654, 35.531947]; // [west, south, east, north] でも ok
}
const map = new mapboxgl.Map(opt);
Discussion