🌍 My Journey with React Leaflet: Learning to Build an Interactive Map

Recently, I started learning how to make an interactive map for a web app I am working on, using React Leaflet.
The idea is to let users click anywhere on the map to add a marker. Later, they’ll be able to write a title, a description, and even add a photo for that spot.
In the future, each spot will be reviewed by an admin before it shows up on the map.

🧩 What I Have Done So Far

I created a React map using MapContainer, TileLayer, and Marker_added Popup and useMapEvents later on_.
The map displays the location of a city, when I type a city name, it finds its coordinates using OpenStreetMap’s Nominatim API.

💻 My Coding Challenges
I faced many small but confusing problems while building this project.

At first, I didn’t really understand how this useMapEvents:

function AddMarkerOnClick() {
    useMapEvents({
      click(e) {
        const { lat, lng } = e.latlng;
        setMarkers((prev) => [...prev, { lat, lng }]);
        setLastMarker({ lat, lng });
        setShowModal(true);
      },
    });
    return null;
  }

I couldn’t figure out why the click was written inside an object, or how React Leaflet knew what it meant. But then I learned that this object simply tells the map what actions to listen for. The click event is already built into the map library. Once I realized that, it all made sense.

Now, whenever I click on the map, a marker appears exactly where I clicked.
It feels great to see it working — even though it’s simple, it’s a huge step forward!

🧠 Working on the Modal

Next, I started building a modal that opens when a user adds a marker. Inside the modal, users can type the title and description for that place.
The tricky part was making sure that when the modal opens, the rest of the page becomes inactive and that my close button doesn’t disappear behind the overlay.

It took me a while to understand how positioning and z-index work together, but I finally got it right. Now, the modal appears on top of everything, and the background stays dimmed and unclickable.

🌱 What I Learned

Even though these might sound like small technical details, each one helped me understand how React components, Tailwind styling, and CSS positioning actually work together.

Every small “why doesn’t this work?” moment is actually a step toward becoming a better developer. Today once again I felt I really enjoy this journey.

Comments

[Hashbyt]

Loved the personal touch discussing modal styling and z index challenges in React. Shows the crossover of React components and styling in practical UI problems.
Encouraging story for new developers facing similar hurdles.

[Minoosh]

Thanks for your kind comment.