How to use the mapbox-gl/dist/mapbox-gl.js.Map function in mapbox-gl

isReachable('mapbox.com', function (_, online) {
  if (!online) { argv.basemap = 'offline' }
  if (/^(plain|land|offline)$/.test(argv.basemap)) {
    basemap = dataStyle
  } else if (!argv.basemap) {
    basemap = dataStyle
    dataStyle.layers.forEach((layer) => { layer.layout.visibility = 'none' })
  } else if (!hasScheme(argv.basemap)) {
    // assume it's a mapbox style, so prepend mapbox://styles/
    basemap = 'mapbox://styles/' + argv.basemap
  } else {
    // do this because 'basemap' will still be set on a ctrl-R reload
    basemap = basemap || argv.basemap
  }

  map = window.map = new mapboxgl.Map({
    container: 'map',
    style: basemap,
    center: [0, 0],
    zoom: 2
  })

  map.on('load', onMapLoad)
  map.on('error', function (err) { console.error(err) })
})

return new Promise((resolve, reject) => {
      _this.map = new mapboxgl.Map({
        container: _this.mapCanvas.node(),
        interactive: false,
        style: this.context.model.ui.map.mapLayer,
        hash: false
      });
      _this.bounds = [[
        _this.context.model.ui.map.bounds.west,
        _this.context.model.ui.map.bounds.south
      ], [
        _this.context.model.ui.map.bounds.east,
        _this.context.model.ui.map.bounds.north
      ]];
      _this.map.fitBounds(_this.bounds);
      resolve();
    });
  },

zoom,
      minZoom,
      maxZoom,
      maxBounds,
      fitBounds,
      fitBoundsOptions,
      bearing,
      scrollZoom,
      attributionPosition,
      interactive,
      dragRotate,
    } = this.props;

    MapboxGl.accessToken = accessToken;

    const map = new MapboxGl.Map({
      preserveDrawingBuffer,
      hash,
      zoom: zoom[0],
      minZoom,
      maxZoom,
      maxBounds,
      bearing,
      container: this.container,
      center,
      pitch,
      style,
      scrollZoom,
      attributionControl: {
        position: attributionPosition,
      },
      interactive,

componentDidMount() {
    const mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');
    mapboxgl.accessToken =
      'pk.eyJ1Ijoic2RyYXNuZXIiLCJhIjoiY2pmZzBqZmptMjI1eTMzbWl1bGExMHppZyJ9.diPXryPOiyMuqcV4mpNOlg';
    new mapboxgl.Map({
      container: this.mapContainer.current,
      style: 'mapbox://styles/sdrasner/cjfg0watl6rkv2sllf6hepdd5',
    });
  }

componentDidMount() {
    MapboxGl.accessToken = this.props.accessToken

    const map = new MapboxGl.Map({
      container: this.container,
      style: convertInspectStyle(this.props.mapStyle, this.props.sources, this.props.highlightedLayer),
      hash: true,
    })

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

    map.on("style.load", () => {
      this.setState({ map });
    })

    map.on("data", e => {
      if(e.dataType !== 'tile') return
      this.props.onDataChange({
        map: this.state.map