Maps: 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.

[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.