All Questions
523
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
0
votes
1
answer
120
views
How to drag a polygon when dragging a marker inside of it?
I have a map with polygons and markers, and a sidebar with tools buttons (like in this demo : https://geoman.io/demo). My markers are linked to my polygons in my database and if I use the 'Drag layers'...
- 89
0
votes
1
answer
382
views
React Leaflet Google Map Partial and Incomplete [duplicate]
I'm trying to learn something and develop a google map project with react-leaflet using JavaScript. I've made a simple React app and implemented the simple google map layer. Maps however are only ...
- 41
0
votes
0
answers
55
views
Rewrite react-leaflet event
I have a similar problem as this question from almost 7 years ago:
Rewrite Leaflet event
Except I want to extend the boxZoom handler in react-leaflet.
Specifically I want to modify the boxZoom....
- 13
0
votes
0
answers
69
views
webpage got freeze (browser message: page unresponsive) when doubleclick on leaflet map many times to show nearby resturants
I'm using a leaflet map with reactJs, The purpose of it is that when I double-click on a specific location the lat & lng of where I double-clicked are sent to API to bring nearby restaurants then ...
0
votes
1
answer
276
views
Leaflet rendering issue - map overflows
I have created a repo to reproduce the issue. I use Leaflet in React.js. The issue is that Leaflet map overflows in a mobile view and Navbar is not visible. It happens only when user logs in and is ...
- 8,753
0
votes
1
answer
227
views
React leaflet flyto function on table
Onclick tmp() on the table fetches location of point. I have tried UseMapEvents and UseRef method but get an error that map is called before initialization. Just want the map to fly to marker when ...
- 28
0
votes
1
answer
88
views
React leaflet make one marker ignore it's events, so other can be clicked
I have code like this:
return <React.Fragment key={i + 100}>
<MapMarker
obj={object}
key={i}
...
- 21
0
votes
0
answers
60
views
Nextjs13 and react leaflet: Dynamic loaded Marker in FeatureGroup unable to call getBounds
I currently play around with the new nextjs13 and the app directory as well as server side only code. In my project i use React leaflet and this cannot be directly used anymore in Nextjs13 (with the ...
- 377
0
votes
0
answers
143
views
In react-leaflet plotting Mbtiles in map
I am new to map technology and I am using react-leaflet to plot GEOJSON to map. It was all going well but then I m facing load time with massive GeoJSON data, so need to convert GeoJSON to mbtiles. ...
- 51
0
votes
0
answers
128
views
how to use leaflet-distortable image to georeference uploaded image
How can i use the methods in leaflet-distortableimage to georeference an image added to the map?
https://github.com/publiclab/Leaflet.DistortableImage
- 29
1
vote
1
answer
29
views
map as props in DrawFToolbar does not work correctly
i tried to simplified my codes to get sooner a solution, I have a Map component and a DrawFToolbar component, I send map as props to DrawFToolbar component, there are some console lines in ...
1
vote
0
answers
36
views
Interacting with leaflet popup containing React components
I am trying to interact with a popup in Leaflet. However, when I try to click the CustomButton inside of the popup, nothing happens, it wont even console log.
const popupContent = (
<div>
...
- 411
0
votes
1
answer
410
views
How to iterate array on GeoJSON to draw polygon dynamically in react-leaflet
I'm currently working on project that user draw a polygon and save that data on SQL server and load that data from SQL to show on leaflet page.
What I did so far is, saving drawing data on sql server ...
1
vote
0
answers
54
views
React-leaflet LeafletTrackingMarker does not work when it's under MarkerCLusterGroup
how to move smooth markers from old coordinate to new coordinate in MarkerCLusterGroup
i have a code in reactjs that works perfectly for LeafletTrackingMarker
lets assume that i have 10 position , ...
- 43
5
votes
1
answer
451
views
How to make marker appear on the surface of image overlay onclicked in react-leaflet?
I am using React leaflet together with custom CRS, Leaflet CRS docs
What I want to do is:
A custom image is display at the map container as ImageOverlay
When user clicked on a position on the Image, ...
- 2,612
0
votes
2
answers
535
views
How to build a Choropleth map in React
So I'm trying to make a Choropleth map of Spain in React, using leaflet. This is my code: `
import React, { useEffect, useRef, useState } from 'react';
import { MapContainer, TileLayer, GeoJSON, ...
- 1
2
votes
1
answer
455
views
Map getting rendered only in localhost - Not displayed after app build process
I am working on a react application which have two maps (one leaflet+esri map and the other is maptiler). I have got the API keys for both, and it gets rendered properly in localhost environment.
...
- 1,260
0
votes
1
answer
116
views
Stop Map to change it's direction whenever markers are updated
Below is the code of my react-leaflet simple map, i have given center and zoom values
<Map
center={[-30.036294, 20.71996]}
zoom={5.8}>
{markers.map(m => {
return <Marker ...
- 362
1
vote
2
answers
314
views
React Leaflet update position
I've got a question about React Leaflet. I am now trying to build a PWA with the react framework and I need to use a map, hence React Leaflet.
So here's the situation :
I need to load the Map when I ...
0
votes
1
answer
156
views
How can I add a switch to leaflet map react?
There is a problem with customizing a button and put it at top right of a Map Container.
here is my reactjs code for Map box.
<MapContainer style={{width:"32vw", height:"32vh&...
- 25