react map code example
Example 1: react map
{array.map((item)=>{
return (
<div key={item.id}>I am one Object in the Array {item}</div>
)
})}
Example 2: map function in react
function NameList() {
const names = ['Bruce', 'Clark', 'Diana']
return (
<div>
{names.map(name => <h2>{name}</h2>)}
</div>
)
}
Example 3: react map gll code
import React,{ useState } from 'react'
import MapGL, {GeolocateControl } from 'react-map-gl'
import config from '../config'
import 'mapbox-gl/dist/mapbox-gl.css'
const TOKEN=config.REACT_APP_TOKEN
const geolocateStyle = {
float: 'left',
margin: '50px',
padding: '10px'
};
const Map = () => {
const [viewport, setViewPort ] = useState({
width: "100%",
height: 900,
latitude: 0,
longitude: 0,
zoom: 2
})
const _onViewportChange = viewport => setViewPort({...viewport, transitionDuration: 3000 })
return (
<div style={{ margin: '0 auto'}}>
<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>
<MapGL
{...viewport}
mapboxApiAccessToken={TOKEN}
mapStyle="mapbox://styles/mapbox/dark-v8"
onViewportChange={_onViewportChange}
>
<GeolocateControl
style={geolocateStyle}
positionOptions={{enableHighAccuracy: true}}
trackUserLocation={true}
/>
</MapGL>
</div>
)
}
export default Map
Example 4: react map example leaflets
import React from 'react'import { Map as LeafletMap, TileLayer, Marker, Popup } from 'react-leaflet';class Map extends React.Component { render() { return ( <LeafletMap center={[50, 10]} zoom={6} maxZoom={10} attributionControl={true} zoomControl={true} doubleClickZoom={true} scrollWheelZoom={true} dragging={true} animate={true} easeLinearity={0.35} > <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' /> <Marker position={[50, 10]}> <Popup> Popup for any custom information. </Popup> </Marker> </LeafletMap> ); }}export default Map
Example 5: react arrays
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{number}</li>);
Example 6: react map
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);console.log(doubled);