Skip to content
Advertisement

I am trying to draw circles and add popup on a map, but i keep getting errors. Cannot read properties of undefined (reading ‘lng’)

  1. This piece of code is from my App.js

  2. I am using this as the default location of the map once the app opens

    const [mapCenter, setMapCenter] = useState({lat: 34.80746, lng: -40.4796});

  3. I use this to update the location of the map, as selected from the dropdown menu, I am getting the lat and lng from data pulled from an endpoint

    setMapCenter([data.countryInfo.lat, data.countryInfo.lng]);

  4. I am passing the following props to the Map

    JavaScript
  5. This is from my utils.js file, colors of the said circles according to their case types

    JavaScript
  6. This is from my utilis.js. I am trying to draw the circle and popup on the map. Console error (Uncaught TypeError: Cannot read properties of undefined (reading ‘lng’)

    JavaScript
  7. This is from my Map.js. Console error (Uncaught TypeError: Cannot read properties of undefined (reading ‘lng’)

    JavaScript

Advertisement

Answer

The problem is in your showDataOnMap function where you render the Circle:

JavaScript

All of the properties of the Circle (center, fillOpacity, color etc) are defined after you’ve already closed the Circle element with a >. This should be changed to:

JavaScript

There’s a working demo here that renders the circles.

User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement