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

Question

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: 'TypeError: map.getCenter is not a function', the same goes for 'TypeError: map.getCenter is not a function'. Below is my code.

import React, {Component} from 'react';
import L from 'leaflet';
import './App.css';
import leafGreen from './assets/leaf-green.png';
import leafRed from './assets/leaf-red.png';
import leafShadow from './assets/leaf-shadow.png';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

class App extends Component {
  constructor() {
    super();
    this.state = {
      markers: [[51.505, -0.09]]
    };
  }

  greenIcon = L.icon({
    iconUrl: leafGreen,
    shadowUrl: leafShadow,
    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76]
  });

  render() {
    return (
      <MapContainer 
        className="map"
        zoom={13} 
        center = {[51.505, -0.09]}
        whenReady={(map) => {
          console.log(map.getCenter())
          // var bounds = map.getBounds()
          // console.log(bounds.getCenter())
          map.target.on("click", function (e) {
            const { lat, lng } = e.latlng;
            var marker = L.marker([lat, lng], {icon: L.icon({
              iconUrl: leafRed,
              shadowUrl: leafShadow,
              iconSize:     [38, 95], // size of the icon
              shadowSize:   [50, 64], // size of the shadow
              iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
              shadowAnchor: [4, 62],  // the same for the shadow
              popupAnchor:  [-3, -76]
            })} ).addTo(map.target);
            marker.bindPopup("New one")
          });
        }}
        >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        ></TileLayer>
        {this.state.markers.map((position, idx) => 
          <Marker key={`marker-${idx}`} icon={this.greenIcon} position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
        )}
      </MapContainer>
    );
  }
}

export default App;

Does anyone notice something I am doing incorrectly, I hope to hear from you.

Answer 1

When using the whenReady property, you need to use map.target as a prefix for getCenter(), which is different to the syntax of other props like whenCreated. I see you already kind of figured, but I would like to confirm in the code snippet below:

whenReady={(map) => {
          map.target.on("drag", function (e) {
            console.log(map.target.getCenter())
}

Answer 2

You better use whenCreated prop which returns the map instance directly and is officially documented. whenReady returns the map instance if you do map.target but officially is not documented although it works. Therefore if you access directly map methods without using map.target you will get an error because map instance is undefined at that point. You are already using it few lines later (map.target). Check here for more regarding the documentation.

 <MapContainer 
        className="map"
        zoom={13} 
        center = {[51.505, -0.09]}
        whenCreated={(map) => {
          console.log(map.getCenter())
        }
...
/>