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

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