Course

Build Maps with React Leaflet

1
Course Introduction: Build Maps with React Leaflet
1m 7s
2
Section 01 - Overview of Mapping Technologies with Leaflet
1m 53s
3
Replace Assets in React Applications Created with create-react-app
26s
4
Group 1 - Your First Map
41s
5
Section 02 - Adding Your First React Leaflet Map to a New React Application
1m 14s
6
Install Leaflet and react-leaflet with NPM in a JavaScript Project
13s
7
Create a New Map in React Leaflet using the Components TileLayer and Map
1m 2s
8
Style React Leaflet Components using CSS
15s
9
Section 03 - Customize a React Leaflet Map with a Mapbox Basemap Style
2m 44s
10
Create a Mapbox Account
8s
11
Create a Map Style in Mapbox Studio
30s
12
Create an API Key in Mapbox
20s
13
Extract Environment Variable for the API Key
32s
14
Configure a Mapbox Endpoint with Mapbox GET Request Variables
1m 1s
15
Customize React Leaflet Maps with a Custom Map Style Endpoint
18s
16
Extract Environment Variables to a .env File in a JavaScript Project
25s
17
Create a New Basemap Style in Mapbox Studio
22s
18
Section 04 - Adding a Marker Component to a Map to Point to a Location with React Leaflet
1m 22s
19
Retrieve Latitude and Longitude Coordinates with Google Maps
10s
20
Add a React Leaflet Marker Component with Latitude and Longitude Coordinates
14s
21
Fix react-leaflet Peer Dependencies Conflicts with useEffect Hook
32s
22
Add a React Leaflet Popup Component to Display the Name of an Existing Marker Component
15s
23
Add Latitude and Longitude Coordinates to a React Leaflet Marker Component
17s
24
Group 2 - Managing Map Data
1m 1s
25
Section 05 - Manage Leaflet State in a React App with Hooks
1m 55s
26
Access a Leaflet Map instance with useRef Hook in React Leaflet
18s
27
Accesse Leaflet Map Instance Inside a React useEffect Hook
16s
28
Create a Marker Component with the Leaflet API Map Instance
51s
29
Manage Stale Map Data in React Leaflet
50s
30
Recreate the Marker from our Second Favorite Location with React Leaflet bindPopup
23s
31
Section 06 - Create Your First GeoJSON Document and Add Restaurant Locations to the Map
1m 32s
32
Understanding the Basics of the GeoJSON Standard
50s
33
Drop Points in geojson.io to Create Your First GeoJSON FeatureCollection
23s
34
Manually Add a New Restaurant Location Feature to the GeoJSON Document
37s
35
Create a New GeoJSON File and Import it into a React App
25s
36
Add GeoJSON Location Data to a React Leaflet Map with a GeoJSON Instance
23s
37
Manually Add Another GeoJSON Location Feature to a Map with React Leaflet
12s
38
Section 07 Add Restaurant Info to GeoJSON Documents and Display it in a Tooltip on the Map
1m 49s
39
Update our GeoJSON Data to Include Restaurant Information by Adding properties
32s
40
Add React Leaflet Popups to all of our Markers using GeoJSON Data
44s
41
Adding Restaurant Information to our Popups
30s
42
Update the Styles of React Leaflet Popups
25s
43
Change the Background Color of a React Leaflet Popup with CSS Selectors
44s
44
Add Another Restaurant Attribute with a GeoJSON Property and Display it in a Leaflet Popup
31s
45
Group 3 - Customizing Your Map
1m 18s
46
Section 08 - Add Restaurant Delivery Zones to Map with Shaded Regions
1m 19s
47
Add a Delivery Radius to our Restaurant GeoJSON Data
25s
48
Add a Shaded React Leaflet Circle to the Map Based on GeoJSON Data
55s
49
Only Showing the Delivery Radius in React Leaflet on Marker Hover using DOM Events
54s
50
Change the Color of the React Leaflet Delivery Zone
14s
51
Section 09 - Customize Restaurant Location Markers with Custom Images
1m 48s
52
Recreate React Leaflet Markers with the GeoJSON pointToLayer Configuration Set
35s
53
Replace the Default React Leaflet Location Markers with a Custom Image
1m 2s
54
Import and Add the Default React Leaflet Shadows back to our Markers
28s
55
Replace the Marker with Custom HTML and Style with CSS
1m 51s
56
Section 10 - Use Leaflet's Geolocation API to Find Locations Near You
1m 42s
57
Add a React Leaflet Marker to a Location when Clicking a Button
43s
58
Add a Button that Finds your Location and Navigates the Map to the Location with Leaflet
47s
59
Use the Browser's Location to Add a React Leaflet Marker to the Map
54s
60
Add a React Leaflet Circle to the Map Designing the Accuracy of the Browser's Location
43s
61
Clean up Location Event handler Resources when Page Unmounts in React useEffect
25s

Install Leaflet and react-leaflet with NPM in a JavaScript Project

InstructorColby Fayock

Share this video with your friends

Send Tweet

While there are a few options for building maps, Leaflet is the most popular. Lucky for us, Leaflet is also available as a ReactJS component library with React Leaflet. We'll use both Leaflet and React Leaflet to build a map in our React app.

To get started, we need to install:

Leaflet (npmjs.com) and React Leaflet (npmjs.com)

Click here for exercise instructions

View code on GitHub

Instructor: [0:00] In order to start adding our map, we need to install some dependencies. First, we're going to run npm install, and we may want to add leaflet and react-leaflet.

[0:06] Once we have those dependencies successfully installed, we should now see that inside of our package.json we have leaflet and react-leaflet. Now we are ready to add our map.

Build Maps with React Leaflet

Install Leaflet and react-leaflet with NPM in a JavaScript Project

Social Share Links