visgl / react-map-gl

React friendly API wrapper around MapboxGL JS
http://visgl.github.io/react-map-gl/
Other
7.87k stars 1.36k forks source link

Unable to resize and drag circle using mapbox-gl-circle #1024

Closed itwaze closed 3 years ago

itwaze commented 4 years ago

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.

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

Pessimistress commented 3 years ago

mapbox-gl plugins that listen to native events will not work with react-map-gl. This is explained in https://github.com/visgl/react-map-gl/blob/67e2be73e47deb66eadf15e83b8e43e8f977b41a/docs/get-started/faq.md#mapbox-gl-draw-does-not-work-with-react-map-gl