I have a simple React app that shows bike stations on a map with Leaflet and OpenStreetMap.

I have fetched all lat and long but when I map though the array and create <Marker key={bike.id} position={[lat, long]}><Marker/> component, they are not appearing on map.

Instead I have this warning on browser console:

Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (432150 px). Occurrences of will-change over the budget will be ignored.

I see some similar questions and answers to this. It is because occurences of will-change in CSS, but I am using Leaflet library itself, so I do not know where to fix this. I also watch some similar videos on YouTube, even if we have almost same logic they did not have any problem.

MapComponent.jsx

import React, { useState } from 'react';
import '../styles/MapComponent.css';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import { useEffect } from 'react';
import { fetchUserData, fetchNetworks } from '../redux/action/';
import { useDispatch, useSelector } from 'react-redux'
 
const MapComponent = () => {

    const dispatch = useDispatch()

    const [latitude, setLatitude] = useState(0)
    const [longitude, setLongitude] = useState(0)
    const [checkCords, setCheckCords] = useState(false)

    const countryCode = useSelector((state) => state.userData.country_code)
    const bikeNetworks = useSelector((state) => state.bikeNetworks.networks)

    const bikes = bikeNetworks.filter((network) => network.location.country == countryCode)

    useEffect(() => {
      if(navigator.geolocation) {
          navigator.geolocation.watchPosition((position) => {
              setLatitude(position.coords.latitude)
              setLongitude(position.coords.longitude)
              setCheckCords(true)
          })
      }
    }, [])

    useEffect(() => {
      dispatch(fetchUserData())
      dispatch(fetchNetworks())
    }, [])

  return (
      !checkCords ? <h1>Loading...</h1> :
    <MapContainer center={[latitude, longitude]} zoom={11}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[latitude, longitude]}>
        <Popup>
          A pretty CSS3 popup.<br /> Easily customizable.
        </Popup>
      </Marker>
      {
        bikes.map((bike) => {
          <Marker 
          key={bike.id}
          position={[bike.location.latitude, bike.location.longitude]}>
            <Popup>
              A pretty CSS3 popup.<br /> Easily customizable.
            </Popup>
          </Marker>
        })
      }
    </MapContainer>
  
  )
}

export default MapComponent

CodePudding user response：

You probably just miss a return statement in your map callback, or to convert it into a short single expression arrow function form without the curly braces:

        bikes.map((bike) => {
          // Do not forget to `return` something
          return (<Marker 
          key={bike.id}
          position={[bike.location.latitude, bike.location.longitude]}>
            <Popup>
              A pretty CSS3 popup.<br /> Easily customizable.
            </Popup>
          </Marker>);
        })

        // Or a short arrow function that automatically returns the result of a single expression: 
        bikes.map((bike) => ( // No curly braces after the arrow
          <Marker 
          key={bike.id}
          position={[bike.location.latitude, bike.location.longitude]}>
            <Popup>
              A pretty CSS3 popup.<br /> Easily customizable.
            </Popup>
          </Marker>
        ))

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions for more details about the syntax of arrow functions in JavaScript.

As for your browser warning, it is very probably not related to your current issue.