react.leaflet.2markers.App.js

import { useEffect, useRef, useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import { Icon } 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 [popupRef1Ready, setPopupRef1Ready] = useState(false);
  const [popupRef2Ready, setPopupRef2Ready] = useState(false);
  const markerRef1 = useRef();
  const markerRef2 = useRef();

  useEffect(() => {
    markerRef1.current?.openPopup();
  }, [popupRef1Ready]);

  useEffect(() => {
    markerRef2.current?.openPopup();
  }, [popupRef2Ready]);

  return (
    <MapContainer center={[38.907192, -77.036873]} zoom={10}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://tile.openstreetmap.org/{z}/{x}/{y}{r}.png"
      />
      <Marker
        position={[38.907192, -77.036873]}
        icon={
          new Icon({
            iconUrl: markerIconPng,
            shadowUrl: markShadowPng,
          })
        }
        ref={markerRef1}
      >
        <Popup autoClose={false} ref={() => setPopupRef1Ready(true)}>
          Washington, D.C. is the capital city and federal district of the United States.
        </Popup>
      </Marker>
      <Marker
        position={[39.290386, -76.61219]}
        icon={
          new Icon({
            iconUrl: collegePng,
            iconSize: [30, 30],
            iconAnchor: [20, 0],
          })
        }
        ref={markerRef2}
      >
        <Popup autoClose={false} ref={() => setPopupRef2Ready(true)}>
          Maryland Institute College of Art is a leader in the world of visual arts featuring undergraduate, graduate, and certificate programs.
        </Popup>
      </Marker>
    </MapContainer>
  );
}

export default App;