Stack Overflow
Stack Overflow

Questions tagged [react-leaflet-draw]

34 questions
1
vote
0 answers

'MapControl' is not exported from 'react-leaflet' in react-leaflet V3.0.0

Trying to implement react-lealfet-draw with react-leaflet version 3.0.0. it throws an error /node_modules/react-leaflet-draw/dist/esm/EditControl.js Attempted import error: 'MapControl' is not exported from 'react-leaflet'. import…
Emad Baqeri
  • 2,333
  • 2
  • 14
  • 29
1
vote
1 answer

How to enable polygon (geofence) editing enable,on clicking polygon itself, without clicking on Edit button

I an using react-leaflet and 'react-leaflet-draw', for creating fences on map. I want to edit fence on clicking of fence itself only, not by clicking on edit button.I am using geoJson for creating fences, So anybody can tell me about the property…
saniya
  • 59
  • 1
  • 9
0
votes
0 answers

Error While Trying to draw a rectangle using react-leaflet-draw with Vite "Uncaught ReferenceError: assignment to undeclared variable type"

Im getting an error while trying to draw a rectangle "Uncaught ReferenceError: assignment to undeclared variable type", All other shapes are working fine, but the rectangle is not working, when i use Vite, it throws this error, when i use webpack…
Markos Bahgat
  • 1
  • 2
0
votes
0 answers

Is there a way I can prgrammatically enable a draw a polygon on the leaflet map by clicking a button with using the toolbar using react-leaftlet

I To be aable to draw polygon just like it function in leaftlet-control without using the tool bar provided by the leaflet control and using react-leaflet library to achieve it. Here a snippet library I tried using but does not work import React, {…
Lekanggy
  • 11
  • 2
0
votes
0 answers

Can't use react setState in EditStart, EditStop, DeleteStart and DeleteStop event from react-leaflet-draw

I am using React.js, react-leaflet, and react-leaflet-draw. The problem I am facing is that I cannot update a React state in the EditStart, EditStop, DeleteStart, and DeleteStop events. If I call setState in EditStart/DeleteStart, react-leaflet-draw…
May Olivia
  • 145
  • 1
  • 10
0
votes
0 answers

react-leaflet-draw throwing error with GeoJSON

i have a map built with react-leaflet. I am fetching an array of GeoJson, rendering them on the map as Feature (from the react-leaflet library as well) and try to load that into the map and make it editable with with the drawing control from…
a.urbanite
  • 75
  • 7
0
votes
0 answers

React-leaflet: How to pass dynamic HTML/jsx/react component inside bindPopup?

I want to pass a react component or jsx code to the bindPopup function but it accepts string as input. I tried using ReactDOMServer.renderToString as shown below but the popup is not dynamic. I want an onClick event to be registered inside the…
Premshankar Tiwari
  • 3,006
  • 3
  • 24
  • 30
0
votes
0 answers

React leaflet draw - deleting layer doesn't work if overlapped with another layer of higher z-index

I am using React leaflet draw and facing an issue while deleting drawn layer when it is overlapped with another layer of a higher z-index. Is it possible to control the z-index of react-leaflet-draw's FeatureGroup/EditControl to render the drawn…
Premshankar Tiwari
  • 3,006
  • 3
  • 24
  • 30
0
votes
1 answer

how to use "leaflet-buffer" in react-leaflet?

I want to buffer the shapes I drew on the react-leaflet. But I can't find any npm library to react like "leaflet-buffer". Please help me.
nOybek
  • 305
  • 1
  • 4
  • 7
0
votes
1 answer

React typescript leaflet draw: unable to toggle button

In a React + Typescript web application, I'd like to be able to show/hide the leaflet-draw "Draw polyline" button programmatically. To perform this task, I acted on the EditControl's draw properties, as in this example (code sandbox at:…
Starnuto di topo
  • 3,215
  • 5
  • 32
  • 66
0
votes
1 answer

How do I dynamically add a circle in my map from a query in react-leaflet-draw?

I tried to create a circle from a query using the polygon component from react-leaflet. But it does not benefit from the toolbar that is provided by react-leaflet-draw. How do I make the said component to be in the context of the toolbar?
Kurt Ferrer
  • 1
0
votes
0 answers

react-leaflet-draw - onEditStart/Stop events cumulates when trying to edit multiple featureGroups

I have a React application where a react-leaflet@2.7.0 + react-leaflet-draw@0.19.0 map is displaying multiple FeatureGroup components containing polygons. On the right end side of the app is a clickable list of the feature groups names. The groups…
Superstooge
  • 1
  • 1
0
votes
1 answer

How to post a created React Leaflet layer to an API?

I want to draw a polygon in react-leaflet and post the created layer to an API. Beside that, there are different tasks which are hold in the data state. The currently active task is hold in the activeTask. data and activeTask are both provided by a…
Bananajoe
  • 1
  • 3
0
votes
3 answers

setting state doesn't work properly when trying to set coordinates

function MyMap({ floorsByBuilding }: MyMapProps) { const [coords, setCoords] = useState([]); const created = (e) => { const coordsList = e.layer.editing.latlngs[0][0]; console.log("coordsList:", coordsList); …
Sai Krishnadas
  • 2,863
  • 9
  • 36
  • 69
0
votes
1 answer

couldn't import EditControl from react-leaflet-draw

Versions: leaftlet - 1.3.4 react-leaflet - 2.0.1 leaflet-draw - 1.0.4 react-leaflet-draw -0.19.8 Code: import { Map, TileLayer, Marker, Popup } from "react-leaflet"; import { EditControl } from "react-leaflet-draw"; import "./styles.css"; class…
Sai Krishnadas
  • 2,863
  • 9
  • 36
  • 69
1
2
3