-1

I am trying to create a web application using mapbox-gl with react. My goal is to have users draw multiple shapes and be able to edit them when desired. However, using map boxes default, a user can edit/move any draw feature inside a Draw componenet. I want the users to be able to edit one shape at a time. enter image description here

Editing:

So, in other words if I have shapes 'A' and 'B', I want the user to only be able to edit shape 'A' when they press the "Edit A" button–while not being able to touch shape 'B.'

A solution that may work is if I add individual "Draw" compenents for each shape; however, that seems very inefficient.

Berk Özkan
  • 19
  • 4

2 Answers2

1

One way to solve this to create a custom draw mode based on the direct_select mode where you override the clickInactive() to be a noop function. When the editing starts for a feature, you enter this mode with the feature as the active feature. While the user is making edits, he / she will only be able to edit the target feature.

let modes = MapboxDraw.modes;
modes.custom_select = MapboxDraw.modes.direct_select;
modes.custom_select.clickInactive = () => {};

So, when the user clicks "Edit A" and you call:

drawControl.changeMode(modes.custom_select, featureId: [FEATURE_A_ID])
Max Metcalfe
  • 51
  • 4
0

I based myself on Max's solution, but with a small change:

const featureId = drawRef.current.add(YOUR_POLYGON_OBJECT);
const feature = drawRef.current.get(featureId);
drawRef.current.changeMode('custom_select', { featureId: featureId[0] });
eliaoucohen72
  • 1
  • 2