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 = () => { …
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…
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…
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
1
2