지도의 네 구석에 버튼을 추가합니다

맥박스 지도의 왼쪽 상단에는 확대, 축소 버튼 등이 표시되어 있다.
여기에 임의의 단추를 추가합니다.

// 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-left,top-left)을 선택할 수 있습니다.
상세한 위치도 지정할 수 없고 지도 구석에서 온 가장자리도 지정할 수 없습니다.
아마 HelloworldControl의 실시 방법에 따라 구석의 공백을 비울 수 있을 것이다.
'버튼이 눌렸다'는 체크도 HelloworldControl 설치에서 진행됐다.맥박스를 지원할 수 있는 일이 없습니다.

참고 자료

https://codepen.io/roblabs/pen/zJjPzX

Build Mapbox GL JS plugins | by Mapbox | maps for developers