This piece of code is from my App.js 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}); 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

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

This piece of code is from my App.js
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});
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]);

I am passing the following props to the Map

 ```<Map center={mapCenter}
   zoom={mapZoom}
   countries={mapCountries}
   casesType={casesType}
   />```

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

 ```import { Circle, Popup } from "react-leaflet";

   const casesTypeColors = {
   cases: {
     hex: "#CC1034",
     rgb: "rgb(204, 16, 52)",
    half_op: "rgba(204, 16, 52, 0.5)",
    multiplier: 800,
     },

   recovered: {
    hex: "#7dd71d",
    rgb: "rgb(125, 215, 29)",
    half_op: "rgba(125, 215, 29, 0.5)",
     multiplier: 1200,
   },
     deaths: {
    hex: "#fb4443",
    rgb: "rgb(251, 68, 67)",
     half_op: "rgba(251, 68, 67, 0.5)",
    multiplier: 2000,
    },
    };```

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’)

  ```export const showDataOnMap = (data, casesType = "cases") => (
    data.map((country) => ( 
    <Circle >
    center = {[country.countryInfo.lat, country.countryInfo.long]} 

      fillOpacity = {0.4},
     color={casesTypeColors[casesType].hex},
     fillColor={casesTypeColors[casesType].hex}, 

    radius={
     Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
   } 
    <Popup>
     <h6>Is the POPUP working</h6>
  </Popup>
  </Circle>
    ))
    );```

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

      ```import { showDataOnMap } from './utils';

        function Map({center, zoom, countries, casesType}) {
             return (
           <div className='map'>
   <LeafletMap center={center} zoom={zoom} scrollWheelZoom={false} >
      <TileLayer
      attribution='&copy; <a 
      href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
         {showDataOnMap(countries, casesType)} 
   </LeafletMap>
              </div>
         )
          }

          export default Map```

Answer

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

<Circle >
    center = {[country.countryInfo.lat, country.countryInfo.long]} 
    fillOpacity = {0.4},
    color={casesTypeColors[casesType].hex},
    fillColor={casesTypeColors[casesType].hex}, 
    radius={
     Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
    } 
  <Popup>
    <h6>Is the POPUP working</h6>
  </Popup>
</Circle>

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:

<Circle
      center={[country.countryInfo.lat, country.countryInfo.long]}
      fillOpacity={0.4}
      color={casesTypeColors[casesType].hex}
      fillColor={casesTypeColors[casesType].hex}
      radius={
        Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
      }
    >

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

Advertisement

Answer