All Questions
37
questions
0
votes
0
answers
35
views
GeoJSON component not updating with state
I am having the following problem: although the filteredData is being updated, the Map doesnt reflect it.
This is the relevant code for my HOC (which contians the Map component):
const ...
- 83
1
vote
1
answer
88
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
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(...
0
votes
0
answers
153
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 ...
1
vote
3
answers
978
views
React Leaflet Geojson Tooltip. How to disable black borders on click or dragging?
I have problems with the library Leaflet. I have big JSON data, which renders and shows the borders of different districts.
I add a tooltip in my GeoJSon, it shows the name of this district. But when ...
- 31
0
votes
1
answer
1k
views
How to refactor React Leaflet GeoJSON component to use the useMap function with Next.js?
I'm working on a React-Leaflet application using Next.js and I'm struggling to refactor my GeoJSON component to be able to implement a 'zoom to feature' event using the useMap function. The React-...
- 511
0
votes
1
answer
310
views
Use client side data fetching or getStaticProps for Leaflet layer component for SSG map with Next.js?
So, I'm trying to build a Next.js app to make a static site with a Leaflet map on it and I'm struggling conceptually with how to pull my location data into the components that will make up the Map. I'...
- 511
0
votes
2
answers
492
views
react-leaflet <GeoJSON /> pointToLayer option to change
I am learning react leaflet and trying to add circle marker on each point of geojson. Makers are not showing on map.
import React from 'react';
import Tiles from "./Tiles";
import L from '...
2
votes
0
answers
270
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 ...
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
0
votes
0
answers
320
views
Can't display only one country with GeoJSON - React.js Leaflet
I use React-Leaflet and want to show only country one country .
I got geoJSON of country and gave style to it but other countries keep showing.
How may I hide or delete other countries ?
function ...
- 439
0
votes
2
answers
1k
views
React-leaflet performance issue, prevent GeoJSON re-render
I have the following issue:
I would like to create a simple choropleth map using react-leaflet's GeoJSON component. I also want to have a tooltip that shows a value on hover over a GeoJSON feature. ...
0
votes
1
answer
2k
views
Leaflet: Change color onClick
I am trying to change the color of my GeoJSON-Layer on every click in my Ionic React App, but I only managed to change it once for the first click... My idea was to change the color between blue and ...
- 115
1
vote
1
answer
5k
views
How to render geojson polygon in React leaflet MapContainer?
Stack : Reactjs, Leafletjs, EsriLeafletjs
I am trying to display one Polygon in GeoJson on a leaflet map container. My main issue is when I use Leaflet.geoJson(data) it return invalid JSON object.
...
- 341
1
vote
0
answers
368
views
I had error "Invalid LatLng object: (NaN, 86.06925048939979)" when using proj4leaflet
I had error "Invalid LatLng object: (NaN, 86.06925048939979)" when using proj4leaflet
Im using react leaflet for an interactive map. for gall-peter map projection i used proj4leaflet, while ...
- 21
2
votes
1
answer
706
views
Getting updated coordinates after dragging in Leaflet
I am using react-leaflet and Leaflet.Path.Drag to drag GeoJSON. I would need to keep GeoJSON coordinations in React state. The issue is that updated coordinations on dragEnd are not corrent and ...
- 8,753
0
votes
1
answer
2k
views
How to select area on React Leaflet Map using external Select dropdown component
So the question is how to select specific area using external Select dropdown component:
<div className="Map">
<Select
onChange={setArea}
size={"large"}
...
- 83
0
votes
1
answer
908
views
geojson-vt with react-leaflet
Does anyone have an example of a barebone repo of a react-leaflet project using geojson-vt?
I have react-leaflet project that has a 13 MB geoJSON file. I can't figure out how to get it to render ...
2
votes
3
answers
4k
views
Using Geojson with tons of data in react leaflet
I'm using GeoJson of react-leaflet to display all polygons of an area. However, when the amount of data increase to 10000, the performance turns bad and my app has performance issues, cause it slow ...
- 159
0
votes
1
answer
325
views
Leaflet GeoJSON Turf: × Error: Invalid LatLng object: (undefined, undefined)
I set the return to null for the component and condition in question to check the data I'm returning and I couldn't find any issues in the coordinates arrays.
I get data as an array of geometry ...
- 102
2
votes
2
answers
904
views
Best way to filter a geojson in react?
I am looking to filter a geojson like this one, by feeding it an array of ids that correspond to the specific property I want to filter on. I am using React and leaflet and essentially want to filter ...
- 2,017
0
votes
1
answer
409
views
GeoJSON event handlers not firing
I have the following .tsx code. I am following the interactive choropleth tutorial from the docs, trying to port it to React and TypeScript. The map renders with the expected colours for each US state,...
- 271
0
votes
1
answer
461
views
how to transparent seas in worldGeoJSON (React leaflet) and show only one country
I create a map with worldGeoJSON in React leaflet library
bellow is my code:
<LeafletMap
center={[50, 10]}
zoom={6}
// minZoom={6}
maxZoom={10}
attributionControl={true}
...
- 115
0
votes
1
answer
1k
views
Handling huge GeoJSON data
I have a map application which uses around 6 geoJSON files. Those files amount to about 60mb static and 18mb when gzipped. Until now these are placed in src which increases bundle size to 18.4mb(out ...
- 429
1
vote
1
answer
4k
views
Update in real time tooltip with react-leaflet when changing language with i18n
I am currently displaying a Map, thanks to react-leaflet, with a GeoJSON Component. I'm also displaying some tooltips on hover over some countries and cities(for example, when I hover France, a ...
- 1,581
1
vote
1
answer
3k
views
Update the tooltip on GeoJson with react-leaflet when changing language with i18n
I am currently displaying a Map, thanks to react-leaflet, with a GeoJSON Component.
I'm also displaying some tooltips on hover over some countries (for example, when I hover France, a tooltip display "...
- 1,581
1
vote
1
answer
2k
views
Show specific marker and zoom to it on leaflet map when button is pressed
I want to call a specific object by name when one button is pressed in a json file and to be displayed on the map. And then the zoom and the map to be on this marker.
Structure of Json file:
type": "...
- 275
3
votes
1
answer
1k
views
Adding a Legend and Info about the highlighted state
I have been trying to add a legend and or an info section on the top right to show description about my highlighted state but I have not been able to do so, therefore I have had to post for some ...
- 695
0
votes
1
answer
943
views
Pop up on react leaflet map library
I'm using react-leaftlet map library https://react-leaflet.js.org/en/ in my react app and i have rendered some markers on the map and when a user clicks on a marker, a pop up appears. I want to open a ...
- 6,993