All Questions
524
questions
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
0
votes
1
answer
75
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 ...
0
votes
1
answer
74
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
71
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
101
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
1
answer
65
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:\...
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 ...
2
votes
1
answer
345
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
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
1
answer
126
views
want to show pin on leaflet map using react js
I am trying to create a map using React JS and a leaflet
but the problem is I am not able to map position on the map
here is my code
import React, { useState } from 'react';
import {
MapContainer,
...
- 23
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
49
views
Error Adding Marker Clusters & County Boundaries to Leaflet Map
I am able to add all state boundaries to my leaflet map.
But if I try to add clusters I am getting the below error.
Error in /~/components/MapBoundaries.tsx (138:34)
map is not defined
Can you let me ...
- 171
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
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
115
views
React Leaflet Material UI divIcon not styled
In React Leaflet, I am trying to use divIcon to render a custom Material UI marker that takes in a background color prop. However, when the marker is used in leaflet, the background style is not ...
- 51
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
232
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
0
votes
0
answers
13
views
How to dynamically resize Leaflet CRS.Simple map based on viewport while maintaining standardized coordinates? [duplicate]
I'm using Leaflet to render a static image as a map. For the sake of example, let's say the image is 700px x 700px.
To create the map, I do the following:
map.current = L.map("map", {
...
- 43
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()
}
...
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 ...
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
248
views
How to change the style of a geojson feature on a click event in react leaflet
I am working on a react app with react leaflet. When you click on a country on the leaflet map, the country is supposed to change style (turn a different colour). I can't get this to work. In the ...
- 73
0
votes
1
answer
300
views
Problem with using google earth engine api with react
I am creating a react app with google earth engine API and leaflet with a Django backend. The backend will be used for computer vision purposes, Google earth engine is to be used to add layers to the ...
0
votes
0
answers
75
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
1
answer
215
views
How to get the address (street, house, etc.) when you click on a map in react-leaflet?
It is necessary that when you click on the map, the address (street, house, etc.) is displayed. Now when you click, I have latitude and longitude.
How to implement this? Send request with latitude and ...
- 261
1
vote
0
answers
34
views
Marker hiding after fitBounds in leaflet
fitBounds and flyToBounds are very good for changing the bounds of the map of different positions.
The thing is that I have some markers on the map and when I call this function it sometimes hides the ...
- 752
1
vote
0
answers
40
views
Property 'onClick' does not exist on type 'IntrinsicAttributes & MapContainerProps & RefAttributes<Map>'
Onclick doesn't work on the mapcontainer, can anyone help with that?
Function handleMapClick:
function handleMapClick(event: LeafletMouseEvent ) {
}
MapContainer with onClick:
<MapContainer ...
- 11
0
votes
1
answer
93
views
Leaflet GeoApiFrProvider Sending Incomplete Search Requests
I am working on a map application using Leaflet and the GeoApiFrProvider. While the setup works correctly most of the time, I'm encountering an issue where the search request is sent prematurely, ...
0
votes
0
answers
190
views
React Leaflet Fullscreen Control
I'm using this library, but the fullscreenControl prop doesn't allow me to change the icon's position on the map. Any idea? remains fixed in the topleft.
im using this lib
https://www.npmjs.com/...
- 17
0
votes
1
answer
92
views
Can't typify mapRef.current
So I have this react component with leaflet map and TypeScript warns me on line mapRef.current.setView(coords, 13) that this is "unsafe call of an any typed value"
import 'leaflet/dist/...
- 1