Currently, I have integrated react-leaflet into my ReactJS application to dynamically create markers with popups. However, when implementing the code as shown below, the popup box fails to display and an error message appears in the web developer console.
Unexpected Error: point is not defined
My React-Leaflet version is 2.5.0. Any guidance on resolving this issue would be greatly appreciated!
import React, { Component, useState } from 'react';
import { Map as Mapview, TileLayer, Marker, Popup, GeoJSON } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import {API_URL} from "../../config/config";
import axios from "axios";
import { iconBlue, iconWell } from './icons';
class Map extends Component {
constructor(props) {
super(props);
this.state = {
data : [],
zoom: 2,
};
this.getLocationList = this.getLocationList.bind(this);
}
componentDidMount(){
this.getLocationList();
}
getLocationList(){
axios.get(API_URL + "location")
.then((response) => {
if(response.data.status === "success")
{
this.setState({data: response.data.location});
console.log(this.state.data);
}
})
}
render() {
return (
<div>
<Mapview
style={{ height: "480px", width: "100%" }}
zoom={6}
center={[19.745589, 96.15972]}>
<TileLayer
attribution="&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{
this.state.data.map((location) =>
<Marker position={[location.location_lat, location.location_long]} icon={iconWell}>
<Popup>A customizable CSS3 popup.<br />Ready for modification.</Popup>
</Marker>
)
}
</Mapview>
</div>
);
}
}
export default Map;