Mapbox で初期表示位置(中心とズームレベルまたは範囲)を指定

公開:2020/10/23
更新:2020/10/24
1 min読了の目安(約1000字TECH技術記事

初期位置を指定したい、しかもクエリパラメータなどで動的に、「中心とズームレベル」または「指定した範囲」を初期位置としたい場合は、new mapboxgl.Map({...}) で直接指定するのではなく、変数にしておいて center, zoom のペアまたは bounds を設定するとよいです。

centerLngLatLike であり [経度, 緯度] という degree の配列、boundsLngLatBoundsLike であり、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);

DEMO

See Also