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

const options = {
        attributionControl: false,
        container: this.refs.mapContainer,
        style: mbStyle,
        scrollZoom: this.props.scrollZoom,
        preserveDrawingBuffer: chrome.getInjected('preserveDrawingBuffer', false)
      };
      if (initialView) {
        options.zoom = initialView.zoom;
        options.center = {
          lng: initialView.lon,
          lat: initialView.lat
        };
      }
      const mbMap = new mapboxgl.Map(options);
      mbMap.dragRotate.disable();
      mbMap.touchZoomRotate.disableRotation();
      mbMap.addControl(
        new mapboxgl.NavigationControl({ showCompass: false }), 'top-left'
      );

      let emptyImage;
      mbMap.on('styleimagemissing', (e) => {
        if (emptyImage) {
          mbMap.addImage(e.id, emptyImage);
        }
      });
      mbMap.on('load', () => {
        emptyImage = new Image();
        // eslint-disable-next-line max-len
        emptyImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=';

componentDidMount() {
        if (this.props.match.params.name || this.props.match.params.country) {
            this.props.actions.resetMap();
        }

        // Init maps
        const { lng, lat, zoom } = this.props.map.viewport;
        this.map = new mapboxgl.Map({
            container: this.mapContainer,
            style: 'mapbox://styles/mapbox/streets-v9',
            center: [lng, lat],
            zoom,
            attributionControl: false,
            logoPosition: 'bottom-right',
        }).addControl(new mapboxgl.AttributionControl({
            compact: true,
        }));

        this.cluster = supercluster({
            radius: clusterRadius,
            maxZoom: clusterMaxZoom,
        });

        // Add nav control buttons to the map

beforeAll(() => {
        testDiv = window.document.createElement("div");
        testDiv.setAttribute("id", "map");
        testDiv.style.styleFloat = "left";
        testDiv.style.marginLeft = "8px";
        testDiv.style.marginTop = "50px";
        testDiv.style.width = "500px";
        testDiv.style.height = "500px";
        window.document.body.appendChild(testDiv);
        map = new mapboxgl.Map({
            container: 'map',
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "type": "raster",
                        "tiles": [GlobeParameter.ChinaURL + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
                        "tileSize": 256
                    }
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22

beforeAll(() => {
        testDiv = window.document.createElement("div");
        testDiv.setAttribute("id", "map");
        testDiv.style.styleFloat = "left";
        testDiv.style.marginLeft = "8px";
        testDiv.style.marginTop = "50px";
        testDiv.style.width = "500px";
        testDiv.style.height = "500px";
        window.document.body.appendChild(testDiv);
        map = new mapboxgl.Map({
            container: 'map',
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "type": "raster",
                        "tiles": [url],
                        "tileSize": 256,
                    },
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22

setMap(props) {
    const mapStyle = this.mapStyle(props);

    mapboxgl.accessToken = props.mapboxAccessToken;
    this.map = new mapboxgl.Map({
      container: this.mapId(),
      style: mapStyle,
      center: props.center,
      zoom: props.zoom,
      bearing: props.bearing,
      pitch: props.pitch,
      customAttribution: '© Citylines.co contributors'
    });

    this.map.addControl(new mapboxgl.NavigationControl());
    this.map.addControl(new SatelliteControl({
      defaultStyle: props.mapboxStyle,
      currentStyle: mapStyle,
      onStyleChange: this.props.onSatelliteToggle
    }));

initMap () {
    this.map = new mapboxgl.Map({
      container: this.refs.mapEl,
      style: 'mapbox://styles/climatescope/cjnoj0lpf1b7d2sqqp31ef6c9',
      minZoom: 2,
      zoom: 2,
      center: [-60.646, -26.153],
      interactive: false
    })

    this.map.on('load', () => {
      this.mapLoaded = true
      this.fitGeographyBounds()
      this.highlightGeography()
    })
  }

setupMap({ lat, lng, zoom }) {
    this.map = new mapboxgl.Map({
      container: this.elMap,
      style: `mapbox://styles/mapbox/${this.props.style.background}-v9`,
      center: [lng, lat],
      zoom
    });

    this.setState({ loaded: true });

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

    const geolocate = new mapboxgl.GeolocateControl({
      positionOptions: {

style: {
        version: 8,
        sources: {},
        layers: [],
        sprite: makiUrl
      },
      scrollZoom
    };
    if (initialView) {
      options.zoom = initialView.zoom;
      options.center = {
        lng: initialView.lon,
        lat: initialView.lat
      };
    }
    const mbMap = new mapboxgl.Map(options);
    mbMap.dragRotate.disable();
    mbMap.touchZoomRotate.disableRotation();
    mbMap.addControl(
      new mapboxgl.NavigationControl({ showCompass: false }), 'top-left'
    );
    mbMap.on('load', () => {
      resolve(mbMap);
    });
  });
}

initMap() {
    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,

useEffect(() => {
    if (mapContainer) {
      const map = new mapboxgl.Map({
        container: mapContainer,
        style: STYLES[style],
        center: defaultCenter || DEFAULT_CENTER,
        zoom: defaultZoom || DEFAULT_ZOOM,
        isInteractive
      })

      if (hasControl) {
        map.addControl(new mapboxgl.NavigationControl({showCompass: false}))
      }

      map.once('load', () => {
        setIsFirstLoad(true)
      })

      setMap(map)