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

Подписаться 6 тыс.

Просмотров 27 тыс.

50% 1

This video explains how to draw, edit and delete polygon layer in react leaflet using react leaflet draw.
Demo + Source :
react-componen...
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-ho...
Music promoted by Audio Library • NEW HORIZONS - Lesion ...
------------------------------
🎵 Track Info:
Title: NEW HORIZONS by Lesion X
Genre and Mood: Dance & Electronic + Happy

Опубликовано:

17 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 38

@eatandsell9016 7 месяцев назад

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

@bommumahendarreddy3438 9 месяцев назад

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

@ramrajv 6 месяцев назад

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.

@grol5555 3 года назад

A good guide, everything is simple and clear.

@programmingwithprem 3 года назад

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

@ericadiasmatos1818 3 года назад

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 3 года назад

You should install leaflet-draw package using npm

@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

@didipendi 3 года назад

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 2 года назад

Did you find a solution?

@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?

@atticgismalawi8126 2 года назад

hey do you have an update for the react leaflet v3

@premshankartiwari8613 2 года назад

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?

@kafelinux 2 года назад

awesome, is this support react native?

@zakirashid4375 2 года назад

Thank you sir, good job.

@therodri595 3 года назад

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

@annamary3955 2 года назад

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.

@masi.Afshar 3 года назад

great job, thank you

@devlopwithraza4017 2 года назад

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

@AbhishekKumar-yi8bu Год назад

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

@nbx9629 3 года назад

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 3 года назад

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 3 года назад

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

@matheusantonelli5826 3 года назад

I'm getting the same error

@mohdanas8027 2 года назад

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

@carracingsongs Год назад

I think Map has been replaced by MapContainer

@Cubas1111 Год назад

how do you generate the map?

@MrZiyak99 3 года назад

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 3 года назад

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

@MrZiyak99 3 года назад

@@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 3 года назад

@@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}

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

@mohdanas8027 2 года назад

Can we get the polygon area ?