Questions tagged [react-leaflet]
React components for Leaflet maps.
714
questions
0
votes
0answers
2 views
react-leaft FeatureGroup inside LayersControl
I want to group different types of Markers with LayersControl.Overlay in FeatureGroup. But I didn't do that.
Any help?
<FeatureGroup ref={ (reactFGref) => {this._onFeatureGroupReady(...
0
votes
1answer
37 views
Changing the react-leaflet layer url by mutating react state throws error -> TypeError: Cannot read property 'call' of undefined
I'm trying to build a map with a selectable and dynamic layer URL with the code below.
When I try to change the layer URL by the state it shows the error in the screenshot attached.
I have stored all ...
2
votes
1answer
56 views
react/react-leaflet not immediately loading information
Example of issue
import firebase from 'firebase/app';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import { OpenStreetMapProvider } from 'leaflet-geosearch'
import ...
0
votes
1answer
81 views
Change css filter property on React-Leaflet TileLayer with useRef
I am trying to change the filter style property on the React-Leaflet TileLayer. Basically, what I want to do is to dim the tile layer without dimming/altering the markers by adjusting the filter style ...
1
vote
0answers
38 views
'MapControl' is not exported from 'react-leaflet' in react-leaflet V3.0.0
Trying to implement react-lealfet-draw with react-leaflet version 3.0.0.
it throws an error
/node_modules/react-leaflet-draw/dist/esm/EditControl.js
Attempted import error: 'MapControl' is not ...
2
votes
1answer
59 views
How to dynamically move and rotate marker in react-leaflet?
I have wrote a React project with react-leaflet and hook. My goal is to move and rotate marker every second. However, moving part is working fine. But the rotation of marker is not working. I am ...
0
votes
1answer
63 views
React/Leaflet-side-by-side Error: Map container is already initialized. #35
I'm having issue while rerendering the map with useEffect
const [baseViewCoords, setBaseViewCoords] = useState([37.715, 44.8611]);
const searchApiHandler = () => {
// some code that will ...
1
vote
1answer
40 views
How pass props to React Leaflet.markercluster options since v2.0.0?
I tried to pass property with <MarkerClusterGroup {...markerclusterOptions}>
by let markerclusterOptions but i think it is not a good way, because it does not work!
in documentation (# React ...
0
votes
1answer
27 views
Geocode Earth Autocomplete Box Without Map
I am trying to integrate geocode.earth autcomplete search API without a map similar to the example on their site.
I am a python and scala developer but I am new to front end and I was trying to ...
1
vote
1answer
34 views
Add a point to list of points and rerender on map
So basically what I'm trying to do is let the user double click on the map and create a new point with some info. When they click submit the point should then be added to the state (or later on a ...
2
votes
1answer
33 views
Is Firestore a good database for storing many large objects in?
I have been using React/Leaflet to create a choropleth map that can color any country on the map. What I am trying to do is to develop a save/load function that saves the colored countries and later ...
0
votes
1answer
42 views
How to display a list of points using dbclick in react-leaflet v.3.x?
I'm very new to react and what I want to do is basically just display a set of points on the map. I have a custom component called CovidPoints which basically just renders a Marker on the map. ...
2
votes
1answer
35 views
React Leaflet: Get objects from MongoDB to Leaflet map as markers (using node.js and express)
I am trying to fetch data from MongoDB (using node.js and express) and show them as markers on a Leaflet map, using react leaflet. However, I always get an error: Unhandled rejection (TypeError): this....
0
votes
1answer
42 views
How to fly to a location in react-leaflet
So I'm really new to react and leaflet but all I want to do is basically have the user enter some input, and after they press enter, trigger an event which then flies to the coordinates generated from ...
1
vote
1answer
43 views
React Leaflet LayersControl.Overlay with multiple markers
I have a map that displays a marker for every diferent public facilities in a city and I want to have a group of checkboxes to filter this facilities according to its typology, one checkbox for ...
0
votes
1answer
47 views
How to add pop up to WMS Layer in react- leaflet
I use react-leaflet to display WMS Layer
<WMSTileLayer url="http://localhost:8080/geoserver/cite/wms?service=WMS" {...mapprops2} ></WMSTileLayer>
I use geoserver url to get the ...
1
vote
1answer
56 views
Show All Cluster Markers in react-leaflet-markerclusterer using React Typescript
My React Typescript app is displaying a Leaflet map with marker clusters using react-leaflet & react-leaflet-markerclusterer.
However, I am unable to get the map to show all cluster markers ...
0
votes
0answers
27 views
“You may need an appropriate loader to handle this file type” after installing react-leaflet
I am very new in React and trying to add a simple map in web application. But right after installing react-leaflet (npm install react react-dom leaflet, npm install react-leaflet), I try to import ...
0
votes
1answer
32 views
Uncaught TypeError: Cannot read property 'appendChild' of undefined
I have a following return from my component
<div className="content page-with-map" >
<div className='route-editor'>
<Loader loading={...
1
vote
1answer
55 views
React Leaflet display legend using MapContainer
I'm using React leaflet 3.1.0 and I want to display a legend in the map.
I built a component for the legend and pass map instance that I get from MapContainer whenCreated({setMap}).
Map Component:
...
0
votes
0answers
33 views
React Leaflet - rotate the map layer and all drawn shapes
The problem: the API of the leaflet doesn't have a feature for rotating the map.
Need goal: correct rotate the map with all drawn shapes by n degrees
Tried: CSS transformation(in this case drawn ...
0
votes
1answer
42 views
how to display json in d3 over leaflet.js in React
I'm struggling to display some json data onto my Leaflet map in react. I'm using leaflet-react to run the map generation. I can't find a decent tutorial to help me through this. My current set up is ...
1
vote
1answer
57 views
Leaflet marker rendering but showing the “broken image” placeholder
Here is what it looks like:
My code:
Map.js
//the next 3 lines changes nothing kept it in bc I found this online as a potential solution
//and didn't want to get this suggested
import L from 'leaflet'...
1
vote
1answer
41 views
react-leaflet and leaflet-editable: create additional marker during event?
I'm trying to implement functionality which will allow me to, when placing a marker with leaflet-editable, hold control while clicking to place a marker before immediately initializing another marker ...
0
votes
1answer
73 views
TypeScript Problem with Adding New Property to react-leaflet Marker Component
I am trying to pass an additional property count into the Marker component provided by react-leaflet.
However, we are getting an error
Type '{ children: Element; position: [number, number]; key: ...
0
votes
2answers
55 views
Not able to move my marker using the library leaflet
I am working on react.js using the leaflet library and I would like when I click on the map moving the marker and not add a new marker. Here is my code :
import React from "react";
import {
...
0
votes
1answer
37 views
React-Leaflet / OpenStreetMap: Detect if the marker is inside a circle
I have a marker and several zones (Circle). Now I want to detect if the marker is inside a zone. Any idea how I can do this?
data.json
{
"name": "John Doe",
"longitude&...
0
votes
1answer
76 views
How to display geodjango rest api response on react leaflet Map
I have the following response from django rest:
[
{
"area": 0.0,
"perimeter": 0.0,
"town_name": "Cheptais",
"town_id": 4,
"...
0
votes
1answer
51 views
How to resolve the react-leaflet export error?
I wanted to render map in react js for my project. SO for it i installed react-leaflet using code npm i react-leaflet and also did npm i leaflet in terminal and entered some code for react leaflet. ...
0
votes
1answer
60 views
Change Tile Size of Mapbox Tiles using React Leaflet
Is it possible to change the tile size of Mapbox tiles when using react-leaflet?
The rendered tiles has text that look too tiny, which makes me think that these are 512px tiles being treated by ...
0
votes
2answers
47 views
How can I do to pass variable throught the modals?
I am working using React.js with leaflet and I have no ideas how can I do to pass variable to get when I click on my modal Eat and Drink. I mean this is what I have
And when I click on open modal I ...
0
votes
1answer
43 views
How to add onEachFeature bind using react-leaflet
I have a django rest api that gives the following get response:
Using django view, I can render the geojson as follows:
var kcount = L.geoJson();
$.getJSON("{% url 'counties' %}", function (...
0
votes
1answer
50 views
Cannot read property 'lat' of undefined and undefined
I'm now trying to feed the position of the user through the variable (coords) but every time I pass any variable into onClickUserLoc() the variable has the error
Cannot read property 'lat' of ...
0
votes
0answers
33 views
Problem with selecting an area using leaflet
so the problem is that when i'm trying to select an area using leaflet and click somewhere outside of selection tab it removes focus from the selection and after trying to select it doesn't work as ...
1
vote
0answers
27 views
Leaflet WMS - how do I get the HTTP status code from an error?
I am working on a React app using Leaflet 1.6.0 with Leaflet.nontiledlayer to display images from a WMS service. This WMS service requires authentication, and after some period of time, my session ...
-1
votes
1answer
46 views
How can I add a scale on react leaflet?
I am using react with the library leaflet but I would like to add on my map a scale in kilometers.
How can I do to do that ?
Here is my code :
import React, { Component } from 'react';
import ReactDOM ...
0
votes
1answer
50 views
Search Box implementation in React-leaflet v3.1.0
I am trying to implement a searchbox feature in my react app. But getting this error "Attempted import error: 'MapControl' is not exported from 'react-leaflet'" in the new version of react-...
-1
votes
0answers
32 views
How to solve React Leaflet does'nt work on Gatsby?
I've followed this plugin guide
Gatsby React Leaflet Plugin
I have a contact page which I import MyLeafletMap component :
import MyLeafletMap from './ui/my-leaflet-map';
const Contact = () => {
...
1
vote
1answer
58 views
Flyto error: Hooks can only be called inside of the body of a function component
Trying to add a button that when pressed it moves the map to new York city. But whenever I try and use the button I get the error:
Error: Invalid hook call. Hooks can only be called inside of the ...
0
votes
0answers
41 views
popup is null using react leaflet
I am using react-leaflet and I have this code :
import React, { useState } from "react";
import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import { defaultMarker } ...
-1
votes
1answer
58 views
How can I open a modal using react-leaflet?
I am trying to use the library react-leaflet and I want to open a modal when we click on a button on the popup but I do not achieve to do that.
Here is my code :
import React from "react";
...
1
vote
1answer
59 views
React leaflet map get corners lat and long
Im working with react-leaflet and Im trying to do the following thing:
In my map I need to show pointers (lat,long) that are in the database, to do this I have to call the backend and get the pointers,...
0
votes
0answers
52 views
Preventing React-Leaflet from unnecessary re-render of Map component
Because my app handles the mobile and desktop views in two different components, I've needed to use useContext API to distribute state/propa across them.
I have a Map component and upon moving from ...
-2
votes
0answers
14 views
How to have custom save and cancel buttons (I'm trying to have an in icon instead of text) for react-leaflet-draw toolbar?
I want to replace the confirmation buttons with texts (Save, Cancel, Clear All) of react-leaflet-draw toolbars with custom icons. Any help is much appreciated.
0
votes
0answers
51 views
Custom zoom control in React Leaflet
I'm trying to code my own zoom control buttons on my react-leaflet map. I couldn't find any tutorial online so I am trying to figure it out myself but am getting the following error:
Error: Invalid ...
0
votes
2answers
68 views
How to set the map to a geolocation on map load with React-leaflet v3
Hello I would like to load the map with the geolocation coordinates.
Right now I have my map loaded on a defined center and when the event onClick happens, the view is set to the geolocate location.
I ...
0
votes
0answers
55 views
How to rewrite from react-leaflet v2 to v3?
There is a library that runs on react-leaflet v2. https://github.com/somarmeteorologia/react-leaflet-markers
But my project uses react-leaflet v3. Therefore, this library needs to be rewritten for the ...
2
votes
1answer
42 views
Change tile at TileLayer at state change
My question is how to change url of tile map in that case:
function ChangeView({ center, zoom }) {
const map = useMap();
map.setView(center, zoom);
return null;
}
function TrackerMap({ ...
1
vote
1answer
91 views
react leaflet basic tutorial map do not display map correctly
I follow react leaflet installation and got the setup page . They provide me a code snippet to use to see a basic example. However here is what I got. Not sure which steps did I mess up.
import { ...
2
votes
1answer
57 views
map.setView is not a function
I am making a leaflet map with geolocation that worked on react-leaflet v3. But I'm now using react-leaflet v2 for an API. Now when I use my code for setView on the leaflet I get the error
map....