Edit existing polygons?

[Bassonlinho]

Hello I've been using your component for some time now and I'm very grateful for your work.
However I've got a question for you:
Is it possible to edit drawn polygons? Like drag the points of polygon to reshape it or something?
Thanks in advance!
Kind regards

[Bassonlinho]

If anyone wondering, I've did it with Draggable Markers.
{this.state.editing && this.state.editing.coordinates &&
(this.state.editing.coordinates.map((coordinate, index) => (
<MapView.Marker draggable
coordinate={coordinate}
onDragEnd={(e) => this.changeCoordinate(e, index)}
/>
)))}

and the function:
changeCoordinate(e, index) {
let newCoord = e.nativeEvent.coordinate;
let newEditing = Object.assign({},this.state.editing);
let newCoordinates = Object.assign({},newEditing.coordinates);
newCoordinates[index] = newCoord;
newEditing.coordinates = newCoordinates;
let transformedCoords = Object.keys(newEditing.coordinates).map(function (key) { return newEditing.coordinates[key]; });
newEditing.coordinates = transformedCoords;
this.setState({
editing: newEditing
})
}

[pawan8525]

Mr. Nemanja Ristic i tried but not success i am confused at "this.state.editing" from where it take value please share full example.
Thank you for your kind cooperation.

[Bassonlinho]

Hey, my setup is the same like in the example of PolygonCreator(https://github.com/react-community/react-native-maps/blob/master/example/examples/PolygonCreator.js). In place where they do this(line 144-153):
{this.state.editing && (

)}
I added below it:
{this.state.editing && (
<MapView.Polygon
key={this.state.editing.coordinates}
coordinates={this.state.editing.coordinates}
strokeColor="rgb(0,100,0)"
fillColor="rgb(0,100,0)"
strokeWidth={3}
/>
)}
{this.state.editing && this.state.editing.coordinates &&
(this.state.editing.coordinates.map((coordinate, index) => (
<MapView.Marker draggable
key={index}
coordinate={coordinate}
anchor={{ x: 0.5, y: 0.5 }}
onDragEnd={(e) => this.changeCoordinate(e, index)}>
{dot}
</MapView.Marker>
)))}

And then the function :
changeCoordinate(e, index) {
let newCoord = e.nativeEvent.coordinate;
let newEditing = Object.assign({},this.state.editing);
let newCoordinates = Object.assign({},newEditing.coordinates);
newCoordinates[index] = newCoord;
newEditing.coordinates = newCoordinates;
let transformedCoords = Object.keys(newEditing.coordinates).map(function (key) { return newEditing.coordinates[key]; });
newEditing.coordinates = transformedCoords;
this.setState({
editing: newEditing
})
}

Editing is from state which refers to coordinates as you draw points of your polygon. Hope I helped :)

[pawan8525]

Thanks you much Mr.Nemanja Ristic ,problem resolved and now i am moving ahead in my project and have one doubt
is It possible to overlay a map with another map in react-native-map?
I found image can overlay on map (https://github.com/react-community/react-native-maps/blob/master/docs/overlay.md)
but my problem is that i want to overlay react-native-map with third party map that will draw soil map on same map on toggle button. I also attached screen shot what i want, please help.
"Map with overlay"

"Map without overlay"

once again thanks

[Bassonlinho]

Hey mate, that I would not know. You'd need to open a new issue for that. Haven't really tried overlays so for that you'd need someone experienced. But you could do conditional rendering with some boolean to toggle on/off the overlay if it fits the entire map.

[pawan8525]

Hello @Bassonlinho , As previous comment you share code of polygon it is editable but i want some thing like below
when you click on the map to choose the starting location. Every subsequent click should add an additional point to the polygon. To finish the polygon, you click on the first point added and Each line segment of the polygon should have another point at the midpoint of the line.
is it possible with this code (https://github.com/react-community/react-native-maps/blob/master/example/examples/PolygonCreator.js) ?

[Bassonlinho]

I was looking for that too but no luck. I think you'd need to use some algorithm or 3rd party lib that would give you geometry of point in middle so that it can be dynamically added. Open new issue for that, I'm closing this down, cheers mate! 👍

[claysol-pardeep]

Hi @Bassonlinho

There has anyways to draw the polygon with fill colors like on the web we have this feature,

https://codepen.io/mdashikar/pen/gvMpXK?editors=1010
Circle,Rectangle, Polygon etc etc

[tizenix]

@Bassonlinho can you please share your full code how you drag polygon

[Bassonlinho]

@tizenix Hey mate I moved away from the project I worked on, but following my first two comments and the solution should help enough :)