Skip to main content

All Questions

0 votes
0 answers
28 views

Leaflet Map Tiles Disoriented When Deployed on EC2 Instance

I'm encountering an issue with Leaflet map tiles appearing disoriented when I deploy my application on an EC2 instance. The tiles load correctly when I run the app locally, but once it's deployed to ...
Anandu krishna v v's user avatar
0 votes
0 answers
114 views

Issue using MapContainer from react-leaflet: TypeError: Cannot read properties of null (reading 'useState')

I'm trying to use React Leaflet to add a map from OpenStreetMap on my website. Everything seems to go well syntax wise, however when I try to use I encounter this error: Uncaught TypeError: Cannot ...
yoenuts's user avatar
  • 31
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-...
Sebastian Tekieli's user avatar
0 votes
1 answer
467 views

Converting osm maps to mbtiles

I am working on an project which is completely offline (windows), the frontend is in react where i display a base map using react-leaflet library, and i serve the base map through a node backend from ...
Jestin Kuriakose's user avatar
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 ...
Sammith Gowda's user avatar
0 votes
0 answers
132 views

How to use dragging marker in leaflet-geosearch?

I am using react-leaflet and leaflet-geosearch. I want the marker here draggable and print the location when the marker is moved to another place. How to do this? const Search = ({ location,...
MD. MEHEDI IMAM's user avatar
0 votes
1 answer
224 views

Neatly put markers in a row when they have the same exact coordinates

I have a map component that loads data from a geoJSON file and displays each datapoint on an openstreetmap map. The library is use for that is the 'react-leaflet' library. And I also use the 'react-...
atthijs98's user avatar
1 vote
0 answers
328 views

How to create city boundaries using bbox data in React Leaflet?

I'm working on a React application that uses Leaflet and react-leaflet to display a map. I want to create boundaries around cities that are marked on the map with a marker. To get the necessary ...
wch's user avatar
  • 300
0 votes
1 answer
454 views

how to find my city location with location search in React Redux with Leaflet with OpenStreetMap

I was assigned by my lecturer to add city search to my application using React(Redux) using Leaflet (OpenStreetMap) can anyone help me to solve this problem? and what are the dependencies needed? Here ...
Ujang Aripin's user avatar
1 vote
1 answer
511 views

Tiles are rendering very slow using react-leaflet

I am trying to make a simple react app which will check user's location and update in on the screen using brower's GPS. It is working but not every map tiles are being rendered and rendering is also ...
Istiak Hassan Emon's user avatar
0 votes
0 answers
2k views

Issues with loading and viewing openstreetmap tiles : Failed to load resource: the server responded with a status of 403 () ElectronReactWebpack

As I described in this StackOverflow question : Leaflet : Suddenly I'm getting this error message: Failed to load resource: the server responded with a status of 403 () I'm experiencing issues ...
Raphael10's user avatar
  • 2,992
2 votes
0 answers
3k views

Leaflet : Suddenly I'm getting this error message: Failed to load resource: the server responded with a status of 403 ()

Suddenly I'm getting this error message, strange to me since I haven't been touching the map part : Failed to load resource: the server responded with a status of 403 () Searching for a clue I ...
Raphael10's user avatar
  • 2,992
0 votes
1 answer
448 views

Leaflet control disapperars while dragging map on mobile(React)

Currently doing a map with React-Leaflet. On desktop everthing works fine, but on mobile(iPhone X) the layercontrol and zoom control flicker/disappear while moving the map. function Osm() { ...
carlo711's user avatar
  • 695
0 votes
1 answer
1k views

Trouble figuring out how to use GeometryUtil with React-Leaflet

I'm building an application with JavaScript, React & Leaflet(+React-Leaflet plugin). I want to get coordinates of closest marker to my location, but I'm having trouble figuring out how to use ...
aksoco's user avatar
  • 191
0 votes
1 answer
1k views

Leaflet not scaling correctly to mobile devices

I have a problem with scaling leaflet map to fit mobile devices. I'm building an application using React, Leaflet(+React-Leaflet) & OpenStreetMaps. If I'm placing component like footer or zoom ...
aksoco's user avatar
  • 191
0 votes
1 answer
1k views

How to add multiple icon for same position in React-leaflet version 3

I'm developing an app using React-leaflet version 3 with TypeScript. In my app, I have the requirement to add multiple icons for one position. EX: A particular [lat,long] position identified as ...
sandy's user avatar
  • 303
0 votes
0 answers
1k views

Creating custom layer using React leaflet V3

I want to create a custom helper div layer on the map on a button click or mouse-over over the button. The button is also a custom control button on the map. Here is the example control button My ...
sandy's user avatar
  • 303
3 votes
1 answer
8k views

Custom button on the leaflet map with React-leaflet version3

I'm a new leaflet learner with React typescript. Want to create a custom button on the map. On clicking the button a popup will appear. I saw many example but they are all based on older version and I ...
sandy's user avatar
  • 303
2 votes
2 answers
749 views

React leaflet map location glitches when not in App.js

I am trying to use a Leaflet map in my React application but I am running into a strange problem. I tell my map to pan to the user's current geolocation (if they have allowed access to their location) ...
Pimv_h's user avatar
  • 420
2 votes
2 answers
1k views

map.getCenter and map.getBounds are not functions inside map.target.on('click') function

I am creating an app that makes use of the leaflet OpenStreetMap API but I am running into a problem. I am trying to get the center coordinates when I click my map, but i am getting the error: '...
yourivdloo's user avatar
3 votes
1 answer
4k views

Use a local tile layer with leaflet

I'm creating a project with React and Leaflet. This project will run offline on a computer connected to nothing, so I need to have the tile layer stored on the same computer (no tile server). Since I ...
Oz Heymann's user avatar
0 votes
1 answer
407 views

Mapping many data and drawing lines alone the roads on leaflet

I would like to do something like the traffic condition in Google Map in my web page, I use React and Leaflet (react-leaflet) in the front-end. I have millions points around the city, in the format ...
wing999's user avatar
  • 327
0 votes
1 answer
1k 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&...
Berliner95's user avatar
0 votes
1 answer
2k views

How to remove or empty the leaflet map based on the condition

I want to remove the map based on the selected condition. .component.ts dataChanged (selectsensor) { console.log(selectsensor) for( var j=0;j<selectsensor.length;j++){ for (var i =0; i< this....
user's user avatar
  • 27
1 vote
2 answers
991 views

How to create the multiple leaflet maps on the page in angular

I have created the leaflet open street map given below. .component.ts map = L.map('map').setView([12.876, 80.599], 12); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { ...
Haritha's user avatar
  • 87
4 votes
1 answer
3k views

React-Leaflet Map doesn't update

My issue is that react-leaflet <MapContainer> doesn't center on a position that I set dynamically. The basic logic is that I have a form where I enter Street and House Number, then I make call ...
ArmanK's user avatar
  • 155
1 vote
0 answers
528 views

Customize openstreetmap tilelayer render with leaflet

I'm currently struggling with an issue. I'm developing an app with reactJS and I wanted to display a map with a marker that the user could move and so on. Therefore, I used leaflet with the react-...
Eloi's user avatar
  • 108
0 votes
0 answers
52 views

What can I create a roadgrid from code, using the OpenStreetMaps.org data?

Currently I am trying to create a Map from the OSM data which is openly available to create road links, using Data that I retrieved from GeoJSON.io The map I got from coordinates at OSM and the Blue ...
malikite's user avatar
3 votes
0 answers
827 views

Leaflet map not properly displayed in ionic react app [duplicate]

I am working on a mobile application using react with Ionic 3, and I want to add a map in one of the tabs, in the browser version the map looks correctly, but when I put the mobile version or pass it ...
extraertond's user avatar
-2 votes
2 answers
2k views

How to call getFeatureInfo from react-leaflet? [closed]

I have example from github how to add wms layer: https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/wms-tile-layer.js but how to getFeatureInfo on click from wms layer?
Sergey Komarov's user avatar
1 vote
4 answers
4k views

How can I save a map in PostgreSQL?

I'm currently working on an application for making geologic maps. I'm using Ruby on Rails for my back end, React for my front end, and Postgres for the database. I am using React Leaflet to display ...
toodles's user avatar
  • 113
0 votes
1 answer
228 views

Is there any way to add MultiPolyline component using react-leaflet?

I am trying to implement an OpenSteetMap view using leaflet. I have created a POC for the same. var map = L.map('map').setView([9.89445, 76.71272], 12).addLayer(osm); var latlngs1 = [ [[9.84644243,...
Jeff Johny's user avatar
0 votes
1 answer
549 views

Rare effect when toggling BaseLayer in leaflet with react-leaflet

My application shows a map with react-leaflet and uses LayersControl to switch between an OSM TileLayer and HERE TileLayer. The code is as follows: <LayersControl position="topright"> &...
Andrés's user avatar
  • 775