All Questions
1,097
questions
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