I can't get the markers to show up on the map(React-leaflet.js)

1
votes

I got the "lat" and "lng" of all the Bike Points from the TFL's API. I am trying to show all the Bike Points as markers on the React-leaflet map.

I have successfully got the data and have filtered it to the right format [51.505, -0.09] and mapping each one on to the Marker 

component <Marker  position={data.position} /> .

The problem is the markers not showing up on the map.

I have hard coded some data and it works so I don't understand what I am doing wrong with the live data. I will be very grateful if someone could help me? I have been stuck on this for all night.

Here is my problem in Jsfiddle:

Problem on jsfiddle!

1
leafletmappingreact-leaflet

1 Answers

1
votes

There is a typo here, you need to return element (refer Lists and Keys docs for a more details):

{this.state.bikeMarkers.map(data => {
    return <Marker position={data.position}></Marker>
    ^^^^^^
    missing
})}

filterData function looks redundant in the provided example, data could be retrieved and filtered in the first place like this:

axios.get(`https://api.tfl.gov.uk/bikepoint`).then(res => {
  let markers = res.data.map(location => {
    return { key: location.id, position: [location.lat, location.lon] };
  });

  this.setState({
    bikeMarkers: markers
  });
});

Updated jsFiddle