Mapbox initial location

by amay077

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css">
<div id="map" style="position: absolute; top: 0; bottom: 0; width: 100%;"></div>

CSS

body { margin: 0; padding: 0; }

JavaScript

const opt = {
  container: 'map',
  style: {
    version: 8,
    sources: {
      OSM: {
        type: "raster",
        tiles: [
          "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
        ],
        tileSize: 256,
        attribution:
        "OpenStreetMap",
      },
    },
    layers: [{
      id: "BASEMAP",
      type: "raster",
      source: "OSM",
      minzoom: 0,
      maxzoom: 18,
    }],
  },      
};

// ランダム(時刻)で、富士山(中心とズームレベル) か 琵琶湖(範囲) を切り替え
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);