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
JavaScriptx61```<Map center={mapCenter}
2zoom={mapZoom}
3countries={mapCountries}
4casesType={casesType}
5/>```
6
This is from my utils.js file, colors of the said circles according to their case types
JavaScript124241```import { Circle, Popup } from "react-leaflet";
2
3const casesTypeColors = {
4cases: {
5hex: "#CC1034",
6rgb: "rgb(204, 16, 52)",
7half_op: "rgba(204, 16, 52, 0.5)",
8multiplier: 800,
9},
10
11recovered: {
12hex: "#7dd71d",
13rgb: "rgb(125, 215, 29)",
14half_op: "rgba(125, 215, 29, 0.5)",
15multiplier: 1200,
16},
17deaths: {
18hex: "#fb4443",
19rgb: "rgb(251, 68, 67)",
20half_op: "rgba(251, 68, 67, 0.5)",
21multiplier: 2000,
22},
23};```
24
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’)
JavaScript119191```export const showDataOnMap = (data, casesType = "cases") => (
2data.map((country) => (
3<Circle >
4center = {[country.countryInfo.lat, country.countryInfo.long]}
5
6fillOpacity = {0.4},
7color={casesTypeColors[casesType].hex},
8fillColor={casesTypeColors[casesType].hex},
9
10radius={
11Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
12}
13<Popup>
14<h6>Is the POPUP working</h6>
15</Popup>
16</Circle>
17))
18);```
19
This is from my Map.js. Console error (Uncaught TypeError: Cannot read properties of undefined (reading ‘lng’)
JavaScript119191```import { showDataOnMap } from './utils';
2
3function Map({center, zoom, countries, casesType}) {
4return (
5<div className='map'>
6<LeafletMap center={center} zoom={zoom} scrollWheelZoom={false} >
7<TileLayer
8attribution='© <a
9href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
10url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
11/>
12{showDataOnMap(countries, casesType)}
13</LeafletMap>
14</div>
15)
16}
17
18export default Map```
19
Advertisement
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.