Open itwaze opened 4 years ago
I am using react-map-gl + mapbox-gl-circle. I displayed a circle but I cannot resize it and drag it.
react-map-gl
mapbox-gl-circle
But if I use mapbox-gl + mapbox-gl-circle = all is good.
mapbox-gl
import React from "react"; import MapboxCircle from "mapbox-gl-circle"; import MapGL from "react-map-gl"; const MAPBOX_ACCESS_TOKEN = "pk.eyJ1IjoiYWxlcGhyaSIsImEiOiJjamdwbHpycjIyZm45Mndud3AzamRibHpqIn0.ejAHwSGT6dcGxiDOrPCFLg"; export default function App() { const [viewport, setViewport] = React.useState({ latitude: 6, longitude: 22, zoom: 12, bearing: 0, pitch: 0 }); const [mapRef, setMapRef] = React.useState(null); const myCircle = new MapboxCircle({ lat: 6, lng: 22 }, 2200, { editable: true, minRadius: 120, fillColor: "#29AB87" }); if (mapRef !== null) { myCircle.addTo(mapRef.getMap()); myCircle.on("centerchanged", function(circleObj) { console.log("New center:", circleObj.getCenter()); }); myCircle.once("radiuschanged", function(circleObj) { console.log("New radius (once!):", circleObj.getRadius()); }); myCircle.on("click", function(mapMouseEvent) { console.log("Click:", mapMouseEvent.point); }); myCircle.on("contextmenu", function(mapMouseEvent) { console.log("Right-click:", mapMouseEvent.lngLat); }); } return ( <MapGL ref={e => setMapRef(e)} width="100%" height="100vh" mapStyle="mapbox://styles/mapbox/light-v9" mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} latitude={viewport.latitude} longitude={viewport.longitude} zoom={viewport.zoom} bearing={viewport.bearing} pitch={viewport.pitch} onViewportChange={viewport => setViewport(viewport)} /> ); }
Codesandbox react-map-gl example: https://codesandbox.io/s/competent-feather-geo7c
Codesandbox mapbox-gl example: https://codesandbox.io/s/react-and-mapbox-gl-2tnnx
have you found any solution?
I am using
react-map-gl
+mapbox-gl-circle
. I displayed a circle but I cannot resize it and drag it.But if I use
mapbox-gl
+mapbox-gl-circle
= all is good.Codesandbox
react-map-gl
example: https://codesandbox.io/s/competent-feather-geo7cCodesandbox
mapbox-gl
example: https://codesandbox.io/s/react-and-mapbox-gl-2tnnx