nitaliano / react-native-mapbox-gl

A Mapbox GL react native module for creating custom maps
Other
2.16k stars 696 forks source link

react-native-mapbox-gl-draw? #1633

Open arnoldas500 opened 5 years ago

arnoldas500 commented 5 years ago

Are there any drawing tools out for react-native-mapbox-gl? Similar to mapbox-gl-draw?

prashantvv commented 5 years ago

Hello, my question is also the same. As i need some shape draw tool on top of maps for react-native app where user just touches the polygon edges & start sliding them along with the whole polygon dragging. Wish I can hav a flow like this- https://stackoverflow.com/questions/51938265/how-do-i-implement-a-draggable-resizable-polygon-on-google-maps-in-react-native in react-native otherwise webview-bridge option is there @arnoldas500.

enb12a commented 3 years ago

is there any improvement? I definitely need something like this.

prashantvv commented 3 years ago

is there any improvement? I definitely need something like this.

for now i guess using webview will work fine, it could be local or any web url source.

sarath40158 commented 2 years ago

we can draw on react native first make sure what you need to draw to map use this draw : http://geojson.io/
pass gesoJson into the ShapeSource , shape prop , inside shape source use fill Layer to fill the shape

<MapboxGL.ShapeSource
        id='shapeSource'
        shape={{
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              properties: {},
              geometry: {
                type: 'Polygon',
                coordinates: [ [9.140625, 61.270232790000634],
                      [37.96875, 58.44773280389084],
                      [28.828124999999996, 67.7427590666639],
                      [9.140625, 61.270232790000634]]
              }
            }
          ]
        }}>
        <MapboxGL.FillLayer id='lineLayer' style={{ visibility: 'visible', fillOpacity: 0.3 }} />
      </MapboxGL.ShapeSource>

dynamically drawing in maps : if you want draw dynamically update shape prop co-ordinates dynamically