2021-10-22
1381
#react
Leigh Halliday
11896
Oct 22, 2021 ⋅ 4 min read

React Leaflet tutorial

Leigh Halliday Leigh Halliday is a developer based out of Canada who works at FlipGive. He writes about React and Ruby on his blog and publishes React tutorials on YouTube.

Recent posts:

The different ways to use CSS :has(), with examples

The CSS :has() pseudo-class is a powerful new feature that lets you style parents, siblings, and more – writing cleaner, more dynamic CSS with less JavaScript.

Daniel Schwarz
Oct 24, 2025 ⋅ 7 min read

Kombai AI: The AI agent built for frontend development

Kombai AI converts Figma designs into clean, responsive frontend code. It helps developers build production-ready UIs faster while keeping design accuracy and code quality intact.

Jude Miracle
Oct 23, 2025 ⋅ 7 min read

The Replay (10/22/25): AI-assisted coding, Wasm 3.0, and more

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 22nd issue.

Matt MacCormack
Oct 22, 2025 ⋅ 29 sec read
Where AI-assisted coding accelerates development — and where it doesn’t

Where AI-assisted coding accelerates development — and where it doesn’t

John Reilly discusses how software development has been changed by the innovations of AI: both the positives and the negatives.

John Reilly
Oct 22, 2025 ⋅ 12 min read
View all posts

15 Replies to "React Leaflet tutorial"

  1. Very cool. Might it be a better practice to import the Map component as another name such as LeafletMap though to avoid potential future conflict with the Map data-structure?

  2. thank you thank you very much. It helped me a lot. Especially to solve errors with the marker. Nothing I had seen had worked for me but I followed your simple steps and it was perfect everything worked

  3. I am having a problem with the open street maps mapm having missing tiles and being jumbled up.

    I have a npx create-react-app with the app.css containing that leaflet-container then in the app.js I have the code below wotih the ottawa centric map I added an import ./leaflet.css as well trying to fix my tiling problem but that then gives me an error of:

    Module not found: Can’t resolve ‘./images/layers-2x.png’ in ‘D:\code\ComIT\ReactJS\comit-poject-robm\src’

  4. you have to update the map center with new position, so on click of marker u can get the markes (lat,lng) and set the same value to the map center

  5. When i put Map component inside my App.js (even with the TileLyer as Children and center, zoom props) i don’t get anything on my screen even that grey screen which is supposed to be shown doesn’t. Thank you for any help

  6. Please i got this message in my console and the map isn’t display everywhere:

    Failed to find a valid digest in the ‘integrity’ attribute for resource ‘https://unpkg.com/[email protected]/dist/leaflet.css’ with computed SHA-256 integrity ‘SHMGCYmST46SoyGgo4YR/9AlK1vf3ff84Aq9yK4hdqM=’. The resource has been blocked.

  7. Thanks for this tutorials, i’ve finally win a way to complete it. Now please how can i make the Marker to move when i’m scrolling and how can i can a name of a place automatically just with latitude and longitude. Thanks

Leave a Reply

Hey there, want to help make our blog better?

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Sign up now