leaflet.2markers.App.js

import { useEffect, useRef } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import markerIconPng from 'leaflet/dist/images/marker-icon.png';
import markShadowPng from 'leaflet/dist/images/marker-shadow.png';
import collegePng from './icons8-university-64.png';

function App() {
  const savedMap = useRef();
  const mapId = 'map';

  useEffect(() => {
    if (savedMap.current) {
      savedMap.current.off();
      savedMap.current.remove();
    }

    const map = L.map(mapId, {
      center: [35.774929, -122.419418],
      zoom: 10,
    });
    savedMap.current = map;

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}{r}.png', {
      attribution:
        '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);

    L.marker([37.774929, -122.419418], {
      icon: L.icon({
        iconUrl: markerIconPng,
        shadowUrl: markShadowPng,
      }),
    }).addTo(map)
      .bindPopup(
        'San Francisco is the commercial, financial, and cultural center of Northern California.',
        { autoClose: false }
      ).openPopup();

    L.marker([37.441883, -122.143021], {
      icon: L.icon({
        iconUrl: collegePng,
        iconSize: [30, 30],
        iconAnchor: [20, 0],
      }),
    }).addTo(map)
      .bindPopup(
        'Stanford University is a private research university in Palo Alto, California.',
        { autoClose: false }
      ).openPopup();
  }, []);

  return <div id={mapId}></div>;
}

export default App;