Stack Overflow
Stack Overflow

Questions tagged [react-leaflet-draw]

34 questions
6
votes
0 answers

React Leaflet.draw: How to create draw functions with standard buttons without using the react-leaflet toolbar, however, have it written in "React"

how can I create custom buttons that reside on a leaflet map in a separate control box to create "Polylines", "Polygons" or a "Marker" which will all be on separate buttons without using leaflet-draws standard UI toolbar. I really would like to know…
robert
  • 61
  • 1
  • 4
5
votes
1 answer

Importing geojson to react-leaflet-draw

I am trying to import some GeoJSON to the FeatureGroup in _onFeatureGroupReady event handler, but it doesn't appear to be rendered into the map. The code is mostly based on the example from the library react-leaflet-draw here. Strangely, the edit…
r3wt
  • 4,642
  • 2
  • 33
  • 55
3
votes
2 answers

React leaflet and react-leaflet-draw

I'm trying to implement the draw functions on leaflet map. I've created a new app with only react-leaflet installed, using npx create-react-app and the following packages installed: npm install react react-dom leaflet npm install react-leaflet At…
Giox
  • 4,785
  • 8
  • 38
  • 81
3
votes
1 answer

How to use require to import a custom icon with react leaflet?

I have read several posts here on stackoverflow like React Leaflet - How to render custom image using Circle Markers and custom marker icon with react-leaflet On how to include custom icons in react leaflet maps. I have tried the below code const…
dontke
  • 99
  • 3
  • 10
2
votes
1 answer

How to get polyline coordinates React-Leaft-Draw plugin?

I use this plugin to draw lines on Leaflet map in my project: https://github.com/alex3165/react-leaflet-draw I want to get coordinates (lat,long) of drawn polyline, when _onCreate or later. How could i do this?
TranceAddict
  • 187
  • 3
  • 14
2
votes
1 answer

how to draw shapes in react-leaflet v3

Do you have any idea about implementing the draw functionality to react-leafletV3? I have added an event listener but it is not working and reacting to anything. useEffect(() => { if (!map) return; map.addEventListener("mousemove",…
Emad Baqeri
  • 2,333
  • 2
  • 14
  • 29
1
vote
0 answers

Unhandled Runtime Error: No context provided: useLeafletContext() can only be used in a descendant of

I would like to let users create area polygons on Leaflet maps. I have seen some nice examples of people creating this in React and JS (like this one: https://codesandbox.io/s/react-leaflet-draw-example-j3gw4), and I would be keen to do that in…
peternovak
  • 103
  • 1
  • 11
1
vote
0 answers

React leaflet draw causes no context provider error

I'm running into some major compatibility issues it seems. I am getting this error when I am directed to a page with a map that is meant for the user to draw a radius using react-leaflet-draw. Here is the error: Here is the code that is the source…
lawliet1035
  • 161
  • 8
1
vote
1 answer

React Leaflet Polygon drawing does not work properly

I want to design a component where I can draw a polygon using Leaflet and want to keep these coordinates. But the component I wrote doesn't work as I want in local. The necessary edit buttons screen for drawing polygon does not…
Yunus
  • 123
  • 1
  • 1
  • 11
1
vote
0 answers

react-leaflet-draw edit control simulate onCreated using testing library

I am trying to unit test onCreated event handler of the React-leaflet-draw's Edit control component using react testing library/jest. I tried the following without any luck: test('Polygon draw functionality', async () => { const drawHandler =…
Premshankar Tiwari
  • 3,006
  • 3
  • 24
  • 30
1
vote
1 answer

problem when i npm install react-leaflet-draw react-leaflet --save

i have a problem when i try to install react-leaflet-draw react-leaflet --save i had this error npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: siis-new@0.1.0 npm ERR! Found:…
FizMe
  • 71
  • 1
  • 7
1
vote
1 answer

Get Input coordinates to show markers on map in react-leaflet

Can anybody write some code to get input(coordinates) from user to show as marker on map and continue adding markers with new lat,long and option to delete marker too. Please. I have written this code : enter image description here
Muhammad Hamza Khan
  • 11
  • 2
1
vote
1 answer

React-leaflet-draw / Cannot access EditControl component programmatically

I'm trying to access EditControl functionality with editRef ( const editRef = useRef(); ) in order to access its handlers progammatically. Unfortunately, following warning appears in web dev tools : "Function components cannot be given refs.…
STaigertw
  • 19
  • 1
  • 4
1
vote
0 answers

i am working on someone project that use a version of react-leaflet that import Map instead MapContainer

I wanna do a task that needs react-leaflet-draw but this error occurred Does anyone know what should I do except updating the react-leaflet because the project is too big?
Mohammad Mirzae
  • 11
  • 1
1
vote
1 answer

How can I remove last shape layer when creating new one in lefalet

According to this codesandbox I'm using to to generate a map on react and I have implemented the drawer plugin. here I want to delete the last shape I have added to the map and create and show the new map instead of the last shape. Is there nay…
Emad Baqeri
  • 2,333
  • 2
  • 14
  • 29
1
2 3