How to use this library to make a polygon/area builder

[fvieira]

First, I know this isn't a real issue, but I wasn't sure of a better place to ask this, so let me know if there's one and I'll move it there.

I have a React Native app and need to allow my users to pick areas in a map, essentially building polygons over a map. I know I can use this library to show polygons, but I'm not sure how to make this polygon builder except by doing it all myself. Does this library have something that can help me? Can you recommend another solution?

What I'm looking for is basically this: https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

Thanks in advance, and sorry for the non issue...

[kristfal]

Hey,

there is no built in tools for this. You'll need to make it yourself. If you are looking at iOS only, you can add a PanResponder to the map and be able to control things fairly well by stopping map interaction when you tap + drag on features.

For Android, that doesn't work and I'd recommend using a transparent view on top of the MapView with pointerEvents none|auto. FYI: On android you will not able to get a tap + drag transition as you can't move a gesture off the map into an overlaying view without releasing the finger and starting a new gesture.

[chris-gaona]

@kristfal I was previously using your outlined example approach with the old version of react native mapbox to drag ShapeSource items & it worked great. I've just migrated to v10 & it seems the pan responder events don't work anymore with the Mapbox.MapView. Is there another way you know of to handle using a pan responder with v10?

It sort of does work moving the pan responder to outside the MapView but iOS now has the behavior of android where it needs your finger released before starting a new gesture in order to drag the ShapeSource. Thanks.

[fvieira]

Thanks for the tips, I'll start working on this next week, I'll let you know how it goes.

[kobagapu]

Hi @kristfal Can you have any example for drawing polyline using MapBox

[jayhaluska]

Hi @fvieira, could you make any progress in this regard?

The easiest way to build this would be to use subsequent onPress events and combine the coordinates to a polygon.

The best case would be to have a kind of a "freehand draw". I just had a glance at the documentation and saw that the PointAnnotation object has a onDrag event, I was thinking about misusing that to implement such a behaviour, but idk if this is possible and whether this would work well.

[TheHuns]

@jayhaluska @fvieira Either of you have any luck on this subject?? I'm currently looking to implement a similar feature where a user can define custom polygon areas or drop a resizable circle area on the map. Cant find much for either in ReactNative!!

[ferdicus]

If anyone is interested in implementing this, here is an example from the mapbox android SDK docs:
https://docs.mapbox.com/android/maps/examples/finger-draw-query/

[TheHuns]

NIce, I definitely like this freehand draw better than placing points for a polygon. Thanks! ...now to try in ReactNative

[ferdicus]

this might also help: https://docs.mapbox.com/android/maps/examples/draw-a-polygon/

[bllanos]

We have implemented a React Native library for drawing points, polylines, and polygons (currently without holes) here: https://github.com/newfarms/react-native-mapbox-geometry-editor

As one of the authors, I can't comment on how good it is, but hopefully it helps.