All Questions
1,096
questions
0
votes
1
answer
17
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
24
views
Refused to load the image because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:"
I'm building an application that uses Electron Forge, React and Leaflet to display maps. However, when adding a map to my page, the following error is displayed in the console:
Refused to load the ...
0
votes
0
answers
47
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
32
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
30
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
0
answers
21
views
React Leaflet Marker Change Rerenders Every Other Marker Causing Performance Issues
I'm trying to build a quick leaflet map akin to Apartments.com. It's a map with a bunch of markers (up to 2000 in my case) and it will have a sidebar with more in-depth details about the markers that ...
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
128
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
0
votes
0
answers
34
views
GeoJSON component not updating with state
I am having the following problem: although the filteredData is being updated, the Map doesnt reflect it.
This is the relevant code for my HOC (which contians the Map component):
const ...
- 83
0
votes
0
answers
16
views
Deployment error for Importing/exporting DomUtil
Failed to compile
⨯ ./node_modules/@react-leaflet/core/lib/dom.js
Attempted import error: 'DomUtil' is not exported from 'leaflet' (imported as 'DomUtil').
This error occurred during the build process ...
- 1
1
vote
2
answers
192
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
0
votes
1
answer
73
views
Hide rest of map around country with leaflet.js in next js
I need help please. I would like to hide the other maps and only show the one of Cameroon. I'm using Leaflet and I'm on Next.js to be able to display the map. I saw this page React-Leaflet 4 with ...
1
vote
0
answers
391
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
67
views
Next.js React-Leaflet bouncing marker using Leaflet.SmoothMarkerBouncing
I am new to the front-end development, I am trying to get bouncing marker in React-leaflet using
https://www.npmjs.com/package/leaflet.smooth_marker_bouncing/v/1.3.0?activeTab=explore
But I don't have ...
0
votes
0
answers
61
views
Leaflet Map Rendering Issue with Large Non-Geographical Map
I’m currently developing a non-geographical map for my website using React, tailwindCSS and react-leaflet. The map is square-shaped and quite large, with each side measuring 10 million pixels. The ...
- 1
0
votes
1
answer
87
views
react-leaflet-heatmap-layer-v3 src directory not found
Trying to use the npm library react-leaflet-heatmap-layer-v3 and after I install it successfully and then yarn start my react typescript app, I get the following warning messages:
WARNING in ./...
- 809
0
votes
0
answers
21
views
React with Leaflet: issue color coding map based on country specific data
Essentially, I would like to be able to click a country and see it's trade partners highlighted on the map. I know that I am reading the data corrrectly from the ISO3, and I am able to print it, I ...
- 1
0
votes
1
answer
59
views
Window not defined on build NextJS
I am getting a window not defined error? I do not call window or document anywhere in the code and it works fine in development just errors on build.
ReferenceError: window is not defined
at C:\...
-1
votes
1
answer
35
views
React re-renders everything
I have an array of markers on a map using leaflet. I want to be able to remove one of the markers, however when I update the array of markers, it re-renders ALL of the markers in the array as you ...
0
votes
1
answer
106
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
80
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
18
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
72
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
59
views
how to do it in openlayer like leaflet draw style editor
I have researched and searched many times and can't find examples of style editors on openlayers. Available only on leaflets. Please share your experience, how should I write it?
It's fine if you ...
- 1
0
votes
1
answer
100
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
308
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
28
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
61
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
141
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
38
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
...
