React Leaflet: Resize point marker not being dragged

Question

A resizeable rectangle in place automatically on the map with some bounds.

when I drag the rectangle, it drags but the resizeable points is still on the same place.

Is there something i am missing here.

Here is my code below

const handleMapCreated = useCallback(
    (map: Map) => {
      const rectangle = L.rectangle(rectangleBounds, { draggable: true });
      rectangle.addTo(map);

      const updateRectangleBounds = (newBounds: L.LatLngBounds) => {
        const [sw, ne] = [newBounds.getSouthWest(), newBounds.getNorthEast()];
        setRectangleBounds([
          [sw.lat, sw.lng],
          [ne.lat, ne.lng],
        ]);
      };

      rectangle.on('pm:dragend', (e: any) => {
        const newBounds = rectangle.getBounds();
        console.log(newBounds);
        updateRectangleBounds(newBounds);
      });

      // Function to enable editing for the rectangle
      const enableRectangleEdit = (rect: L.Rectangle) => {
        rect.on('pm:edit', (e: any) => {
          const newBounds = rect.getBounds();
          updateRectangleBounds(newBounds);
        });
        rect.pm.enable();
      };

      // Initial setup
      enableRectangleEdit(rectangle);
    },
    [rectangleBounds],
  );

I tried the draggable rectangle, but the resizeable point is not dragging along the rectangle.

Answer 1

Geoman doesn't provide the functionallity to drag and edit at the same time.

However you can reload the helper-markers with _initMarkers

rectangle.on('pm:dragend', (e: any) => {
        const newBounds = rectangle.getBounds();
        console.log(newBounds);
        updateRectangleBounds(newBounds);
        rectangle.pm?._initMarkers();
      });