This repo contains notes from Colby Fayock's Egghead Collection Building Maps with React-Leaflet.

These notes contain the same structure as the transcriptions, along with additional rewrites, links to resources, and personal takes on the lesson. Feel free to submit additions to these notes, but please don't remove anything (unless we messed up or misunderstood something).

Generally, there is one document for each video in the course. However, because the videos are rather short (and there's over 60 of them), I've further grouped them into 10 directories (or lessons). Colby further bundles the videos into 3 major groups.

So 1 video collection -> 3 groups -> 10 lessons -> many exercises -> 61 videos!

I wanted to avoid creating subdirectories, so I kept the 10 lesson structure.

The main goal of this course is to create a simple restaurant locator app!

On this journey we will also:

• Learn what the Leaflet mapping library is and what it does
• Add a map to a create-react-app project using React-Leaflet
• Learn about Map, TileLayer, Marker and Popup components
• Learn about Mapbox
• Learn about GeoJSON
• Learn about Leaflet API

This is a really well structured and super beginner-friendly course. Some prior knowledge of React is recommended, but not required.

If you are a less experienced developer, I recommend watching the course twice: just watch it once then code-along for the second time around.

If you are slightly more advanced, I'd suggest to try and complete the exercises before watching the course for solutions. You'll find Colby's comments instructing you what needs doing sprinkled throughout the codebase.

I didn't have any experience with creating maps beforehand, and this course served as a great introduction. Colby is very intentional in his teaching and expertly mixes new content with exercises, reviews, and deliberate practice, which results in a great learning experience.

I enjoyed it thoroughly and I hope you do too! Eva Dee ✏️

A Front End Engineer and UX Designer that’s passionate about tackling challenges that can help save people’s lives and make the world a better place.

You can find Colby on Twitter

Other Egghead content created by Colby.

• 01-Course Introduction

• 02-Lesson 1 - A Little Overview About Maps

• 03-Update the Avatar Image to a Picture of Yourself

• 04-Group 1 - Your First Map

• 05-Lesson 2 - Adding Your First React Leaflet Map to a New React Application

• 06-Install leaflet and react-leaflet

• 07-Adding a New Map to the Search Page

• 08-Style leaflet Map using CSS

• 09-Lesson 3 - Customizing Your React Leaflet Map with a Mapbox Basemap Style

• 10-Create a Mapbox Account

• 11-Creating a Map Style in Mapbox

• 12-Creating an API key in Mapbox

• 13-Configure a Mapbox Endpoint for our Map Style

• 14-Customize Our Map with Our Map Style Endpoint

• 15-Using Our Tile Endpoint for Our Map

• 16-Create a New Basemap Style

• 17-Create an Environment Variable for the API Key

• 18-Lesson 4 - Adding a Marker to a Map to Point to a Location with React Leaflet

• 19-Find Our Favorite Location

• 20-Add a Marker Component with our Location

• 21-Fix a Library Conflict so our Marker Image Shows

• 22-Add a Popup Component to Display the Name of our Location

• 23-Add a Second Marker for your Second Favorite Location

• 24-Group 2 - Managing Map Data

• 25-Lesson 5 - Managing Leaflet State in a React App with Hooks

• 26-Adding a ref to Our Map Component

• 27-Accessing our Leaflet Map Instance Inside a React useEffect Hook

• 28-Use our Leaflet Map Instance to re-add our Marker to the Map

• 29-Review a Simple Example of Mismanaged State

• 30-Recreate the Marker from our Second Favorite Location

• 31-Lesson 6 - Create Your First GeoJSON Document and Add Restaurant Locations to the Map

• 32-Understanding the Basics of GeoJSON

• 33-Using geojson.io to Create Your First GeoJSON Document

• 34-Manually Add a New Restaurant Location to the GeoJSON Document

• 35-Create a New GeoJSON File and Import it into the App

• 36-Add GeoJSON Location Data to the Map

• 37-Add Another Location to the Map

• 38-Lesson 7 - Add Restaurant Info to GeoJSON Documents and Display it in a Tooltip on the Map

• 39-Updating our GeoJSON Data to Include Restaurant Information

• 40-Adding Popups to all of our Markers

• 41-Adding Restaurant Information to our Popups

• 42-Update the Styles of our Popups

• 43-Change the Background Color of the Popup

• 44-Add Another Restaurant Attribute

• 45-Group 3 - Customizing Your Map

• 46-Lesson 8 - Add Restaurant Delivery Zones to Map with Shaded Regions

• 47-Adding a Delivery Radius to our Restaurant Data

• 48-Using the Delivery Radius to add a Shaded Circle to the Map

• 49-Only Showing the Delivery Radius on Marker Hover

• 50-Change the Color of the Delivery Zone

• 51-Lesson 9 - Customize Restaurant Location Markers with Custom Images

• 52-Recreate Restaurant Markers with GeoJSON Configuration Option

• 53-Replace the Default Location Markers with a Custom Image

• 54-Add the Default Shadows back to our Markers

• 55-Replace the Marker with Custom HTML and Style with CSS

• 56-Lesson 10 - Use Leaflet's Geolocation API to Find Locations Near You

• 57-Add a Marker to a Location when Clicking a Button

• 58-Create a Button taht Finds your Location and Navigates the Map to that Location

• 59-Use the Browser's Location to Add a Marker to the Map

• 60-Add a Circle to the Map Designing the Accuracy of the Browser's Location

• 61-Clean up Location Event handler Resources when Page Unmounts

Thanks goes to these wonderful people (emoji key):

Eva 🖋

Lucas Minter 👀

Zac Jones 👀

Maggie Appleton 🎨