map.setView is not a function

Question

I am making a leaflet map with geolocation that worked on react-leaflet v3. But I'm now using react-leaflet v2 for an API. Now when I use my code for setView on the leaflet I get the error

map.setView is not a function

I understand that this may not be recognized by react-leaflet v2 so what are the alternatives.

My dependencies:

"dependencies": {
    "expo": "~40.0.0",
    "expo-status-bar": "~1.0.3",
    "leaflet": "^1.7.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-leaflet": "^2.4.0",
    "react-leaflet-search": "^2.0.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-web": "~0.13.12"
  },

My code:

function ChangeMapView({ coords }) {
  const map = useLeaflet();
  map.setView(coords, 30);

  return null;
}

hi not sure, perhaps this might be of interest stackoverflow.com/questions/64856172/… — IronMan

kboul kboul · Accepted Answer · 2021-01-29T21:12:53

In react-leaflet version 2 you should destructure map to get its value like this:

  const { map } = useLeaflet();

so the code should be

function ChangeMapView({ coords }) {
  const { map } = useLeaflet();
  map.setView(coords, 30);

  return null;
}

map.setView is not a function

1 Answers