Stack Overflow
Stack Overflow

Questions tagged [leaflet-draw]

42 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
4
votes
3 answers

Leaflet Draw on rectangle draw it throws error

I'm using leaflet + leaflet-draw + @ngx-leaflet + @ngx-leaflet-draw in an Angular application. I've tried everything, versions change, importing the modules .forRoot() and not, adding the js files in my angular.json file, remove node_modules,…
Caius
  • 2,084
  • 6
  • 31
  • 47
3
votes
2 answers

the problem with leaflet and leaflet draw vue leaflet.draw.js?20d6:8 Uncaught TypeError: Cannot read properties of undefined (reading 'length')

mounted() { this.initMap(); }, methods: { initMap() { this.map = L.map('mapContainer').setView([48.856663, 2.351556], 12); this.tileLayer = L.tileLayer( …
DKasane
  • 51
  • 4
3
votes
1 answer

Leaflet.draw style messed up in react component

In my react project, I use the leaflet as the map library. And I didn't use the react-leaflet package, instead I use the original leaflet library. Now I want to add the leaflet-draw plugin, I already install the leaflet-draw npm package, and my…
Chris Bao
  • 2,418
  • 8
  • 35
  • 62
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
2
votes
3 answers

How to append button into popup in leaflet draw?

I want button inside popup to make some action on popup attached layer. L.marker(coors[i], { icon }) .addTo(this.drawnItem) .bindPopup(this._getCustomIcon(mix)) .openPopup(); Below my _getCustomIcon() _getCustomIcon…
Dostonbek Oripjonov
  • 1,508
  • 1
  • 12
  • 28
1
vote
0 answers

Find Point in polygon javascript

I found this solution in php : Find Point in polygon PHP I change it in javascript if (is_in_polygon(points_polygon, vertices_x, vertices_y, longitude_x, latitude_y)){ console.log("Is in polygon"); } else console.log("Is not in polygon"); …
alice
  • 41
  • 2
1
vote
1 answer

Leaflet plugins in Angular project

I have an angular project (Angular 13) where I use leaflet. In the package.json file, I have: "leaflet": "^1.7.1", "leaflet-draw": "^1.0.4", "leaflet.heat": "^0.2.0", In my component, I import leaflet via import * as L from 'leaflet'; Everything…
dogukan
  • 393
  • 1
  • 4
  • 9
1
vote
0 answers

Cannot read properties of null (reading 'offsetWidth') when loading react-leaflet map

I have a reusable leaflet map component in my react project and every time I search for a specific key word, the markers and the shapes(fences) will get updated. When I reload the parent component (initial data loads in the map and no issue) and…
Shanilka Fernandopulle
  • 131
  • 1
  • 5
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
vote
0 answers

Allow point delete in mapbox draw mod

I am trying to rewrite a MapboxDraw.modes.draw_line_string.clickAnywhere function to allow deletion of a previous point with the SHIFT key in draw_line_string mode. It works, but when it removes the previous point it creates a new one on the new…
SERG
  • 3,907
  • 8
  • 44
  • 89
1
vote
0 answers

Get all polygon or layer details after polygon draw in leaflet draw

I am trying to get the layer details of the map which are already overlay on the map. When leaflet draw is created I want to get the layer details (Not the polygon coordinates created by leaflet draw plugin) so that I can use them. I am able to get…
Saroj
  • 1,343
  • 4
  • 15
  • 31
1
vote
1 answer

Limit maker points in Polyline (to be a Line) using leaflet-geoman

I want to enable the user to draw a Line (which is a Polyline with only 2 points). I enable drawing and the listen for vertexadded. When the _rings marker count equals 2, I disable drawing. This feels wrong for several reasons: I access a private…
Hoetmaaiers
  • 3,413
  • 2
  • 19
  • 29
1
vote
1 answer

Extracting coordinates from vue2-leaflet-draw-toolbar

I'm using the vue2-leaflet-draw-toolbar plugin to draw shapes on the map, does anyone know how to get the coordinates of the drawn shape?? I'm trying to use this data to trigger an event when a marker leaves these areas.
gmdev
  • 11
  • 3
1
2 3