Questions tagged [react-leaflet-v4]
28 questions
0
votes
0 answers
ReactLeaflet with open street map- unable to fit in marker point exactly inside the image overlay
I am trying to fit an imageoverlay inside a map container with few marker points to be aligned accordingly.
outer/div container size is fixed height: "264px" width: "1179px",imageoverlay here is an image of airport bay with list of latitudes and…
0
votes
1 answer
React Leaflet 4.2.0 - how to change zoom on button click?
**I would like to add a button next to the map, after clicking which I will be able to change the zoom of the map.
**
Is this feasible in the new version of react-leaflet?
Example scenario:
I display a map of the country with zoom 7,
above the map I…
0
votes
0 answers
Issue using eventHandlers with react-leaflet and next.js
I'm trying to use eventHandlers with react-leaflet in a next.js application, but the events are never being fired.
Here is an example of the code I'm using in my Map component:
import { MapContainer, Rectangle } from "react-leaflet";
const Map = ()…

jjmss
- 91
- 1
- 6
0
votes
0 answers
How to add LayerGroups to a marker in React Leaflet
I'm getting confused about LayerGroups in React Leaflet.
I am iterating through an object with markers in React Leaflet (using Gatsby), and when I add the marker I want to assign the LayerGroup based on an attribute in the object I am iterating…

Lone Wallaby
- 159
- 1
- 1
- 9
0
votes
1 answer
Rotate marker in react-leaflet v4 - React Typescript
I´m having trouble trying to rotate the marker in react-leaflet.
I have seen some examples where it is done with an older version of react-leaflet using leaflet-rotatedmarker. See below... have tried using both these examples without any result,…

CookieMonster
- 241
- 1
- 9
- 26
0
votes
0 answers
regarding react-leaflet,GeoSearchControl, OpenStreetMapProvider, flytomap
React Leflet flyto.map fumction is not working in react-leaflet version 4.1.0. it is only working version upto 3.2.5. is there a new function for new react-leaflet version 4.1.0?
function FlyToButton() {
const onClick = () => {
…

Tiran Jayasekara
- 39
- 1
0
votes
1 answer
How to add a custom control (legend with buttons) to react-leaflet v.4 map?
I would like to add a custom Legend in react-leaflet v4 map, but i can't understand how to do it correctly. I have already read the https://react-leaflet.js.org/docs/example-react-control/ example but it is quite complicated.
Please check the…

DimMtz
- 1
- 1
0
votes
1 answer
Lastest Version of ReactJS and LeafLet.Shapefile Not Work, only display blank page
I'm currently working on ReactJS GIS and referring to this sample Demo. But when I update the latest version of React and dependencies is not work, no error message displayed on the console. What wrong. I've also test in my local computer, the…

Plipus Tel
- 666
- 3
- 13
- 23
0
votes
1 answer
How to Add Layer in React Leaflet & Routing Machine and Filter by Vehicle Code
You can see the component I created in the picture. Here are the different vehicles and their latitude and longitude values. I am routing according to these values. What I want to add at this stage is that there is a layer button on the top right…

Yunus
- 123
- 1
- 1
- 11
0
votes
1 answer
React Leaflet Marker offset change
The tip of my markers does not come out exactly where it should.
You will see it more clearly in the screen output I will add below.
I wrote some properties for icon in L.Icon.Default.mergeOptions but it didn't work
I use this code
let DefaultIcon…

Yunus
- 123
- 1
- 1
- 11
0
votes
0 answers
Render React-Leaflet v4 Map tiles in a Canvas
Looking for the best way to Render TilesLayer (all the map) in Canvas instead of image because of lags? Found a "way" with React Leaflet V3.0 but it's not Working in Leaflet V4.0. Any suggestions to help please?
Here is what I Tried : To add…

Lucas
- 85
- 9
0
votes
1 answer
react-leaflet seems to cause duplicate render calls with React18
The other day I updated my application to React18 and found that something has changed there in the behavior of react-leaflet.
In my project I wrote a custom wrapper for the leaflet-geocoder, which is then used in the MapContainer
Geocoder:
export…

user17145524
- 227
- 4
- 10
0
votes
1 answer
Add more than one tile layers to in react-leaflet
I want to add more than one tilelayers to mapcontainer. I am not able to accomplish that. I have one tilelayer like this
const magnifiedTiles = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
and another one here:
export default…

user3050590
- 1,656
- 4
- 21
- 40