地図の四隅にボタンを追加する #JavaScript

Mapbox の地図の左上には、拡大・縮小ボタンなどが表示されています。
ここに任意のボタンを追加してみます。

// Control implemented as ES6 class
class HelloWorldControl {
  onAdd(map) {
    this.map = map;

    const homeButton = document.createElement('button');
    homeButton.innerHTML = '<i class="fa fa-home" aria-hidden="true"></i>';
    homeButton.addEventListener('click', (e) => {
        alert('Home button click');
    });

    this.container = document.createElement('div');
    this.container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
    this.container.appendChild(homeButton);

    return this.container;
  }

  onRemove() {
    this.container.parentNode.removeChild(this.container);
    this.map = undefined;
  }
}

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,
    }],
  },      
};

opt.center = [138.73072, 35.36286];
opt.zoom = 13;
const map = new mapboxgl.Map(opt);

map.addControl(new mapboxgl.NavigationControl({
  showCompass: false,
}));

map.addControl(new HelloWorldControl(), 'top-right');

Mapbox custom control buttons - JSFiddle - Code Playground

HelloworldControl というボタンを示すクラスを実装し、そのインスタンスを map.addControl() します。
HelloworldControl の実装での注意点は、コンテナとなる div 要素に mapboxgl-ctrl mapboxgl-ctrl-group のクラスを設定してあげることです。
これを行うと、ボタンの見た目が、拡大・縮小などと同じになります。
逆に見た目を完全に独自にしたい場合はこれを行わず、自分でデザインすることになります。

ボタンの表示位置は画面の四隅(top-right, bottom-right, bottom-left, top-left)が選べます。
位置の細かい指定はできず、地図隅からのマージンも指定できません。
恐らくですが、HelloworldControl の実装方法次第では、隅からの余白を空けることはできるのだとおもいます。

「ボタンが押された」ことの検知も HelloworldControl の実装で行います。Mapbox がサポートできる事はないです。

地図の四隅にボタンを追加する

参考