Skip to content
Advertisement

Tag: react-leaflet

Leaflet geoman “Button with this name already exists” error when creating a new button in react

I am trying to create a custom button for arrows in the drawing tool of leaflet-geoman. The idea was to work with the copyDrawControl function, and to use Line as a model to make Polylines with arrow tips. I wrote a code mostly inspired from this demonstration https://codesandbox.io/s/394eq?file=/src/index.js and modified it for my goals. Here is the code : When

I am trying to draw circles and add popup on a map, but i keep getting errors. Cannot read properties of undefined (reading ‘lng’)

This piece of code is from my App.js I am using this as the default location of the map once the app opens const [mapCenter, setMapCenter] = useState({lat: 34.80746, lng: -40.4796}); I use this to update the location of the map, as selected from the dropdown menu, I am getting the lat and lng from data pulled from an endpoint

How to modify href property on Leaflet 1.8 Popup?

Is there a way to modify the href property of the close button on a Leaflet 1.8 popup? I can’t find anything in the documentation for it. Answer Unfortunately there is indeed no API in Leaflet for that specifically. However you can easily customize Leaflet behaviour by modifying how its classes behave. In your case, you would override L.Popup._initLayout method.

Location me in map from React Leaflet

I want to ask if I use a map from React Leaflet (https://react-leaflet.js.org/) but how do I add a location button to the map? like this an example of the location me button in the image that I gave the red arrow And pictures in the link: Example of an arrow Location Me An example on my map where I

React Leaflet Bound not working as expected

I’m using react-leaflet package to create bound animation on the map from selected markers as seen on the screenshot below. Here is the full code: https://codesandbox.io/s/react-leaflet-marker-with-bound-869mj The map will be bound if only the selected markers change. I try to implement the bound animation sample code from the documentation here https://react-leaflet.js.org/docs/example-view-bounds/ As we can see from the screenshot above, the

How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”

I am trying to create a react-typescript app along with leaflet. I used the command, npm install leaflet react-leaflet @types/react @types/leaflet –save to install the dependencies. But when I start the application it says, Here’s my package.json Here’s map/index.tsx I tried reinstalling dependencies several times but still didn’t work. I understand this is a simple issue and an error that

React leaflet map center not changing

I’m setting up a map to find the coords of a person and then put that location on the map. But for some reason, the coords aren’t being shown on the map. I console.log to make sure the state variables(where the coords are being stored) were emitting the right coords and they are. I don’t know why the map won’t

Advertisement