react map gll code

1import React,{ useState } from 'react'
2import MapGL, {GeolocateControl } from 'react-map-gl'
3import config from '../config'
4import 'mapbox-gl/dist/mapbox-gl.css'
5
6const TOKEN=config.REACT_APP_TOKEN
7
8const geolocateStyle = {
9  float: 'left',
10  margin: '50px',
11  padding: '10px'
12};
13
14const Map = () => {
15
16  const [viewport, setViewPort ] = useState({
17    width: "100%",
18    height: 900,
19    latitude: 0,
20    longitude: 0,
21    zoom: 2
22  })
23
24  const _onViewportChange = viewport => setViewPort({...viewport, transitionDuration: 3000 })
25  
26  return (
27    <div style={{ margin: '0 auto'}}>
28      <h1 style={{textAlign: 'center', fontSize: '25px', fontWeight: 'bolder' }}>GeoLocator: Click To Find Your Location or click <a href="/search">here</a> to search for a location</h1>
29      <MapGL
30        {...viewport}
31        mapboxApiAccessToken={TOKEN}
32        mapStyle="mapbox://styles/mapbox/dark-v8"
33        onViewportChange={_onViewportChange}
34      >
35        <GeolocateControl
36          style={geolocateStyle}
37          positionOptions={{enableHighAccuracy: true}}
38          trackUserLocation={true}
39        />
40      </MapGL>
41    </div>
42  )
43}
44
45export default Map