Overview

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.

Syllabus

Course Introduction: Build Maps with React Leaflet
Section 01 - Overview of Mapping Technologies with Leaflet
Replace Assets in React Applications Created with create-react-app
Group 1 - Your First Map
Section 02 - Adding Your First React Leaflet Map to a New React Application
Install Leaflet and react-leaflet with NPM in a JavaScript Project
Create a New Map in React Leaflet using the Components TileLayer and Map
Style React Leaflet Components using CSS
Section 03 - Customize a React Leaflet Map with a Mapbox Basemap Style
Create a Mapbox Account
Create a Map Style in Mapbox Studio
Create an API Key in Mapbox
Extract Environment Variable for the API Key
Configure a Mapbox Endpoint with Mapbox GET Request Variables
Customize React Leaflet Maps with a Custom Map Style Endpoint
Extract Environment Variables to a .env File in a JavaScript Project
Create a New Basemap Style in Mapbox Studio
Section 04 - Adding a Marker Component to a Map to Point to a Location with React Leaflet
Retrieve Latitude and Longitude Coordinates with Google Maps
Add a React Leaflet Marker Component with Latitude and Longitude Coordinates
Fix react-leaflet Peer Dependencies Conflicts with useEffect Hook
Add a React Leaflet Popup Component to Display the Name of an Existing Marker Component
Add Latitude and Longitude Coordinates to a React Leaflet Marker Component
Group 2 - Managing Map Data
Section 05 - Manage Leaflet State in a React App with Hooks
Access a Leaflet Map instance with useRef Hook in React Leaflet
Accesse Leaflet Map Instance Inside a React useEffect Hook
Create a Marker Component with the Leaflet API Map Instance
Manage Stale Map Data in React Leaflet
Recreate the Marker from our Second Favorite Location with React Leaflet bindPopup
Section 06 - Create Your First GeoJSON Document and Add Restaurant Locations to the Map
Understanding the Basics of the GeoJSON Standard
Drop Points in geojson.io to Create Your First GeoJSON FeatureCollection
Manually Add a New Restaurant Location Feature to the GeoJSON Document
Create a New GeoJSON File and Import it into a React App
Add GeoJSON Location Data to a React Leaflet Map with a GeoJSON Instance
Manually Add Another GeoJSON Location Feature to a Map with React Leaflet
Section 07 Add Restaurant Info to GeoJSON Documents and Display it in a Tooltip on the Map
Update our GeoJSON Data to Include Restaurant Information by Adding properties
Add React Leaflet Popups to all of our Markers using GeoJSON Data
Adding Restaurant Information to our Popups
Update the Styles of React Leaflet Popups
Change the Background Color of a React Leaflet Popup with CSS Selectors
Add Another Restaurant Attribute with a GeoJSON Property and Display it in a Leaflet Popup
Group 3 - Customizing Your Map
Section 08 - Add Restaurant Delivery Zones to Map with Shaded Regions
Add a Delivery Radius to our Restaurant GeoJSON Data
Add a Shaded React Leaflet Circle to the Map Based on GeoJSON Data
Only Showing the Delivery Radius in React Leaflet on Marker Hover using DOM Events
Change the Color of the React Leaflet Delivery Zone
Section 09 - Customize Restaurant Location Markers with Custom Images
Recreate React Leaflet Markers with the GeoJSON pointToLayer Configuration Set
Replace the Default React Leaflet Location Markers with a Custom Image
Import and Add the Default React Leaflet Shadows back to our Markers
Replace the Marker with Custom HTML and Style with CSS
Section 10 - Use Leaflet's Geolocation API to Find Locations Near You
Add a React Leaflet Marker to a Location when Clicking a Button
Add a Button that Finds your Location and Navigates the Map to the Location with Leaflet
Use the Browser's Location to Add a React Leaflet Marker to the Map
Add a React Leaflet Circle to the Map Designing the Accuracy of the Browser's Location
Clean up Location Event handler Resources when Page Unmounts in React useEffect