text: import React, {Component} from 'react';
  import {render} from 'react-dom';
  import MapGL, {GeolocateControl} from 'react-map-gl';
  
  const MAPBOX_TOKEN = ''; // Set your mapbox token here
  
  const geolocateStyle = {
    position: 'absolute',
    top: 0,
    left: 0,
    margin: 10
  };
  
  export default class App extends Component {
    state = {
      viewport: {
        latitude: 37.8,
        longitude: 96,
        zoom: 3,
        bearing: 0,
        pitch: 0
      }
    };
  
    _onViewportChange = viewport => this.setState({viewport});
  
    render() {
      const {viewport} = this.state;
  
      return (
        <MapGL
          {...viewport}
          width="100%"
          height="100%"
          mapStyle="mapbox://styles/mapbox/dark-v9"
          onViewportChange={this._onViewportChange}
          mapboxApiAccessToken={MAPBOX_TOKEN}
        >
          <GeolocateControl
            style={geolocateStyle}
            onViewportChange={this._onViewportChange}
            positionOptions={{enableHighAccuracy: true}}
            trackUserLocation={true}
          />
        </MapGL>
      );
    }
  }
  
  export function renderToDom(container) {
    render(<App />, container);
  }
  