When you want to make your maps interactive and informative, adding markers and popups is essential. In a React app using react-leaflet, you use the Marker and Popup components to achieve this. The Marker component is placed as a child of your MapContainer and TileLayer components, and it requires a position prop, which is an array specifying the latitude and longitude where the marker should appear. The Popup component is typically nested inside a Marker. When a user clicks the marker, the popup will display its content.

The Marker component supports several props. The most important is position, which takes a [latitude, longitude] array. You can also use the icon prop to customize the marker's appearance. The Popup component can contain any valid React elements, allowing you to display text, images, or even interactive content.

To customize marker icons, you need to create a new icon using Leaflet's L.icon method and pass it to the icon prop of the Marker. This lets you use custom images or adjust the marker's size and anchor point. For dynamic popup content, you can use variables or state to display information relevant to each marker, such as place names, descriptions, or user-generated data.

Here is a basic example of adding a marker and a popup:

import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

function MyMap() {
  const position = [51.505, -0.09];
  return (
    <MapContainer center={position} zoom={13} style={{ height: "400px", width: "100%" }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          A pretty CSS3 popup.<br />Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
}

In this example, the marker appears at the specified position, and clicking it reveals the popup content. To customize the marker's icon, you might do something like this:

import L from "leaflet";
import customIconUrl from "./my-icon.png";

const customIcon = L.icon({
  iconUrl: customIconUrl,
  iconSize: [32, 32],
  iconAnchor: [16, 32],
});

<Marker position={position} icon={customIcon}>
  <Popup>
    Custom icon marker!
  </Popup>
</Marker>

Dynamic popup content is achieved by passing variables or state into the popup. For example, if you have an array of locations, you can map over them and display relevant details in each popup.

Adding and customizing markers and popups in this way makes your map much more engaging and informative for users.