Questions tagged [react-leaflet]
React components for Leaflet maps.
1,382
questions
0
votes
0
answers
27
views
Why _onCreate function doesn't use correctly states?
The state stores the name and colour to be added to the object when creating a new shape. (This object will then be sent to the server).
So, when I create a modal window and throw new values from ...
0
votes
0
answers
21
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-...
0
votes
2
answers
70
views
React-Leaflet always redraws the map with "MouseMove"
I want to display the geo coordinates when the mouse moves in my React app. I noticed that with "Mousemove" the map is repeatedly redrawn with all objects with a large number. How can I ...
0
votes
1
answer
53
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
...
0
votes
1
answer
25
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
42
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 ...
0
votes
0
answers
35
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 ...
0
votes
0
answers
16
views
Why did yarn-build skip my react-leaflet WMS-generated LayersControl-responsive Legends?
I am building a custom web-gis solution on a PERN stack + Leaflet, and have just pulled an all-nighter making getLegendGraphics switch legends based on LayersControl, only to discover, after pushing ...
0
votes
0
answers
20
views
how to use leaflet.shapefile plugin
how do we actually start using leaflet.shapefile plugin from calvinmetcalf? I ran npm install shpjs --save, but when I do something like new L.Shapefile it will show this error:
...
0
votes
0
answers
19
views
How to prepare the data from openweather API for leaflet velocify wind map?
Currently, I am implementing the wind map with **leaflet-velocity https://www.npmjs.com/package/leaflet-velocity **and using the data from https://onaci.github.io/leaflet-velocity/wind-global.json. ...
0
votes
0
answers
35
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....
0
votes
0
answers
28
views
React leaflet upgraded to v4, this.ref returns null in class component
Basically, I have leaflet map, showing a vehicle moving on it. now I have upgraded the leaflet v2 to v4. this.ref and this.ref.leafletElement is undefined.
so, I am unable to animate the vehicle icon ...
0
votes
1
answer
32
views
Using bringToFront() / bringToBack() in React-Leaflet to set Layer order
I want to set the layer order of my react leaflet map by calling bringToBack() on my selected layer after the component has rendered.
I tried getting the layer with useRef() and then calling ...
0
votes
1
answer
177
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 ...
0
votes
0
answers
23
views
How can I introduce a buffer to React-leaflet?
I'm currently using React-leaflet to plot and pinpoint data. However, I have a massive amount of data to display, so I'm trying to introduce a buffer using Lazy, Suspense or Loadable. But when I ...
0
votes
1
answer
27
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 ...
0
votes
0
answers
18
views
Trying to make a "locate me" button on React Leaflet
I'm trying to make a simple "locate me" button on a React Leaflet map that I created.
This is the library I am using: https://github.com/thijssmudde/react-leaflet-locate-control.
Everything ...
0
votes
3
answers
50
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}
...
0
votes
0
answers
24
views
React-leaflet v4 drawer shows two duplicated drawer components
I'm using react-leaflet v4 and simple leaflet
currently as you see in the picture I receive doubled drawer component
here example of my code:
function MyComponent() {
const map = useMap();
const ...
0
votes
3
answers
162
views
Leaflet set-up using Nextjs is not working
I'm currently trying to add a customizable map on my website. But when I try to add React Leaflet, the map is visible, but cut in different "leaflet-tiles".
I don't know what is causing this ...
0
votes
1
answer
86
views
React - Uncaught TypeError: Cannot read properties of undefined (reading 'lat')
I'm trying to render a map that shows multiple marks with the leaflet lib, for this I tried to store multiple addresses in localStorage and then get them back and render all the marks with an array....
0
votes
1
answer
125
views
react-leaflet cannot read properties of null (reading useState)
I just installed react-leaflet in order to display a map in a react project.
I believe I have followed the setup instructions to a T, but I still keep getting this error:
this error only appears when ...
0
votes
0
answers
42
views
How to style popup from react-leaflet using tailwind in nextjs
I'm trying to style my popup in my map using tailwind but the styles are not reflecting.
const customIcon = divIcon({
html: `
<svg
width="54"
height="55&...
0
votes
0
answers
64
views
How to render the react-leaflet-map component in react-testing-library?
I am using the react-leaflet-map in custom page like this:
export default function LeafletMap({ latitude, longitude}: props) {
const [gmapsLoaded, setGmapsLoaded] = useState(false);
const initMap = ()...
0
votes
0
answers
26
views
How to use dragging marker in leaflet-geosearch?
I am using react-leaflet and leaflet-geosearch. I want the marker here draggable and print the location when the marker is moved to another place. How to do this?
const Search = ({ location,...
0
votes
0
answers
31
views
Error While Trying to draw a rectangle using react-leaflet-draw with Vite "Uncaught ReferenceError: assignment to undeclared variable type"
Im getting an error while trying to draw a rectangle "Uncaught ReferenceError: assignment to undeclared variable type",
All other shapes are working fine, but the rectangle is not working, ...
0
votes
0
answers
44
views
Leaflet Marker not showing with draggable as true
With my custom Draggable Marker below, if I set the draggable property as true, the marker stop being displayed in map. Does any of u know how to solve this?
const DraggableMarker = () => {
...
0
votes
0
answers
51
views
React-leaflet with animated ImageOverlay misbehaving on zoom/pan actions
I'm attempting to use react-leaflet and ImageOverlay with CSS animation to create the appearance of clouds floating over the base image.
At the default zoom level, all is good. The animation works, ...
0
votes
1
answer
47
views
ionic react-leaflet map not show in Home.tsx page
my problem is when i start ionic project and after installing the react-leaflet project
the map didn't show
so i need help how to do
so if there any one can help
the map in Home.tsx page
and i dont ...
1
vote
1
answer
81
views
Set Marker on map using leaflet
I want click on my map and set a Marker with a circle around. It shows the map but I cannot set a marker.
console.log is not showing anything. It seems my handleMapClick function does not work.
import ...
0
votes
0
answers
22
views
Pulsing is not happening for the `marker` added using react-leaflet open street map
Pulsing is not happening for the marker added using react-leaflet open street map. Could someone please advise how can I fix this issue ?
import React from 'react';
import L from 'leaflet';
import { ...
0
votes
0
answers
28
views
How to remove the previous route from leaflet.js
Currently everytime when I click in one markers it shows the route from the current location to the marker clicked.
I want that when I click in another marker the previous route disappear and shows ...
0
votes
0
answers
22
views
Create algorithm for creating polygons inside of given bounds
I am using react-leaflet and leaflet geoman.
For this project I am creating placements (camping spots) on a festival map. Then I got the new map.png and some of the camping spots is rotated.
I have a ...
0
votes
1
answer
164
views
Get all markers visible on the map with react-leaflet
I'm using leaflet in React to reproduce an effect like Airbnb. I don't really know the best practices, but I was thinking of: storing the markers visible on the map in an array and having this array ...
0
votes
1
answer
91
views
How do you update the mapRef in React-Leaflet V4 when using React-Redux?
I am using react-leaflet version 4.x.
I'm trying to update the zoom level of the map on click of button, just as a simple use case. I realize that you could create a child component to <...
0
votes
0
answers
134
views
Error No content provider: useLeafletContext() can only be used in a descendant of <Map Container> when testing a map component jest
I am writing a test of a component on jest that renders a map and builds a route between two points on the map. I use ReactLeaflet and leaflet routing machine. The component code is something like ...
0
votes
0
answers
58
views
GeoJson data is not being rendered over the react-leaflet map, when another shapefile is clicked
import React, { useState, useEffect, useRef } from "react";
import { MapContainer, TileLayer, GeoJSON } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import ...
0
votes
0
answers
55
views
ASP.NET Core with react.js, react-leaflet - TypeError: Cannot read properties of null (reading 'useState')
As described in the title above, I'm using ASP.NET Core 7 with react.js and would like to use react-leaflet there, but am obviously overwhelmed to even display the map.
I have looked at 2 things
...
0
votes
1
answer
129
views
Showing large .tif file on leaflet map 07.2023
Could someone give me a sample code on how to show large .tiff files as GeoTiff RGB images on the map in the open-source leaflet 1.9.1 map page? I'm struggling with writing code like this, but ...
0
votes
1
answer
48
views
Only narrow sliver of leaflet map drawn when placed inside allotment
I like allotment, a react split-pane component. In one of my projects it works great. In the other two leaflet maps would have to be placed inside Allotments.
Here an example: https://codesandbox.io/s/...
0
votes
1
answer
75
views
react-leaflet - SVGOverlay how update bounds rendering after new bounds selection
I'm using react-leaflet/SVGOverlay and trying rendering change bounds after OnChange selection.
In the example below, there is a blue rect component inside the SVGOverlay that follows 100% width/...
0
votes
0
answers
28
views
How to format the text and font color or background in a React-Leaflet Overlay component
I am using the react-leaflet library and am using the LayersControl components. I have numerous categories where I would like to format the text and color of the font to match the color of the that ...
0
votes
0
answers
27
views
How to auto-start locating when map loads with leaflet locatecontrol?
I'm trying to make a custom React component that uses the leaflet.locatecontrol to provide location features with my leaflet map.
So far I have it working completely fine as a standard control. It's ...
1
vote
0
answers
40
views
How to apply style on PolylineDecorator
I'm working on project to show the history of GPS device. For every few seconds, location of GPS devices are sent to our SQL server and currently I can use these data and show on map.
function ...
0
votes
0
answers
82
views
React leaflet heatmap layer v3 update issue on pinch zoom
I am facing an update issue for react-leaflet-heatmap-layer-v3 while pinch zoom in mobile as shown in the image. how to update the heatmap layer accordingly?
I expect to update heatmap layer as map ...
0
votes
0
answers
104
views
Want to open Leaflet / React Leaflet popup to the right side of MAP in React Typescript
I want to open the leaflet/React Leaflet map popup to the right side of the Map but it is opening near the marker or otherwise I want to open my custom Popup to the right side of the map after click ...
0
votes
1
answer
136
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 ...
0
votes
1
answer
194
views
React-Leaflet v4 with Next.js 13 Invalid hook call
I expirence an issue after updating my Next.js version from 12 to 13 - that also means I updated React from 17 to 18 and react-leaflet from 3 to 4. I have this component:
`
function ChangeView({ ...
0
votes
1
answer
138
views
Issue with getting through React Leaflet setup - Unexpected Token
I'm following the guide for React Leaflet at: https://react-leaflet.js.org/docs/start-introduction/
I followed all the steps through setup. However, when I try to serve my react project, I get this ...
0
votes
1
answer
67
views
React leaflet creates a new marker point and then adds the popup on that point
I have a react-leaflet application that renders a map with a ClusterGroup. The map is rendered correctly with the points but when I try to click on the point in the map to show a popup for the ...