All Questions
1,097
questions
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
0
answers
130
views
Working example for Leaflet Geosearch in react
Excuse my ignorance, but being new to react and JS, I am getting irate trying to follow the docs for https://smeijer.github.io/leaflet-geosearch/ &
https://github.com/smeijer/leaflet-geosearch
I ...
- 61
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
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
2
answers
312
views
Type Error Importing GeoJSON file in a Typescript React App
I am trying to import a GeoJSON file to map region in a Leaflet map using React-Leaflet. I started the project using create-react-app. However, when I try to use the data in the GeoJSON component, I ...
- 11
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
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
98
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
245
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
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
1
answer
30
views
What is the recommended approach when dealing with irregularly shaped tiles in L.TileLayer (leaflet)?
I am currently working on a Plan Viewer for 2D plans in a react web-app. Once a plan is uploaded to our servers in pdf format, the creation of tiles at different zoom levels is triggered.
Now I want ...
- 1
0
votes
0
answers
24
views
Get dustbin locations near user's location and display on leaflet map
I am getting the type of garbage from the backend. Eg: plastic, glass, metal, paper, etc.
I am showing the user's location on a map using Leaflet in React.
How can I get dustbin locations based on the ...
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
1
answer
298
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
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
1
vote
1
answer
213
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
513
views
Draw polygon from API Data using React-leaflet and click event
I'm using react-leaflet and Geoman, to draw polygons on the map, I have an API that provides me with a GeoJSON. I can draw the shapes easily using const polygon = L.polygon(props.coordinates).addTo(...
1
vote
0
answers
29
views
Object iterator to push into array with signal R websocket and Leaflet
I have an async function connected to a socket that i want to iterate over every object and then push to an array:
interface ECSEquipmentLocationUpdate {
X: number;
Y: number;
Phi: number;
...
- 19
0
votes
0
answers
113
views
Fixed-Size Square grid in Leaflet Map at Different Latitudes
I'm attempting to generate square-shaped grid on a Leaflet map, similar to what you can see on this example: https://app.nextearth.io/. My primary goal is to ensure that these squares remain a fixed ...
- 49
0
votes
0
answers
153
views
Changing the color of a Leaflet map polyline as I navigate from point A to B
I'm working on a project where I'm using Leaflet to create a map. I've defined a path from point A to B, and it's currently colored yellow. However, I want to change the color of the traveled path to ...
0
votes
1
answer
263
views
How to achieve digital zooming on javascript or node Js or reactJs environment
What am I trying to achieve?
I have image of map which is tiff image width and height is 1024x1024 px and it will over lap on our map application (React,React_leaflet) at certain zoom level (e.g.18) ...
0
votes
0
answers
126
views
State not changing in leaflet map.on("click") function in React
I'm using Leaflet with React (not react-leaflet because there seems to be a lot more documentation for standard leaflet), and I want to add functionality in which a user can place Markers on the map.
...
- 43
0
votes
0
answers
114
views
Icon Marker for Leaflet v4 not showing
I have tried to place custom marker and the default of Leaflet, but still getting crop image in the MapContainer.
Here is my code of custom icon.
import { TileLayer } from "react-leaflet/...
- 684
0
votes
1
answer
221
views
Why L.vectorGrid.protobuf return undefined?
I'm using in React, Leaflet and react-leaflet.
Random things in order to post the question: Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just ...
- 573
0
votes
0
answers
46
views
React Modal not closing when used with react leaflet
After rendering the map container inside the modal component, everything works fine. But when we click on one of the zoom in and out buttons and then click on the overlay, the modal does not close on ...
- 45
0
votes
1
answer
657
views
Leaflet Map Rendering
My map didn't open completely, can anyone help me solve it? enter image description here
I tried to recreate the code and install it again, I tried to get the code from the website itself and it didn'...
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, ...
1
vote
0
answers
165
views
React-leaflet `no Context Provided` error when creating 3rd-party plugin
I am trying to build a custom plugin component for react-leaflet, but am running into the same error that several others have before me:
No context provided: useLeafletContext() can only be used in a ...
- 1,757
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
0
answers
135
views
Create a wider selection area to select the lines on react-leaflet map
Having difficulty in selecting the lines on react-leaflet map, so I have followed the below solutions,
https://gis.stackexchange.com/questions/466747/create-wider-selection-area-to-select-lines-on-...
- 200
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
279
views
Renderer is not working in PathOptions for the Polyline in react-leaflet
I'm trying to add renderer property to PathOptions for drawing the Polyline and here is the code for it:
const canvasRenderer = L.canvas({
tolerance: 5,
});
<Polyline
...
- 200
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
118
views
React leaflet polygon has border stroke when clicking on it (in Chrome)
I have a new problem with react leaflet
this problem appeared suddenly.
I don't know what happened and this stroke suddenly appeared around of polygon just in chrome browser when clicking on polygon.
...
0
votes
0
answers
76
views
How to Fix Polygon Stretching Error in React Leaflet Map
I am working on a project where I am using the react-leaflet package to display a series of polygons on a map, based on data fetched from an external API. I am experiencing an issue where some ...
- 13
0
votes
0
answers
104
views
Leaflet Heatmap is rendering only what is on screen, if I drag the map it will re-render after releasing the mouse
So basically I understand that the heatmap is rendering only what is beeing showed on screen. I wanted it to render more than what's on screen so that this problem woundn't happen. I have already ...
