react map

1function NameList() {
2	const names = ['Bruce', 'Clark', 'Diana']
3    return (
4    	<div>
5      {names.map(name => <h2>{name}</h2>)}
6      	</div>
7    )
8}

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

1const numbers = [1, 2, 3, 4, 5];
2const doubled = numbers.map((number) => number * 2);console.log(doubled);

1const numbers = [1, 2, 3, 4, 5];
2const doubled = numbers.map((number) => number * 2);
3console.log(doubled);

1<style>.leaflet-container {    height: 400px;    width: 800px;}</style>

1<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">