How to use the mapbox-gl.AttributionControl function in mapbox-gl

this.map = new mapboxgl.Map(mapConfig)
      new GestureHandling({ modifierKey: 'ctrl' }).addTo(this.map)

      /* Add controls */

      this.map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), 'top-left')
      this.map.addControl(new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: 'imperial'
      }))
      this.map.addControl(new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: 'metric'
      }))
      this.map.addControl(new mapboxgl.AttributionControl({
        customAttribution: 'MapBox | Government of British Columbia, DataBC, GeoBC '
      }))

      this.map.on('load', () => {
        this.marker = buildLeafletStyleMarker(this.longitude, this.latitude, { draggable: this.draggable })

        if (this.draggable) {
          this.marker.on('dragend', (ev) => {
            this.handleDrag(ev)
          })
        }

        if (this.longitude && this.latitude) {
          this.coordsChanged(this.longitude, this.latitude)

          this.marker.addTo(this.map)

const map = new mapboxgl.Map({
      attributionControl: false,
      container: this.mapContainer,
      hash: false,
      style: getMapStyleForType(this.props.mode),
      zoom: this.props.zoomLevel,
      center: this.props.center,
    });

    map.on('style.load', () => {
      this._addMarkers();
      this._addLayers();
    });

    map.addControl(
      new mapboxgl.AttributionControl({
        compact: true,
        customAttribution: mapboxgl.accessToken
          ? '' // Included by mapbox
          : '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      }),
    );
    map.addControl(new mapboxgl.NavigationControl({}));
    const {getFeaturePopoutContent, getFeatureHoverPopoutContent} = this.props;
    if (getFeaturePopoutContent || getFeatureHoverPopoutContent) {
      this.props.layers.forEach(layer =&gt; {
        if (this._getLayerStyles(layer)[CIRCLE_LAYER_STYLE]) {
          const layerId = `${layer.source.key}_${CIRCLE_LAYER_STYLE}`;
          this._registerClick(map, layerId);
        }
        if (this._getLayerStyles(layer)[ICON_LAYER_STYLE]) {
          const layerId = `${layer.source.key}_${ICON_LAYER_STYLE}`;

initMap() {
    const map = new mapboxgl.Map({
      attributionControl: false,
      container: this.mapContainer,
      hash: false,
      style: getDefaultMapStyle(),
      zoom: 2,
      center: [0, 0],
    });

    map.addControl(
      new mapboxgl.AttributionControl({
        compact: true,
        customAttribution: mapboxgl.accessToken
          ? '' // Included by mapbox
          : '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      }),
    );
    map.addControl(new mapboxgl.NavigationControl({}));
    map.addControl(new mapboxgl.ScaleControl({position: 'bottom-left'}));

    this.setState({map});
  }

initMap() {
    const map = new mapboxgl.Map({
      attributionControl: false,
      container: this.mapContainer,
      hash: false,
      style: getDefaultMapStyle(),
      zoom: 2,
      center: [0, 0],
    });

    map.addControl(
      new mapboxgl.AttributionControl({
        compact: true,
        customAttribution: mapboxgl.accessToken
          ? '' // Included by mapbox
          : '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      }),
    );
    map.addControl(new mapboxgl.NavigationControl({}));
    map.addControl(new mapboxgl.ScaleControl({position: 'bottom-left'}));

    this.setState({map});
  }

map.addControl(new CustomControls({}));

		map.addControl(new MapboxInspect({
			popup: new MapboxGl.Popup({
				closeButton: true,
				closeOnClick: false
			}),
			showInspectButton: false,
			showMapPopup: true,
			showMapPopupOnHover: false,
			showInspectMapPopupOnHover: false,
			renderPopup: this.renderPopup.bind(this)
		}));

		map.addControl(new MapboxGl.AttributionControl({
			compact: true
		}));

		const nav = new MapboxGl.NavigationControl();
		map.addControl(nav, 'top-right');

		console.log('version:',MapboxGl);

		map.on('error',(e)=>{
			console.error('map error:',e);
			if (e.sourceId){
				const error = {
					message:'sources.'+e.sourceId+'.url: error loading source'
				};
				return Mstyle.errorAdd(error);
			}

componentDidMount() {
        this.mapbox = new MapboxGL.Map({
            container: 'map',
            style: 'style.json',
            center: this.props.center,
            zoom: this.props.zoom,
            attributionControl: false
        });
        this.mapbox.addControl(new MapboxGL.NavigationControl(), 'bottom-right');
        this.mapbox.addControl(new MapboxGL.AttributionControl({
            customAttribution: `
                Development still in progress. Source code on <a href="https://github.com/mapkeep/mapkeep">GitHub</a>.<br>
                © <a href="https://github.com/openmaptiles/openmaptiles/blob/3a1a2b4210935d0a898e4c36672836b69eecb61e/LICENSE.md">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>
            `
        }), 'bottom-left');
        if (process.env.NODE_ENV === 'development') {
            window.mapbox = this.mapbox;
        }
        this.mapbox.on('moveend', () =&gt; {
            this.props.onBoundsChange(this.mapbox.getBounds());
            this.props.onCenterChange(this.mapbox.getCenter().toArray());
        });
        this.mapbox.on('zoomend', () =&gt; {
            this.props.onZoomChange(this.mapbox.getZoom());
        });
        this.props.onBoundsChange(this.mapbox.getBounds());

data,
        } = this.props;

        this.oarMap = new mapboxgl.Map({
            container: this.mapContainer.current,
            style: 'mapbox://styles/mapbox/streets-v9',
            attributionControl: false,
            logoPosition: 'bottom-right',
            zoom,
            center: [
                lng,
                lat,
            ],
        });

        this.oarMap.addControl(new mapboxgl.AttributionControl({
            compact: true,
        }));

        this.oarMap.addControl(
            new mapboxgl.NavigationControl(),
            'top-right',
        );

        this.oarMap.on(moveEvent, this.handleMapMove);
        this.oarMap.on(clickEvent, this.handleMapClick);

        this.oarMap.on(styleLoadEvent, () => {
            if (data) {
                this.oarMap.addSource(
                    FACILITIES_SOURCE,
                    createSourceFromData(data),

onZoom: this.zoomToBBox
      }), 'top-left')
      this.map.addControl(new mapboxgl.GeolocateControl({
        positionOptions: {
          enableHighAccuracy: true
        }
      }), 'top-left')
      this.map.addControl(new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: 'imperial'
      }))
      this.map.addControl(new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: 'metric'
      }))
      this.map.addControl(new mapboxgl.AttributionControl({
        customAttribution: 'MapBox | Government of British Columbia, DataBC, GeoBC '
      }))
      this.layersControl = new LayersControl({
        layers: this.mapLayers,
        onChange: this.layersChanged
      })
      this.map.addControl(this.layersControl)
      this.legendControl = new LegendControl({
        layers: this.mapLayers
      })
      this.map.addControl(this.legendControl, 'bottom-right')
      this.searchAreaControl = new SearchAreaControl({
        show: false,
        onClick: this.searchButtonClicked
      })
      this.map.addControl(this.searchAreaControl, 'top-centre')