react-leaflet get current latlng onClick

Here is an example on how to display maker position in popup once map is clicked:

class MapExample extends Component {  constructor(props) {    super(props);    this.state = {      currentPos: null    };    this.handleClick = this.handleClick.bind(this);  }  handleClick(e){    this.setState({ currentPos: e.latlng });  }  render() {    return (      <div>        <Map center={this.props.center} zoom={this.props.zoom} onClick={this.handleClick}>          <TileLayer              url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'          />          { this.state.currentPos && <Marker position={this.state.currentPos} draggable={true}>            <Popup position={this.state.currentPos}>              Current location: <pre>{JSON.stringify(this.state.currentPos, null, 2)}</pre>            </Popup>          </Marker>}        </Map>      </div>    )  }}

Explanation:

• currentPos state is used to keep marker position
• event.latLng property of Map.onClick event handler returns mouse event location

Here is a demo for your reference

What did you try to achieve that?

This will be the start:

Use the click (see https://leafletjs.com/reference-1.4.0.html#map-click) event from the LeafletMap component and call your function, like:

<LeafletMap  center={[35.755229,51.304470]}  zoom={16}  maxZoom={20}  attributionControl={true}  zoomControl={true}  doubleClickZoom={true}  scrollWheelZoom={true}  dragging={true}  animate={true}  easeLinearity={0.35}  onclick={this.handleClick}>>...</LeafletMap>

In your handleClick function you get the information of lat and lng like this:

handleClick = (e) => {  const { lat, lng } = e.latlng;  console.log(lat, lng);}

From here on, you can create your marker / popup with the information you were looking for.

Additional hint: Please make sure your code is wrapped in correctly in your post..