All Questions
763
questions
0
votes
0
answers
28
views
Leaflet Map Tiles Disoriented When Deployed on EC2 Instance
I'm encountering an issue with Leaflet map tiles appearing disoriented when I deploy my application on an EC2 instance. The tiles load correctly when I run the app locally, but once it's deployed to ...
0
votes
0
answers
42
views
Performance Issue with Polyline Rendering on React Leaflet Map
I am experiencing a performance issue with the polyline component of the Leaflet map library in React.js. I have a large dataset of traffic congestion data (approximately 5,000 to 10,000 polylines) ...
0
votes
1
answer
39
views
React-Leaflet how to make circle change size relative to zoom
In React-Leaflet I put a L.circleMarker in some coordinate and and gave it some radius. when I zoom in the radius size shrinks, but I want it to grow bigger. for example if I drew a circle around New-...
- 57
0
votes
0
answers
53
views
How can I improve React Leaflet performance when rapidly updating a marker position?
I'm working on a page which reads GPX files (a series of lat/lon GPS points) and plots the route using React Leaflet as well as showing an elevation profile using react-chartjs-2.
When hovering over ...
- 1,330
0
votes
0
answers
36
views
How to get rid of React Leaftlet map gray area while scrolling vertically
Hey guys I have use React Leafnet in my web app, everything seems working fine when I scroll map horizontally it loads new map images nicely but when I scroll map vertically, than after some position ...
- 91
0
votes
0
answers
34
views
How to dynamically use fallback tiles from the previous zoom level of the same server in Leaflet?
I'm working on a mapping application using React with Leaflet for tile rendering. When tiles fail to load (due to network issues, server downtime, tiles not available), I want to dynamically use ...
0
votes
1
answer
50
views
Leaftlet divIcon with clickable button
I'm working on leaflet and I wanted to add click event for a icon in the custom divIcon as below,
If user clicks on the edit(pencile) icon then click event should trigger,
Here is the code I'm ...
- 200
0
votes
1
answer
136
views
React Leaflet map resizing issues
While using react-leaflet to create a map, I would like the map component to take over all the available space after header and footer. The code seems to work. However, when the resize handler is ...
- 92
1
vote
2
answers
196
views
React Leaflet markers not rendering with location data fetched from an API using useEffect
I am trying to render leaflet markers using React Leaflet with data fetched from an API using useEffect. The markers are not showing up despite the location data being non-null at the time of ...
- 53
1
vote
0
answers
399
views
React leaflet. map is not showing
I have been trying to create a map section in my website for at least an hour now, but the react-leaflet or leaflet just won't work at all. I do every step that the doc says, I have watched a lot of ...
0
votes
1
answer
107
views
Getting the clicked marker in react leaflet
So I have my leaflet map in my react project, I have markers on this map and I want to get the marker clicked. I want to show this markers popUp info on a side panel. How would I get the marker ...
0
votes
0
answers
82
views
How to manage rendering 30000 polygons on map using react-leaflet?
Im using react-leaflet to render heatmap using big amount of polygons that I get from database. Polygons are preconfigured and I don't perform any actions on them. My issue is that when user wants to ...
0
votes
0
answers
19
views
how to do autosave on editvertex ? because i dont want user to save all the time when he/she edits
Just want to save the polygons even after not saving it , and i have hided the save and cancel button.
Im already rendering the polygons using my own state and im changing it on every vertex change ...
- 1
0
votes
1
answer
77
views
changing cluster's styles not working with lazy loading leaflet in SSR react application
I'm encountering some challenges with lazy loading a Leaflet map in a React application deployed on a server-side rendering (SSR) environment. The application involves loading a list of products in a ...
- 350
0
votes
1
answer
111
views
React-leaflet flyto new position
I have a rather large application based on react and leaflet.
The problem is that I can't get the main map of the code to move to a new location, provided by the user in an input menu, when the menu ...
- 19
2
votes
1
answer
344
views
How to add react-leaflet map to remixjs app
I'm trying to add a react-leaflet map to a remix app. I created a simple app using the npx create-remix@latest command. I then added react-leaflet using the installation instructions. Now I have ...
- 2,333
1
vote
0
answers
29
views
How do I create a "double" line feature from GeoJSON data with React-Leaflet
I am using React Leaflet to plot a GeoJSON file with several LineString features. I can plot and style them using
<GeoJSON data={lines} style={onEachLineFeatureStyle}/>
where the ...
- 1,565
0
votes
0
answers
70
views
flyTo of react leaftlet working while setView is not react leaflet
I'm building this "Contacts" page that gets some locations from supabase displays them on the map and at the same time displays their information in a ul.
Now everytime the user clicks on a ...
- 1
0
votes
3
answers
166
views
Smooth scroll with react-leaflet
I'm trying to create a smooth zoom in my react-leaflet project.
I know that this is doable with vanilla leaflet as said in this post, with smoothWheelZoom, but knowing that vanilla leaflet does not ...
- 331
0
votes
0
answers
41
views
react-leaflet manage close popup on Child Component
I'm trying to make a react-leaflet popup everytime I click a link that changes the marker position in the child component, but it never closes de popup, here's what it looks like on the map component
...
0
votes
0
answers
12
views
how to push React Leaflet's attribution and map controls to the back [duplicate]
what i'm trying to do
the user sees a map, built in React Leaflet / Leaflet.JS. The user can then click a CTA button that pops up a modal. The modal should be the "top layer" of the screen, ...
- 174
0
votes
1
answer
69
views
React-leaflet ImageOverlay is not visible in exported PDF using jspdf
I'm using react-leaflet v4.2.1. I'm using it to display not a map but custom image like that
<MapContainer
center={[height / 2, width / 2]}
crs={crs}
bounds={bounds}
minZoom={-5}
...
- 1
0
votes
0
answers
110
views
React Leaflet map not Re-rendering
I'm encountering an issue with my React application where the Leaflet map component is not re-rendering even though the data it depends on has changed. Here's the structure of my code:
App.js
let [...
- 11
0
votes
0
answers
63
views
How to Insert React Component Inside `leaflet-overlay-pane` using react-leaflet (core)?
I'm working on a project where I'm using react and react-leaflet to create a map application. I have a requirement to insert a custom React component, wrapped in a <div>, inside the leaflet-...
- 1,052
0
votes
0
answers
35
views
How to wrap the VideoOverlay component in react-leaflet with a div?
I'm currently working on integrating a video overlay onto a map using the react-leaflet library. I'm using the VideoOverlay component provided by react-leaflet to render the video onto the map ...
- 1,052
0
votes
0
answers
80
views
How to Implement Tile Caching for Leaflet in React?
I'm currently working on a project using React with Leaflet for mapping functionality. I've been exploring options to optimize performance, and one area I'm interested in is caching Leaflet tiles to ...
- 202
0
votes
1
answer
103
views
Why whenever i call MapContainer I always get "React-leaflet Error: Dispatcher is null"?
I am at my first experiments with React-Leaflet, so after installing everything i treid to add a simple map in my React App, but whenever i call MapContainer the only thing I obtain is this error log:
...
- 1
0
votes
0
answers
113
views
Create A Polar Coordinates Grid using react-leaflet
I am currently working on a react component that could potentially create a Polar coordinates grid.
In my React Project, i have to display on top of OSM (Open Street Map) two types of Grids (...
0
votes
1
answer
58
views
React Leaflet: Resize point marker not being dragged
A resizeable rectangle in place automatically on the map with some bounds.
when I drag the rectangle, it drags but the resizeable points is still on the same place.
Is there something i am missing ...
- 980
0
votes
1
answer
112
views
Auto pan and update map position when data inside Popup changes
I have some dynamic data inside <Popup> that will change the Popup box size after opening. When you first click on the <Marker> it will update the content, position and adjust the pan of ...
- 321
0
votes
1
answer
81
views
React-Leaflet: updating a marker's position every second fetching the coordinates from an .env file
I'm running a simple react-lefleat map on small http server running on an Arduino board and I would like to update a marker's position (my position) according to the coordinates extraced by the ...
0
votes
0
answers
136
views
How to create satellite layer with labels using react-leaflet-google-layer
Trying to implement satellite view with labels on my react project using react-leaflet and react-leaflet-google-layer packages.
I can create satellite view but not able to add labels on map (city ...
- 11
0
votes
1
answer
231
views
React Leaflet divIcon with clickable button
In react-leaflet, I am trying to add a draggable button to the map as shown in the image below. I also want the rest of the div to be non-clickable.
However, when I click the button, nothing happens.
...
- 51
1
vote
1
answer
87
views
How to Get GeoJSON Feature on Map.Locate in React Leaflet
I am creating a map with imported GeoJSON data. I am trying to create a Find Me button that will zoom to the user's location and get a property associated with the enclosing region (as defined by the ...
- 11
0
votes
0
answers
114
views
Issue using MapContainer from react-leaflet: TypeError: Cannot read properties of null (reading 'useState')
I'm trying to use React Leaflet to add a map from OpenStreetMap on my website. Everything seems to go well syntax wise, however when I try to use I encounter this error:
Uncaught TypeError: Cannot ...
- 31
1
vote
1
answer
125
views
How to stop a click propagation for custom react components that are child to MapContainer
I`ve created a custom control react component for map like that:
export const MapZoom = () => {
const map = useMap()
const handleButtonClick = () => {
map.zoomIn()
}
...
1
vote
1
answer
339
views
How can I access the map object since the whenCreated prop was removed in react-leaflet v4.x?
I have been struggling with an issue which comes down to me not being able to properly reference the map object. After researching it for a few days, I've come to the conclusion that the "old&...
0
votes
1
answer
97
views
Dynamically change the background color of the TileLayer attribution
I have created a component that contains the map and changes the map for dark or light mode.
How can I dynamically change the color of the attribution? There's any props or style key that i can use ?
...
- 1
0
votes
0
answers
114
views
Problem creating an L.Map instance with React-leaflet
There is a map state defined as
const [map, setMap] = useState(null);
Here is the snippet which is supposed to initialize the map:
<MapContainer
center={
areaOfInterest.latitude ? [...
0
votes
0
answers
130
views
Leaflet Map open popup in markercluster from outside with react-leaflet and react-leaflet-markercluster
I encountered an issue with combining two functionalities: placing Markers in a group using the MarkerCluster plugin (https://tomickigrzegorz.github.io/react-leaflet-examples/#/marker-grouping-...
0
votes
0
answers
107
views
Obtaining visible Map Data as an Image in React-Leaflet
I'm working on a ReactJS application that utilizes react-leaflet to display maps, supporting both OpenStreetMap and TIFF formats. My goal is to implement an upscale/digital zoom feature when the zoom ...
0
votes
1
answer
218
views
React leaflet shows empty map
I have a problem with the map display in React Leaflet - I installed everything, but it still doesn't work...
What do I have to change? I added css, added height but do not know what is missing
...
- 542
1
vote
2
answers
1k
views
having ReferenceError: window is not defined error for react leaflet during build process
I am using react-leaflet in my nextjs project. The project works perfect on dev mode but when I try to build it it gives ReferenceError: window is not defined. I am also using ssr as false in dynamic ...
0
votes
1
answer
271
views
react-leaflet basic example rendering
I'm using leaflet and react-leaflet for the first time and using their basic example here
and the map is broken in multiple sections with half not visible.
<MapContainer center={[51.505, -0.09]} ...
- 278
0
votes
1
answer
60
views
ReactJS executes both if and else statement
I'm trying to build this little project with React Leaflet in which by searching through the leaflet-geosearch search bar a certain city, after clicking on it, a form should pop up asking for some ...
- 1
1
vote
1
answer
106
views
Leaflet for React: Converting overlay map for Leaflet into Leaflet for React
I have the following code meant for Leaflet:
const TileLayerNOAA = L.TileLayer.extend({
getTileUrl(coords) {
var z = coords.z -2;
if (z<0) z=0;
return 'https://gis.charttools....
- 119
0
votes
0
answers
99
views
How to properly change a loaded KML in react-leaflet-kml
I am using react-leaflet-kml and the functionality I am trying to make is a list of buttons corresponding to a KML file, which will make the map load/render that KML.
Currently, the buttons simply ...
- 160
0
votes
0
answers
71
views
How can I make a programmatic click in react-leaflet?
I am working on a map webapp, that should react on navigation from another route in the following ways:
fly to coordinates
click on them programatically
// fly
const map = useMap();
...
0
votes
0
answers
74
views
React-leaflet doesn't clear routes when adding additional waypoints
I'm trying to clear the route when I add a new waypoint. Only two waypoints should should show. However, when adding an additional waypoint, Leaflet will show the old route instead of clearing it. I ...
1
vote
0
answers
69
views
how to use RoutingMachine for creating path with manually added markers in reactleaflet map
as i have added the multiple markers but i want the create the path with RoutingMachine in reactleaflet map with those added markers anyone give me solution for this code below. in this we want to add ...
- 11