Adding markers on click in React Leaflet

Placing a marker where the user clicks is a common map task. useMapEvent attaches one event handler from a child of the map.

All React Leaflet examples React Leaflet: usage and stats

Adding markers on click in React Leaflet: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Listen to one event. ClickToAdd calls useMapEvent("click", ...) and sends the clicked latlng to the parent as a [lat, lng] pair. [1]
Render markers from state. The points live in useState. Each one becomes a Marker with a Popup, and a Polyline connects them in order. [2]
Updates and removal. When points changes, the polyline gets the new positions. Clear empties the array, and the markers are removed from the map. [2]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { useState } from "react";
import { MapContainer, Marker, Popup, Polyline, useMapEvent } from "react-leaflet";
import L from "leaflet";

// A marker icon drawn with HTML and CSS (no image files)
const pin = (color) => L.divIcon({ className: "", iconSize: [20, 20], iconAnchor: [10, 10],
  html: `<div style="width:14px;height:14px;border-radius:50%;background:${color};border:3px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.4)"></div>` });

// Adds a point wherever the map is clicked
function ClickToAdd({ onAdd }) {
  useMapEvent("click", (e) => onAdd([e.latlng.lat, e.latlng.lng]));
  return null;
}

export default function App() {
  const [points, setPoints] = useState([[51.5, -0.12], [51.51, -0.09], [51.503, -0.06]]);
  return (
    <div style={{ display: "flex", height: "100vh", background: "#111", color: "#e5e7eb", font: "14px system-ui, sans-serif" }}>
      <MapContainer center={[51.505, -0.09]} zoom={13} style={{ flex: 1, height: "100%", background: "#0b1626", cursor: "crosshair" }}>
        <ClickToAdd onAdd={(p) => setPoints((list) => [...list, p])} />
        <Polyline positions={points} pathOptions={{ color: "#f59e0b", weight: 4 }} />
        {points.map((p, i) => (
          <Marker key={i} position={p} icon={pin("#f59e0b")}>
            <Popup>Point {i + 1}: {p[0].toFixed(4)}, {p[1].toFixed(4)}</Popup>
          </Marker>
        ))}
      </MapContainer>
      <div style={{ width: 160, padding: 12 }}>
        <b>{points.length} points</b>
        <p style={{ color: "#9ca3af" }}>Click the map to add a point to the route.</p>
        <button onClick={() => setPoints([])} style={{ padding: "6px 12px" }}>Clear</button>
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Click anywhere on the map to add a point; click a marker to see its coordinates, or press Clear. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react-leaflet 5.0.0, react 19.3.0, react-dom 19.3.0, leaflet 1.9.4. Needs WebGL.

More React Leaflet examples

Map, marker and popup in React Leaflet Listening to map events with useMapEvents Changing the map view with useMap Fitting the map to bounds in React Leaflet

Sources

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with React Leaflet? Ask AgentGid →