0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

初期位置を指定したい、しかもクエリパラメータなどで動的に、「中心とズームレベル」または「指定した範囲」を初期位置としたい場合は、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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?