Search code examples
javascriptreactjsreact-leaflet

My markers are not displayed React leaflet


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

Response

My map

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;

Solution

  • 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 ?