All Questions
408
questions with no upvoted or accepted answers
9
votes
1
answer
5k
views
componentDidUpdate prevProps gives me current / new props
I'm trying to integrate a leaflet map but I think that is not the problem here. Anyway to re-render my map I want to use componentDidUpdate to see if the props changed I pass down to my map component ...
- 1,129
7
votes
0
answers
3k
views
React Leaflet.draw: How to create draw functions with standard buttons without using the react-leaflet toolbar, however, have it written in "React"
how can I create custom buttons that reside on a leaflet map in a separate control box to create "Polylines", "Polygons" or a "Marker" which will all be on separate ...
- 71
6
votes
0
answers
2k
views
Leaflet map with react-leaflet-markercluster cluster spiderfy's or closes onClick
I have a Leaflet map in React using react-leaflet and react-leaflet-markercluster
Clustering seems to work beautifully, but if I click on one of the cluster CircleMarker or Tooltip it opens a new ...
- 91
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
5
votes
0
answers
3k
views
Testing mapbox-gl map fails in test because theres no WebGL
I use mapbox-gl, specifically mapbox-gl-leaflet, in React to create a map:
import Leaflet from 'leaflet'
import 'mapbox-gl/dist/mapbox-gl.css'
import {} from 'mapbox-gl-leaflet'
import 'leaflet/dist/...
- 1,617
5
votes
0
answers
387
views
Rendering Component as Leaflet Marker using renderToString loses theme
We have a react project that uses styled components, with a ThemeProvider providing a theme object that all of the components should be able to reference. In this project, we have a leaflet map, and ...
4
votes
0
answers
3k
views
leaflet map shows grey areas
I'm trying to use leaflet map inside my react js project with https://leafletjs.com/examples/quick-start/.
everything works great except for the map which shows grey areas:
PlaceCard.js:
import { Map,...
- 41
4
votes
0
answers
1k
views
React leaflet WMSTileLayer with custom request headers
I am trying to send authentication header with my wms tile requests.
When I used pure leaflet library it was very simple using leaflet-wms-header
But, I have switched to react-leaflet and it has its ...
- 1,792
3
votes
0
answers
231
views
Use GeoJson data with Leaflet.PixiOverlay
I am using Leaflet.PixiOverlay(this package) in my App in order to render a big number of data(suck as markers, shapes, geoJson data, etc) without performance issues.
But the documentation of this ...
- 217
3
votes
1
answer
392
views
Assigning a type to the leaflet-search plugin in React and Typescript
I have the following problem: In my project, I installed the leaflet lib to present maps with images (floor plans of buildings) and each map has a Point, which is a GeoJson Point that symbolizes the ...
3
votes
0
answers
254
views
leafletjs @react-leaflet/core/esm/path.js
Hi im trying to use leaflet in a project. But when i executed the result is:
./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with ...
- 2,510
3
votes
0
answers
1k
views
Is there a way to center text inside a polygon in Leaflet?
I have GeoJSON that has names and polygons for every country in the world. I have successfully rendered polygons (which is basically world map) but I don't know how to show names of countries inside ...
3
votes
1
answer
6k
views
Importing GeoJSON file to React-Leaflet
I'm trying to import a GeoJSON file to react-leaflet like below:
import * as bar from "./data/bar.geojson";
...
function Foo() {
return (
<Map center={[...]} zoom={...}>
<...
- 41
3
votes
1
answer
1k
views
OnClick not working when rendering React button on a custom dialog
I am a little bit lost hope someone with JS knowledge could help.
I am using this dialog: https://github.com/NBTSolutions/Leaflet.Dialog, on a leaflet map.
It is nothing much just opens a dialog on ...
user9961339
3
votes
1
answer
1k
views
How to use react-leaflet on Nextjs?
Ok guys I'm trying to use Leaflet map on Nextjs but I get a window is not defined error
I saw a few posts about this issue on stackoverflow but none of them solved my problem.
Map component
import { ...
- 33
2
votes
0
answers
87
views
Leaflet map not rendering full image properly on mobile devices
I'm currently working in a react web-app. We are using leaflet to render some buildings maps. The app is working good in desktop. But we found the maps images are not loaded properly when using mobile ...
- 51
2
votes
0
answers
51
views
how to clear state after select menu option changes
So I have the sandbox of code right now which is plotting polyline data based on the option selected the issue is right now from the code i have provided if you run the first one initially then ...
- 422
2
votes
0
answers
736
views
how to apply different styles to react leaftlet map based on state
I want to apply these certain styles to my react leaflet map when the user clicks a button to signal that they want a dark themed map or a light themed one but I am not entirely sure how to go about ...
- 422
2
votes
1
answer
630
views
Leaftlet react javascript. use state to zoom in on map
I'm completely new to programming and leaflet and now I'm stuck.
my code:
import "./App.css";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import { ...
- 21
2
votes
0
answers
266
views
React-leaflet: add click and popup to KML layout
i 'm getting some Kml's from server (by axios) and loading them on map:
// functional Component KmlManager ->
const map = useMap()
const addTrackAndBoundsFromKml = kmltext => {
const parser =...
- 108
2
votes
0
answers
269
views
how to change color on Mouse over leaflet-react?
i'm facing a problem of mouseover event in leaflet
the thing is , when i hover ,the weight of the city changes for 2s and it doesn't stay highlighted even though the mouse is over the city
here is my ...
2
votes
0
answers
542
views
Leaflet Map not rendering Tiles correctly
I'm building a map with react-leaflet and in the first load sometimes most of the tiles aren't visualized as you can see below:
I've gone through several stack overflow question and what I've done is:...
2
votes
2
answers
880
views
React-leaflet + leaflet.elevation usage
I'm posting to see if anyone can give me some light on this 'problem/issue'.
I'm using react-leaflet and also leaflet-elevation, a 'plug-in' that creates an elevation graph and also adds some extra ...
- 31
2
votes
0
answers
594
views
How to clip GeoTiff according to shapefile using javascript?
Situation: I am plotting data provided in a GeoTIFF file on a map using Reactjs and geoTiff.js. An example of the GeoTiff files I am using is at the following link: https://drive.google.com/file/d/...
- 153
2
votes
0
answers
1k
views
react-leaflet geojson with custom popup for each polygon not working correctly
Extending the following question: React-leaflet geojson onEachFeature popup with custom react component
I am trying to have a Form within each popup that renders. Ideally the user is able to edit ...
- 2,512
2
votes
1
answer
729
views
Leaflet functions in redux-sagas with NextJS - window is not defined
I am refactoring an existing react-leaflet application that is written with NextJS and redux. I am introducing redux-sagas to clean up the api calling logic. In some of the sagas, I would like to ...
- 10.3k
2
votes
1
answer
1k
views
How do I resolve these errors with React 17 and react-leaflet?
I am in the process of upgrading my application to React 17 and using function based components. In the old version of React, everything was class based. The map in the old version used leaflet 1.7.1. ...
- 181
2
votes
0
answers
446
views
How to create a clickable grid with leaflet
i'm trying to create a clickable grid in react and leaflet,
i want to display a grid over my map, something similar to this: add mouse event to svg <pattern>, detect grid hover.
i built the grid ...
- 21
2
votes
1
answer
1k
views
Can react-leaflet handle indoor maps levels?
I'm building an react map for indoor location, I need to handle the levels of the building. Can react-leaflet handle this?, I am a newbie in Maps.
This is an example built in ruby about What I am ...
- 2,209
2
votes
0
answers
1k
views
Cross-Origin Read Blocking when trying to run a local tileserver map displayed using react-leaflet
I cannot get react-leaflet to display a map from a local maptiler server. I can however get the following simple leaflet code displaying the maptiler map:
var mymap = L.map('mapid').setView([47.3769, ...
- 2,845