Build Maps with React Leaflet

ClockIcon47m
reactReact
>=16.13.1
leafletLeaflet
>=1.6.0
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
3.6
19 people completed
Colby Fayock
By

Colby Fayock

I help others learn by doing through articles, videos, and courses about Javascript, React, and the static web. I'm a Lead UX & Front End Engineer passionate abou...

If you've ever worked on a website for a business, there's a good chance you've included a map.

A Google Map embed is sufficient for showing a location, but doesn't leave you many customization options.

React Leaflet to the rescue!

In this course, Colby Fayock will guide you through a series of lessons and challenges that will build your map making skills as you build out a web app for a fictional restaurant.

You'll get practice with handling API keys and using React Hooks to implement a custom interactive map complete with metadata and additional overlays.

This course has built-in challenges that you are encouraged to pause and work through, but feel free to just watch.

What you'll learn

  • CheckIconUsing Mapbox to style the map's appearance
  • CheckIconStore location data in GeoJSON documents
  • CheckIconCustomize map markers & tooltips to display metadata
  • CheckIconuseEffect and useRef React Hooks
  • CheckIconDynamic location-based data
  • CheckIconEvent handling

Prerequisites

Colby Fayock
By

Colby Fayock

I help others learn by doing through articles, videos, and courses about Javascript, React, and the static web. I'm a Lead UX & Front End Engineer passionate abou...

Course Project

Apply what you’ve learned in this course by completing an exercise project.

View Project

Community Notes

Read helpful summaries and further explanations of this course, made by learners just like you.

Illustration for Course Introduction: Build Maps with React Leaflet

Course Introduction: Build Maps with React Leaflet

Colby Fayock
Lesson
ClockIcon
1m 7s