Build Maps with React Leaflet

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.

• 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