/**
 * @see https://www.mapbox.com/mapbox-gl-js/api/
 */
class Main {
  constructor() {
    this.key = 'pk.eyJ1IjoiaW50ZXJhY3RpdmVrbm93bGVkZ2UiLCJhIjoiY2lraW1rNjhoMDRhdnR5ajc3ejhwYmdtdSJ9.UYtOtCLlht6plDXeogbQkQ';
    this.init();
  }

  init() {
    mapboxgl.accessToken = this.key;

    for (let i = 0; i < 4; i++) {
      const key = i + 1;

      new mapboxgl.Map({
        container: 'map-' + key,
        style: 'mapbox://styles/mapbox/satellite-v9',
        center: [-134.4197200, 58.3019400],
        zoom: 6
      });
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  new Main();
});