Stack Overflow
Stack Overflow

Questions tagged [react-leaflet-v4]

28 questions
3
votes
1 answer

Map not showing in react leaf­let

Why the map is not displayed in react leaflet? import { MapContainer, Marker, TileLayer, Popup } from "react-leaflet"; import "leaflet/dist/leaflet.css";
2
votes
0 answers

Manipulate map with buttons outside of MapContainer

I am using React-leaflet v4 and trying to set up two distinct areas on my page a sidebar with buttons / search that can indfluence the leaflet map, and the map area itself. However if buttons are placed in the sidebar outside of the MapContainer…
Lemonsprig
  • 21
  • 2
1
vote
2 answers

How to make a draggable Tooltip in React-Leaflet v4?

I would like to implement a Tooltip attached to a Marker, then be able to drag that Tooltip anywhere on the map and draw a Polyline connecting the Tooltop to its parent marker. Is this possible? I can’t see any such behavior in the RL documentation.
RouteMapper
  • 2,484
  • 1
  • 26
  • 45
1
vote
3 answers

How to avoid infinite loops inside useEffect working with dispatch()?

I'm making a project where I have a list with several properties. Each property has data such as name, latitude, longitute, among others. On one side of the screen I render the list showing the property name. On the other side of the screen, inside…
Katyellen
  • 225
  • 2
  • 8
1
vote
1 answer

React-Learflet - Change circle opacity when clicked

I'm trying to change my circle Opacity when I click on it to act as an active state I declared my state const [active, setActive] = useState(false) My function const sidebarTrigger = () => { setActive(true) } this is how i'm trying to…
Phakamani Xulu
  • 259
  • 5
  • 14
1
vote
1 answer

react-leaflet v4 set and change marker on click

I can't set and change the marker on click. I get the user's location from the browser and center the map with these coordinates. When I run console.log(coords) I can see the coordinates that the browser picked up, but when I go to set the marker…
Klever Silveira
  • 11
  • 6
0
votes
0 answers

React leaflet upgraded to v4, this.ref returns null in class component

Basically, I have leaflet map, showing a vehicle moving on it. now I have upgraded the leaflet v2 to v4. this.ref and this.ref.leafletElement is undefined. so, I am unable to animate the vehicle icon on map
jawad zahoor
  • 81
  • 1
  • 6
0
votes
1 answer

react-leaflet cannot read properties of null (reading useState)

I just installed react-leaflet in order to display a map in a react project. I believe I have followed the setup instructions to a T, but I still keep getting this error: this error only appears when I try to render the MapContainer…
Sovengarde
  • 27
  • 1
  • 2
  • 5
0
votes
0 answers

React-Leaflet Style doesn't load in

I am using a codesandox file which is using a GeoJson from React Leaflet. https://codesandbox.io/s/react-leaflet-geojson-forked-w8stw6?file=/package.json This exact code with the same package version doesnt work when I run it locally. By doesnt work…
ManishSalian
  • 19
  • 4
0
votes
0 answers

react-leaflet-measure installiation problem in react-leaflet version 4

I am using react-leaflet version 4 and want to installed react-leaflet-measure. after installing and doing configuration i got 'Uncaught TypeError: Super expression must either be null or a function, not undefined', as I understand it because…
Vardges Hamazaspyan
  • 1
  • 1
0
votes
1 answer

Unexpected token (10:25) in react-leaflet videoOverlay file during webpack build

Failed to compile ./node_modules/react-leaflet/lib/VideoOverlay.js 10:25 Module parse failed: Unexpected token (10:25) You may need an appropriate loader to handle this file type. | var overlay = new LeafletVideoOverlay(url, bounds, options); | …
D333
  • 31
  • 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
1 answer

How to resolve error message of Content-security-policy

I'm using react-leaflet version 4.2.1 and got the error message: "Refused to load the image '' because it violates the following Content Security Policy directive: "img-src 'self' blob: data:" I've added a tag to the index.html as…
Eran
  • 1
  • 1
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

My problem is that it puts more than one marker, and I want to make it work with only one marker

import React, { Component } from "react"; import { MapContainer, TileLayer, useMapEvents } from "react-leaflet"; import L from "leaflet"; import "leaflet/dist/leaflet.css"; const icon = L.icon({ iconSize: [25, 41], iconAnchor: [10, 41], …
Arstoo
  • 1
1
2