Make sure you have the necessary API access token for Mapbox GL.
import React, { Component } from "react";
import ReactDOM from "react-dom";
import ReactMapboxGl, { GeoJSONLayer } from "react-mapbox-gl";
import * as turf from "@turf/turf";
import geojsonStyles from "./geojsonStyles";
import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
import "./styles.css";
const Map = ReactMapboxGl({
accessToken:"enter your access token"
});
class App extends Component {
onDrawCreate = ({ features }) => {
console.log(features);
};
onDrawUpdate = ({ features }) => {
console.log({ features });
};
render() {
const centerPoint = [-73.975547, 40.691785];
var radius = 0.1;
var options = {
steps: 50,
units: "miles",
properties: {
text: "test"
}
};
const firstCircle = turf.circle(centerPoint, radius, options);
const secondCircle = turf.circle(centerPoint, radius * 2, options);
const thirdCircle = turf.circle(centerPoint, radius * 4, options);
return (
<div className="App">
<Map
style="mapbox://styles/mapbox/streets-v9" // eslint-disable-line
containerStyle={{
height: "100vh",
width: "100vw"
}}
zoom={[14]}
center={[-73.975547, 40.691785]}
>
<GeoJSONLayer {...geojsonStyles} data={firstCircle} />
<GeoJSONLayer {...geojsonStyles} data={secondCircle} />
<GeoJSONLayer {...geojsonStyles} data={thirdCircle} />
</Map>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Access the CodeSandbox URL here:
https://codesandbox.io/p/sandbox/react-mapbox-gl-turf-mueyi?file=%2Fsrc%2Findex.js%3A1%2C1-65%2C1