I'm using react-leaflet in my ReactJS application and I tried to create markers dynamically and added popup as below code. But popup box is not showing and there is an error appear in web developer console
TypeError: point is null
I am using react-leaflet version 2.5.0. Please kindly advise!
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';
//import { Popover, PopoverBody, PopoverHeader } from 'reactstrap';
class Map extends Component {
constructor(props) {
super(props);
this.state = {
data : [],
zoom: 2,
//modal: false,
};
this.getLocationList = this.getLocationList.bind(this);
//this.setModal = this.setModal.bind(this);
}
// setModal(val){
// this.setState({modal: val});
// }
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 pretty CSS3 popup.<br />Easily customizable.</Popup>
</Marker>
)
}
</Mapview>
</div>
);
}
}
export default Map;
I see no point
variable or property in your code, therefore I am not really sure why you get this error.
So I do not see the error's possible cause if we take into account the code you have posted.
Let's assume you fetch successfully the data and you set the state variable data an array of objects. Then your code should look like this in the demo page , of course by including the fetching code using componentDidMount as in your example (here using static data just to illustrate an example)
If the data you are fetching is an object and not an array then your iteration here this.state.data.map
is not valid.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.