react-leaflet

问题 I've been researching and I know leafletjs has the plugin https://github.com/yafred/leaflet-responsive-popup but I need a workaround for the library I'm using react-leaflet. The react-leaflet has a lot of third-party plugins but I don't see anything that works for me. If someone knows how or has done something like this it would be cool if you could share it. I'm having a hard time with this. Thanks. 回答1: Install the library, import js, css get a map reference and then render the marker:

问题 I have a fairly simple application that renders around 3000 points using leaflet.js. It renders fairly quickly but pan and zoom are terribly slow. Looking at the performance tools in chrome, it looks like most of the time is spend in recalculate styles, but that hasn't been helpful. <LeafletMap center={[50, 10]} zoom={6} maxZoom={10} preferCanvas={true} > <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' /> {this.state.locations.map( (location, index) => { return ( <Marker position={

问题 I would like to create a custom component with react-leaflet that shows the actual position (x,y) of the mouse, but I don't know how to create it. I found react-leaflet-control but it seems that it is not up to date, of course I readded the api documentation https://react-leaflet.js.org/docs/en/custom-components.html but I did not understand it :/ Can someone give me an exemple of a custom component please, juste a component that display "Hello world" whould be more than enought. 回答1: As per

问题 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 similar popup when a user clicks on the district of my map as well. How can i do that? The following is my code to render the markers with popup. (The map is rendered using geojson data) markerHospitalRender() { return this.props.hospitalData.map(item => { const position = [item.district_lat,

问题 I'm using the following code to create a rectangle in the leaflet map. const rectangles = [[51.49, -0.08], [51.5, -0.06]] <Rectangle key={key} bounds={rectangle} color="green"> </Rectangle> I want to add a text inside the rectangle like a label for the rectangle is there a way to do this? I'm using react-leaflet library for this. 回答1: To write on the map, we can use a DivIcon from the Leaflet library added to a React-Leaflet Marker component. Create a DivIcon with HTML A DivIcon is an icon

问题 I am building a react-leaflet application, and I am trying to separate the zoom control from the map itself. The same question in a vanilla Leaflet context was asked here: Placing controls outside map container with Leaflet?. This is what I'm trying to accomplish within the react-leaflet framework. Here is the general outline of my project: import UIWindow from './UIWindow' import Map from './MapRL' class App extends React.Component { render () { return ( <div className="App"> <Map />

问题 I am building a react-leaflet application, and I am trying to separate the zoom control from the map itself. The same question in a vanilla Leaflet context was asked here: Placing controls outside map container with Leaflet?. This is what I'm trying to accomplish within the react-leaflet framework. Here is the general outline of my project: import UIWindow from './UIWindow' import Map from './MapRL' class App extends React.Component { render () { return ( <div className="App"> <Map />

问题 I'm writing a custom component for react-leaflet. It is an editable popup, with a few other features. Here is a codesandbox for an example.. The source code for the component is here. This example just does an import EditablePopup from 'my-react-leaflet-popup-plugin' , which is a .js file in my project. Works well. I am trying to bundle this using webpack to package it as a node module so that others can use it. It compiles without issue. You can see my webpack.config.js here. I am then using

问题 I am using leaflet with react-leaflet. OverpassLayer is working when geolocation is enabled. When Geolocation is blocked because I'm on localhost, the app isn't even entering the OverpassLayer component. App.js import OverpassLayer from './OverpassLayer' class App extends React.Component { state = { zoom: 16, position: { lat: 51.505, lng: -0.09, }, mapKey: Math.random(), overpassLayerKey: Math.random() } componentDidMount () { //center map on user's current position this.handleGeolocation()

问题 I've got very simple code to display a map using react-leaflet and place a marker on it. However, i get the following two errors in my browser console GET http://localhost:8080/marker-icon-2x.png 404 (Not Found) GET http://localhost:8080/marker-shadow.png 404 (Not Found) I tried to fix this issue by downloading those two images and placing them at the root. It works. However, how can i change the URL the react-leaflet marker element looks for the marker images? I'd like to store them in ".