All Questions
409
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
881
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
2
votes
1
answer
1k
views
Failed to compile in react react-leaflet
I tried to make a project with the current version of react, react-leaflet and leaflet, and I get this error:
Failed to compile.
./src/components/ViewMap.js Module not found: Can't resolve
'react-...
2
votes
0
answers
4k
views
Attempted import error: 'withLeaflet' is not exported from 'react-leaflet'
Code:
import { withLeaflet} from "react-leaflet";
I just want to import the withLeaflet but it gives me this error
Error:
Attempted import error: 'withLeaflet' is not exported from 'react-...
- 441
2
votes
0
answers
776
views
Leaflet-Routing-Machine: TypeError: Cannot read property 'getSize' of undefined
Not sure how this can be happening as I am using useRef to pass a reference of my map to the Routing Machine component...
But first here are my dependencies...
"react-leaflet": "...
- 7,589
2
votes
0
answers
751
views
Unable to remove react-leaflet Map with MapControl in React
I created map legend in Leaflet map using MapControl. Everything working well but when I try to remove Map component I have error Uncaught TypeError: Cannot read property 'remove' of undefined from ...
- 21
2
votes
0
answers
869
views
React Leaflet Polyline with arrow Head Issues
I am using react Leaflet. I try to implement it with a polyline with an arrowhead.
it showing the following error.
1.TypeError: Cannot read property 'addLayer' of undefined at t.n.componentDidMount (...
user4061275
2
votes
0
answers
412
views
React Leaflet - Extra Markers Plugin is not showing markers
Encountering an issue where the extra markers plugin is only displaying the icon. There is a very similar post to this but in Angular. My console shows no error as well. Someone who encountered this ...
2
votes
0
answers
717
views
React Leaflet - Dynamically load popup content
I am using React Leaflet for map implementation. How can we load popup content dynamically ?
The dynamic contents are getting from an api.
i tried using state change (for popup content) in the ...
- 347
2
votes
0
answers
1k
views
Jest tests not passing even though component seems to render correctly
I am trying to learn to write unit tests for a react application I am building, but I keep running into problems when I try to do a shallow or full render. However when I look at in in chrome it doesn'...
- 33
2
votes
0
answers
1k
views
React Leaflet - Unable to use Canvas Markers with Clustering
I'm trying to use Canvas Marker with Clustering but its throwing an error.
The following libs are used:
https://github.com/yuzhva/react-leaflet-markercluster
https://github.com/lycheelin/react-...
- 396
2
votes
0
answers
800
views
How to export Leaflet map to tiff image using react?
i'm trying to create geotiff/tiff file from leaflet-map. i already check on any plugin that can export map to image like leaflet.print, leaflet-easyprint, leaflet-image, leaflet.browser.print. but ...
- 21
2
votes
0
answers
740
views
Popup won't stay open in react-leaflet after marker's onClick event
I have a leaflet map that creates markers from the API data. Markers have onClick methods, that fetch data from the open weather API unsing marker's lat and lon. The weather data must be shown on the ...
- 95
2
votes
0
answers
473
views
D3 + Leaflet map with react js
I'm trying to make a map and plot pins with d3 in the same map, but somehow the pins don't appear and i dont get any error, but sometimes appear this error.
My code basically takes data from an api, ...
- 17
2
votes
1
answer
2k
views
React Leaflet: FlyToBounds programmatically on prop change
The react-leaflet map component is rendered properly based on a polyline. The polyline starts perfectly centered in the middle of the screen.
Here is my issue: I want to recenter the map to the ...
- 813
2
votes
1
answer
1k
views
Google Maps in React not showing street and city names in hybrid view
I'm using the example here as a rough guide. I'm trying to implement Leaflet.js with Google Maps providing the base layers for imagery. Everything works great, but the hybrid view (satellite+place/...
- 3,540
2
votes
0
answers
1k
views
OpenLayers (or other mapping APIs) + React/Redux: how to keep map object in the store?
I'm trying to figure out how to work with mapping APIs like openlayers, leaflet, mapbox, google maps, etc. and React + Redux.
My goal is to make the map object available to all other components of ...
- 375
2
votes
0
answers
2k
views
custom marker is not shown react-leaflet
I have used react-leaflet for showing the map. Also i have used leaflet-routing-machine for routing. The routing is shown correctly but the marker is not overriden by car icon. I tried on both routing ...
- 4,004
2
votes
1
answer
373
views
react-leaflet 1.x + create-react-app : 404 on marker image
I tried using react-leaflet (in version 1.0.0-rc.2) with create-react-app but the marker image is in 404.
The generated image src is http://{server_host}:3000/static/media/marker-icon.2273e3d8.png")...
- 4,980
1
vote
0
answers
399
views
React leaflet. map is not showing
I have been trying to create a map section in my website for at least an hour now, but the react-leaflet or leaflet just won't work at all. I do every step that the doc says, I have watched a lot of ...
1
vote
0
answers
29
views
How do I create a "double" line feature from GeoJSON data with React-Leaflet
I am using React Leaflet to plot a GeoJSON file with several LineString features. I can plot and style them using
<GeoJSON data={lines} style={onEachLineFeatureStyle}/>
where the ...
- 1,565
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