react-leaflet

问题 I am getting a ReferenceError: window is not defined when using next.js with leaflet.js . Wondering if there's a simple solution to this problem - is using next.js overcomplicating my workflow? for those curious with the exact code, import React, { createRef, Component } from "react"; import L from "leaflet"; import { Map, TileLayer, Marker, Popup, DivOverlay } from "react-leaflet"; import axios from "axios"; import Header from "./Header"; export default class PDXMap extends Component { state

问题 I am adding a group of markers to a map using react-leaflet. At present I can display the markers on the map with a custom icon. How do add a record of data to each marker. I assume I have to somehow create a custom marker class? Does anyone now how I could add a data record to each marker or at least an index. This is the code so far: import React, { Component } from 'react'; import { Map, TileLayer, Marker } from 'react-leaflet'; import {Navbar, Nav, NavDropdown} from 'react-bootstrap';

问题 I want to clear my leaflet map by clicking a button...how to do this... I want to clear all drawed shapes on the map, so the map to be clear This is my code of the leaflet map in the return statement: <Map key={this.state.keyMAP} style={{ height: "50vh" }} center={position} zoom={13} onClick={this.handleClick} onCreate={this.onCreate} onLocationfound={this.handleLocationFound} > {/* startDirectly */} <TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

问题 I am trying to generate a custom image for my CircleMarkers. I am not sure how to do it. I am using CircleMarkers here because I have almost 20K+ markers and need them for performance. I can't quite figure out how to pass a custom image to the CircleMarker. Any help on this is much appreciated. 回答1: There is no way to do this directly. APIs of leaflet.js or react-leaflet libraries do not respond to your request. You can do this by placing an extra marker child component in CircleMarker and

问题 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 undefined and when I console.log it states undefined? The coords variable holds an array of location data such as lng and lat but become undefined in onClickUserLoc(). Code: export default class App extends React.Component { constructor() { super(); this.state = { ready: false, where: { lat: '', lng: ''

问题 I have a React-Leaflet map which I am rendering a div inside. For some reason, interacting with the contents of the div causes the map beneath to respond (eg: double-clicking will zoom the map, dragging will pan the map) - even when I'm calling e.stopPropagation() in handlers attached to the div. As I understand it, calling stopPropagation() should prevent the DOM events from ever reaching the map itself. Why does it appear that stopPropagation() is being ignored? How can I render a div

问题 I have a React-Leaflet map which I am rendering a div inside. For some reason, interacting with the contents of the div causes the map beneath to respond (eg: double-clicking will zoom the map, dragging will pan the map) - even when I'm calling e.stopPropagation() in handlers attached to the div. As I understand it, calling stopPropagation() should prevent the DOM events from ever reaching the map itself. Why does it appear that stopPropagation() is being ignored? How can I render a div

问题 I Need help to create GeoJSON custom component from React-Leaflet Write with React and React-Leaflet (last version both) The code works when write in the Map component, but I want to import/export it to split code import React from 'react'; import { withLeaflet, GeoJSON } from 'react-leaflet' import L from 'leaflet' class CustomGesJSON extends GeoJSON { getStyle(feature) { // some code } pointToLayer(feature, latlng) { // some code } onEachFeature(feature, layer) { // some code }

问题 I am rewriting an existing web app to a React app. In the original, leaflet is used for maps, along with OverlappingMarkerSpiderfier to create a distinction between map markers. In the new app, I'm using react-leaflet. All the other plugins used are available to react, but I want to create a leaflet custom component for OverlappingMarkerSpiderfier. I am a bit out of my depth with creating this component. Ideally, I'd like to call the component like this in the React render loop. return ( <Map

问题 I tried everything I found on the web, Stackoverflow and Github, and I still can't make it. I want to make a custom marker with a custom icon, but with my code below I always got an error : 'TypeError: options.icon.createIcon is not a function' Here is my code (no error on the paths to folders, everything is in src/js or src/img) Icon.js import L from 'leaflet'; const iconPerson = L.Icon.extend({ options: { iconUrl: require('../img/marker-pin-person.svg'), iconRetinaUrl: require('../img