Tiles are rendering very slow using react-leaflet

Question

I am trying to make a simple react app which will check user's location and update in on the screen using brower's GPS. It is working but not every map tiles are being rendered and rendering is also super slow.

App.jsx below

import React, { useEffect, useState, lazy, Suspense } from "react";
const LazyMap = lazy(() => import("./MyMap"));

const App = () => {
  // Use the useState hook to track the user's current location
  const [location, setLocation] = useState(null);
 
  // Use the useEffect hook to get the user's location when the component is mounted
  useEffect(() => {
    async function watchPosition() {
      navigator.geolocation.watchPosition(function (position) {
        setLocation(position.coords);
      });
    }
    watchPosition();
  }, []);

  return (
    <div >
      {location ? (
        <Suspense fallback="Loading map...">
          <LazyMap latlng={location} zoom={13} />
        </Suspense>
      ) : (
        "Loading location..."
      )}
    </div>
  );
};

export default App;

MyMap.jsx below

import React, { useRef, useEffect, useState, useMemo, useCallback } from "react";
import { MapContainer, TileLayer, Marker } from "react-leaflet";

const MyMap = ({ latlng, zoom }) => {
  // Use the useRef hook to store the MapContainer instance
  const mapRef = useRef(null);

  // Use the useState hook to track the map's center coordinates
  const [mapLatLng, setMapLatLng] = useState({ lat: 0, lng: 0 });

  // Use the useEffect hook to update the mapLatLng value when the latlng prop changes
  useEffect(() => {
    if (latlng && latlng.lat && latlng.lng) {
      setMapLatLng(latlng);
    }
  }, [latlng]);

  // Use the useMemo hook to memoize the calculated center coordinates
  const center = useMemo(() => [mapLatLng.lat, mapLatLng.lng], [mapLatLng]);

  // Use the useCallback hook to avoid creating a new function on every render
  const handleMapMove = useCallback(() => {
    // Get the MapContainer instance from the mapRef object
    const map = mapRef.current;
    if (map) {
      // Calculate new center value based on map movement
      const newCenter = map.leafletElement.getCenter();
      setMapLatLng({ lat: newCenter.lat, lng: newCenter.lng });
    }
  }, []);

  return (
    <MapContainer ref={mapRef} center={center} zoom={zoom} onMoveEnd={handleMapMove}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <Marker position={center} shouldUpdate={false} />
    </MapContainer>
  );
};

export default MyMap;

I have tried using Lazy, The LazyMap component is loaded using the lazy function from React and the Suspense component is used to display a loading message while the LazyMap component is being loaded. The latlng and zoom props are passed to the LazyMap component to control the map's initial center and zoom level.

Live URL: https://location-checker.pages.dev/

Answer 1

I cant see that you import the css needed. I would start the troubleshooting there:

import "leaflet/dist/leaflet.css";