The goal is to displayed marker on map.
I don't understand why my markers are not displayed
I use react-leaflet
The response is okay but nothing is displayed
Import
import { MapContainer, TileLayer, Marker, ScaleControl } from 'react-leaflet';
import tileLayer from '../util/tileLayer';
import L from "leaflet";
import 'leaflet-fullscreen/dist/Leaflet.fullscreen.js';
import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
import { useEffect } from 'react';
import newMarker from "../data/asset/pin.png";
import axios from 'axios'
center of first view
const center = [46.227638, 2.213749];
Icon
const pointerIcon = new L.Icon({
iconUrl: newMarker,
iconSize: [50, 58], // size of the icon
iconAnchor: [20, 58], // changed marker icon position
});
Markers
const MyMarkers = ({ data }) => {
return data.map(({ lat, lng }, index) => (
<Marker
key={index}
position={{ lat, lng }}
icon={pointerIcon}
>
</Marker>
));
}
get data with useEffect, async await & axios
const MapWrapper = () => {
useEffect( async () => {
markers = (await componentDataMarkers()).data
console.log(markers);
}, [])
const componentDataMarkers = async () => await axios.get(`http://localhost:5000/plane/latlong`)
var markers = []
React Leaflet component
return (
<MapContainer
fullscreenControl={true}
center={center}
zoom={13}
scrollWheelZoom={true}
>
<TileLayer {...tileLayer} />
<MyMarkers data={markers} />
<ScaleControl imperial={false} />
</MapContainer>
)
}
export default MapWrapper;
return data.map(({ lat, lng }, index) => (
<Marker
key={index}
position={[ lat, lng ]} // array here
icon={pointerIcon}
>
</Marker>
));
Here, why do you extract lat and lng from an array with key 0 and 1 ? You can't use extract { lat, lng } from array, only from object with lat and lng keys.
Can you console.log the lat and lng and see if you have the data here or undefined ?