React Leaflet - Draw, edit and delete polygon layer in map | Get polygon coordinates in leaflet

This video explains how to draw, edit and delete polygon layer in react leaflet using react leaflet draw.
Demo + Source :
react-component-depot.netlify...
Subscribe to the channel for more videos.
/ @programmingwithprem
------------------------------
NEW HORIZONS - Lesion X / lesionxbeats
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/-new-horizons
Music promoted by Audio Library • NEW HORIZONS - Lesion ...
------------------------------
🎵 Track Info:
Title: NEW HORIZONS by Lesion X
Genre and Mood: Dance & Electronic + Happy

[@eatandsell9016]

You deserve 1 millions stars for this react js repo Hope you the best guy

[@grol5555]

A good guide, everything is simple and clear.

[@programmingwithprem]

Glad you liked it. Please subscribe for more content like this!!!

[@zakirashid4375]

Thank you sir, good job.

[@masi.Afshar]

great job, thank you

[@ramrajv]

Thanks a lot for easing out so much work on editing the shape. Would be great if you could also include a modal to edit the lat and long of the shapes by inputting values manually along with on-map editing option.

[@premshankartiwari8613]

Awesome explanation. I would like to know how can we unit test this. Do we need to pass lat long to map for drawing in React testing library?

[@annamary3955]

Hi, Your videos are great. It was really helpful for me. But i have a doubt in reactjs leaflet maps. How can i clear the bounding box when a button called reset is clicked which is outside the map. Please help me. Thanks in advance.

[@atticgismalawi8126]

hey do you have an update for the react leaflet v3

[@zantokiwaki]

I tried your code, and get error in onEdited and onDeleted callback with "Property '_leaflet_id' does not exist on type '{}'.", do i need do declare leaflet_id first?

[@therodri595]

Great content man, can you try to do more advanced functions with leaflet i really love to see something like AI to find trends on data i have

[@bommumahendarreddy3438]

I want to draw single polygon only on the map not allowed to draw multiple polygons on map screen is it possible?

[@dgiri2333]

Maplayers stored as "lat" and "lan" name combinations i need like geojson data extract from created and edit time how can do that and if endpoint to get geojson how fix on editcontrol and how to do CURD operations using this to endpoint

[@devlopwithraza4017]

not show lat-lng in console from mapLayers this variable why sir

[@Cubas1111]

how do you generate the map?

[@AbhishekKumar-yi8bu]

hello, I have a problem in hooks, hooks data give error on my code

[@ericadiasmatos1818]

When I tried to "import 'leaflet-draw/dist/leaflet.draw.css'" i get -> Module not found. Tried looking in my node_modules for a leaflet-draw but it doesn't exist. All I have is a react-leaflet-draws wich doest have any css file in it :(

[@programmingwithprem]

You should install leaflet-draw package using npm

[@altairpenson8779]

Hi, thanks for video! and help me? please. I have polygons, markers, and i have to check which polygons contains markers...for example one marker and 5 polygons, inside of which polygon this marker?

[@maximilianogabrielfranchve7367]

Did you find a solution?

[@mohdanas8027]

Can we get the polygon area ?

[@kafelinux]

awesome, is this support react native?

[@nbx9629]

I tried to use this code, but some components don't exist, like the react-leaflet Map. In addition, EditControl was using the react-leaflet's MapControl and it does not exist. You're using an depreciated version?

[@programmingwithprem]

I was using the relatively a new version of the react-leaflet@2.7 (Current: 3.0.5). But this should just work fine.

[@nbx9629]

@@programmingwithprem I had to create my own draw handler, because this lib doesn’t work :(

[@matheusantonelli5826]

I'm getting the same error

[@markk4925]

Is it possible to do this without plugins?

[@programmingwithprem]

If you just want to display the polygon with coordinates you dont have to use the plugin. You can directly use polygon component for that. import { Polygon } from "react-leaflet"; But, if you want option to create/edit/delete the shapes, you need the draw plugin.

[@MrZiyak99]

Hey I save these data for these shapes in my database. When i now retrieve the database how do I save display these shapes?

[@programmingwithprem]

You need to use polygon, marker etc from react-leaflet. import { Polygon, Marker } from 'react-leaflet'

[@MrZiyak99]

@@programmingwithprem I tried that but it just displays the shapes. I was hoping to make those displayed shapes editable and deletable which I cannot do using this approach

[@sachinhm5117]

@@MrZiyak99 i'm trying to do same, did u find any solution. If yes pls share how to edit saved shapes.

[@Addy__]

Can I display all the shapes using one polygon tag or would I need one for each shape?

[@SmokeyDev]

In order to edit put those shapes inside , for example {...your}

[@mohdanas8027]

'Map' (imported as 'Map') was not found in 'react-leaflet'

[@carracingsongs]

I think Map has been replaced by MapContainer