Questions tagged [react-leaflet]

I am facing an issue following my update of Next.js from version 12 to 13, which also involved updating React from 17 to 18 and react-leaflet from 3 to 4. Within this component: ` function ChangeView({ center }) { const map = useMap(); map.setView( ...

Is there a way to remove the curly braces and symbols near the zoom pane when the map is too far? https://i.stack.imgur.com/eGQCd.png p.s. Here is some provided code for reference: p.s. 2 - I have noticed that adding a condition like {condition1 &a ...

I'm currently in the process of implementing the draw functions on a leaflet map. I started off by creating a new app with just react-leaflet installed. I used npx create-react-app and installed the following packages: npm install react react-dom lea ...

Upon clicking on the map, I successfully retrieve the latitude and longitude coordinates which I then log in the console. However, when attempting to assign them to a state variable, I encounter the following error: https://i.stack.imgur.com/dwDaw.png I a ...

In the parent: const [currentPinPosition, setCurrentPinPosition] = React.useState({ lat: 0 , lng: 0 }); const updateCurrentPinPos = (position) => { console.log(position); setCurrentPinPosition({ lat: position.lat, lng: position.lng }); }; / ...

I am facing difficulty in implementing react leaflet Marker in my next.js project. Below is the code snippet where I have included my map component: const MapSearch = dynamic(import('../../components/Map'), { ssr: false, loading: () => ( <di ...

Currently, I am working on a project that involves React Leaflet. The goal is to have a search bar using leaflet-geosearch, where users can enter the name of a city. Upon clicking on the searched city, a form should appear asking for reviews about that pla ...

I have a substantial amount of data points (around 150k) stored in my database, and I am looking to retrieve them using an axios request and display them on a map within my application built on the PERN stack. What would be the most effective approach fo ...

I've been working on setting up a Leaflet map in the new NextJS 13 environment, hoping that with the explicitly declared client-side functions it would make things easier. However, I'm having trouble getting it to work. Here is what my map component looks ...

Currently, I have integrated react-leaflet into my ReactJS application to dynamically create markers with popups. However, when implementing the code as shown below, the popup box fails to display and an error message appears in the web developer console. ...

I am currently working with React Leaflet and I am facing the challenge of passing some values to draw a Polyline. Here is an example of the value that needs to be passed: const polyline = [ [51.505, -0.09], [51.51, -0.1], [51.51, -100.12], ] This i ...

Here is the React version I am using: 16.0.0 And for react-leaflet: 1.6.6 I recently attempted to implement a layer controller on my map which consists of two layers, each containing multiple markers. Below is an example of what I have been working on. i ...

Here is the code I am working with: import { MapContainer, TileLayer } from "react-leaflet"; import React, { useState } from 'react'; export default function App() { const [positionLat, setPositionLat] = useState(null); ...

I'm currently working on integrating a LeafLet map component into my Next JS 13.0.1 project, but I'm facing an issue with the rendering of the map component. Upon the initial loading of the map component, I encountered this error: ReferenceError ...

I'm currently working on developing a custom component using react-leaflet v2, where I aim to extend a leaflet plugin known as EdgeMarker. Unfortunately, the documentation provided lacks sufficient details on how to accomplish this task. In response, ...

I iterate over a list of locations I need to retrieve the key of the component through onClick event Here is my console.log method: const addTo = (element) => {console.log(element);}; return ( <> {data.map((item) =&g ...

Currently, I am facing an issue with a map layer that contains a custom image. The problem lies in the fact that this image is being rendered six times even though the Tilelayer component is only rendered once. <MapContainer className ...

Currently working on a project where I am utilizing both React-Leaflet and Material-UI by callemall. The challenge I am facing involves trying to incorporate the Material-UI Card component within the <Popup></Popup> component of React-Leaflet. ...

As I attempt to showcase a dynamic map filled with numerous moving markers featuring various icons, I find that my pure React/React-Leaflet solution struggles when handling about 1,000 markers in motion every second. The leaflet-pixi-overlay plugin seems ...

Utilizing the react-leftlet component to showcase maps, markers, layers, and controls. I recently created a layer using the heatmap-leaflet library. However, I'm encountering difficulties in integrating it with the existing map as most examples are ba ...

I am encountering an issue in my Next.js app while trying to display multiple locations on a leaflet map using a GeoJSON data file. Everything works fine when I have just one location displayed on the map, but as soon as I import additional data and attemp ...

I'm currently exploring options for clustering polygons with react-leaflet v4 and react-leaflet-markercluster. Despite my efforts, I have been unable to locate recent examples showcasing how this can be accomplished. Therefore, I am seeking assistance here ...

Currently, I am attempting to utilize the Shpjs package in order to import a Shape file onto a Leaflet map. According to the Shpjs documentation: shpjs Below is the code snippet I am working with: const [geoData, setGeoData] = useState(null); //stat ...