1,386 questions
1
vote
1
answer
102
views
How to make a component show on top of MapContainer?
I have a react app that uses React-Leaflet. The Application renders a map, and on top of the map there should be a component that shows a modal. Instead, the modal is shown underneath the map. How can ...
- 49
0
votes
1
answer
82
views
React React-leaflet and MarkerClusterGroup, can't access property "useState" error
i have more than 13300 points of interests to show on a map.
i have created a app with starter react app, react-leaflet and react-leaflet-markercluster
but i have this error "can't access ...
- 11
0
votes
0
answers
91
views
React Leaflet Polyline keeps re-rendering and flickering during map interactions (zoom/pan) - how to make it stable?
I'm using React Leaflet to display a map with vehicle tracking points connected by a Polyline route. The issue is that when I zoom in/out or touch/drag the map, the Polyline route keeps re-rendering ...
0
votes
1
answer
66
views
How can I refresh the Map view when I return to it
I am developing a iOs/Android App with React Native
I have a Map view (OpenStreetMap) where weather stations are showed in a cluster.
The default map zoom is 12 and the default center position of the ...
- 11
0
votes
0
answers
141
views
How to Make Leaflet Work Fully Offline in React Without Storing Tiles Locally?
I’m working on a React + Leaflet mapping solution for Dynamics 365 CRM. I’d love your help understanding how to truly support offline maps in Leaflet using React — without manually storing tiles.
I’ve ...
0
votes
0
answers
111
views
Facing type issues in node modules ../../node_modules/@types/leaflet/index.d.ts:2504:60 - error TS1109: Expression expected
I am getting error while creating the build for my app. But even trying multiple solutions like skiplibcheck, @ts-ignore, @ts-nocheck, upgrading and downgrading the version of react-leaflet library ...
2
votes
1
answer
991
views
Map does not load properly using React Leaflet
I tried using React Leaflet example and but it does not render map correctly. My code is as it follows:
import './App.css';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
...
- 21
2
votes
0
answers
145
views
Is it possible to use react leaflet in expo web static rendering?
I have a React Native app developed with Expo, and it includes a Map component that renders a Leaflet map inside a WebView (for mobile).
For the web version (Map.web.tsx), I’m trying to use react-...
0
votes
0
answers
79
views
React-Leaflet Focus on Click
Subject: Map Dragging Causes Unexpected Focus/Pop-Out
Problem:
My map (within a card) in my GTAV LiveMap project "pops out" or gains focus when I click and drag. I want it to drag smoothly ...
0
votes
0
answers
91
views
Add CSS gradient to react-leaflet Rectangle
I am using the react-leaflet component <Rectangle /> and I am trying to add a CSS gradient (regarding opacity) to it.
AFAIK I need to create a <defs><linearGradient {...} /></defs&...
- 3,283
1
vote
1
answer
220
views
Leaflet-MarkerCluster refreshClusters() not working as expected
I can't get my custom Leaflet ClusterIcon to update when Marker data changes. The Markers have a custom option (let's call it isLight) and I need changes to that option to be reflected in the ...
- 13
0
votes
1
answer
132
views
flyTo function not working with dynamic position
I'm working on a react project, where I display some markers on a leaflet map. I added two buttons on my map. One of them should fly to the position of the selected marker, when I click it. Therefor I ...
0
votes
1
answer
168
views
react-leaflet-markercluster export not defined
Uncaught ReferenceError: exports is not defined
webpack://project/./node_modules/react-leaflet-markercluster/dist/cjs/index.js?:5
js http://localhost/js/bundle.js:1885
import React from 'react';
...
- 1,879
0
votes
1
answer
467
views
Leaflet not loading all the tiles
I am facing some issue while integrating leafet into my react library, sometimes on refresh, the network call is not being made to all the tiles which at the end doesn't load the entire map and just a ...
- 1,326
0
votes
1
answer
181
views
Leaflet map is unexpectedly zooming out to the world view
I am trying to integrate leaflet in my react library, but the issue i am facing is that even though i have set initial bounds and zoom set for the MapContainer, sometimes on page reload the map zooms ...
- 1,326
0
votes
1
answer
217
views
React leaflet from cdn simple example
I have a very basic CDN served React and React Leaflet setup, but it fails. It seems like React-Leaflet uses another context/version of the React environment. The error is:
react.production.js:522 ...
- 2,464
0
votes
2
answers
145
views
React Leaflet only showing marker shadow
I'm using:
"leaflet": "1.9.4",
"next": "15.1.4",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-leaflet": &...
- 6,322
2
votes
2
answers
1k
views
Rendering <Context> directly is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?
I am using react leaflet in my react app.
I used context api to build my project.
But when i tried using the leaflet using code :
<MapContainer center={position} zoom={13} scrollWheelZoom={false}&...
- 165
0
votes
0
answers
42
views
How to make polygons visible only on respective sides using Leaflet Side-by-Side?
Problem:
I am using Leaflet and the leaflet-side-by-side plugin to compare two tile layers. Additionally, I have two polygons — one on the left side and one on the right. I want each polygon to be ...
1
vote
1
answer
419
views
Next.js 15.1.2 with react-leaflet 5.0.0-rc.1: Component won't load. Tried StrictMode false, SSR off, dynamic import, 'use client', leaflet.css
I've observed that the leaflet component fails to load whenever I include the Leaflet CSS file, regardless of what I try. I’ve also noticed a strange behavior where the map loads when I remove the ...
- 13
0
votes
1
answer
196
views
How to use custom icons in leaflet controls?
I want to replace the default buttons in my leaflet map with custom ones, so that I can apply my own style and functionality on them.
The buttons are created and placed in the map and the functions ...
0
votes
0
answers
16
views
How to check self intersection while editing the polygon on react-leaflet [duplicate]
How to check self intersection while editing the polygon on react-leaflet?
I want to get the warning while dragging the polygon edit handlers.
i am editing single polygon at a time
const onEditClick = ...
0
votes
0
answers
83
views
SVG Sector (FoV) Misalignment with Markers on Zoom in Leaflet: How to Maintain Alignment?
I am working on a Leaflet-based application where I overlay an image (a floor plan) and place draggable markers representing CCTV cameras.
For the CCTV cameras, I display their field of view (FoV) as ...
- 1
0
votes
1
answer
93
views
React Leaflet "Draw a Marker" option doesnt show marker icon
Using component with the custom icon works anyway, but trying to mark the location using the tool in the right side doesn't show the marker image.
Thanks in advance.
const MarkerIcon = new L.Icon({
...
- 13
0
votes
1
answer
199
views
How can I use an access token for a React-Leaflet tilelayer without it being exposed on the frontend?
Here's what a React Leaflet TileLayer component that requires an access token looks like:
<TileLayer
url='https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token=1234567890'
attribution=...
0
votes
0
answers
58
views
Text in Leaflet OSM route tab not showing in dark mode on my site
Coding beginner here, I added a toggle between darkmode and then leaflet OpenStreetMap now I can't figure out why the text on my leaflet map isn't visible.
Here are the screenshots:
Website in light ...
3
votes
1
answer
2k
views
Problems with react-leaflet in Next.js 15
I have a Next.js 14 app with react-leaflet that works fine. I wanted to update it to Next.js 15 but that caused some issues: In development mode the code return an unhandled runtime error "Error: ...
-1
votes
1
answer
155
views
How to create a people finder functionality using Leaflet JS in a React app
I am building an enterprise people finding app. My use case is:
Allow a user to locate themselves on a map and mark their location.
Then set the number of miles in radius up to which they would like ...
0
votes
1
answer
468
views
Issue with Leaflet map on React
I want to add the Leaflet map to my website on React but I get the issue during project compilation.
Code:
import React from "react";
import {MapContainer, TileLayer, Marker, Popup} from &...
- 727
1
vote
2
answers
236
views
How to type iconCreateFunction from MarkerClusterGroup
I have created a small test using MarkerClusterGroup from react-leaflet-cluster.
Although it works, I have a hard time making all the types work in TypeScript:
<MarkerClusterGroup
...
- 29.6k
1
vote
1
answer
224
views
How to mock useMapEvents (which is provided by react-leaflet) in the unit test
I was trying to create a new unit test to mock UseMapEvents but I received an error message that stated "ReferenceError: Cannot access 'map' before initialization".
Do you have any solution ...
- 23
0
votes
1
answer
214
views
How to run react-leaflet hook only when button is clicked
I am trying to implement some simple movement controls on a react-leaflet map to allow "flying" to a set of predefined coordinates after pressing a button.
I'm aware that the Map instance ...
- 6,275
0
votes
1
answer
102
views
react-leaflet Popup onClose event not firing
My react-leaflet popup has an arrow icon to expand its information, which is handled via useState. When the popup is closed, I want the expanded state to reset to false instead of persisting as open. ...
- 23
0
votes
0
answers
291
views
How can I dynamically retrieve GeoJSON data based on a given country or state name?
I am developing a Next.js application where I display a map on the dashboard using the react-leaflet package. When the dashboard page loads, a GET API is called, returning an array of strings, which ...
- 409
0
votes
0
answers
117
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
340
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
105
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-...
- 103
0
votes
1
answer
120
views
How to delete zoom controll from the Map Container react leaflet. Im using react leaflet library
<MapContainer center={[coord.lat, coord.lng]} zoom={10}>
<TileLayer
attribution='©<a href="https//www.openstreetmap.org/copyright">OpenStreetMap<a/> ...
1
vote
0
answers
80
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 ...
2
votes
0
answers
251
views
How to render an offline map using leaflet in React project with locally available map tiles?
In my React project, I want to render offline maps with the leaflet library. For this purpose I have downloaded map tiles of northern India from QGIS. I have downloaded 4 levels of zoom (10-14), they ...
- 21
1
vote
0
answers
157
views
Google map tiles with leaflet on safari IOS won't load
I have replaced openstreetmap tile layers with google's tile layer in my leaflet web app.
It is working great on android ( every browser ) and on windows ( every browser ) but it does not work on IOS (...
- 11
0
votes
1
answer
73
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 ...
- 210
1
vote
1
answer
523
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 ...
- 102
1
vote
2
answers
265
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
764
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 ...
3
votes
1
answer
268
views
Implementing a Creeping Line Ahead (CLA) to Tasking Area Search Pattern Transition in Leaflet.js
I have a requirement to draw a Creeping Line Ahead (CLA) pattern using Leaflet.js over a tasking area (squares, rectangles, and generic polygons). The CLA pattern includes parallel lines with shorter ...
- 5,135
0
votes
1
answer
187
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
147
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 ...
1
vote
0
answers
84
views
Create watermark in react-leaflet
The error Cannot read properties of undefined (reading 'Control') is thrown, where do I find the necessary imports? I've tried the answers from this post as well as the official documentation but I ...
- 312
0
votes
1
answer
521
views
Next.js AppRouter Leaflet Map
Im using Next.js 14.1.0 version and im using leaflet map in my project in two custom hook and i got this error in my development running console.
⨯ node_modules\leaflet\dist\leaflet-src.js (230:18) @ ...
- 1