🕹️ Levels: 😎 Intermediate
⏳ Duration: 1 hours
🤑 Price: Subscription
🧑💻 Learning Platform: Egghead.io
🧑🎓 Certificate: Yes
🔑 Key Learning Outcomes
- Using Mapbox to style the map's appearance.
- Store location data in GeoJSON documents.
- Customize map markers & tooltips to display metadata.
- useEffect and useRef React Hooks.
- Dynamic location-based data.
- Event handling.
👨🏫 About the Course
In this course, Colby Fayock will guide you through building map-making skills using React Leaflet. You'll work on a web app for a fictional restaurant, practicing with API keys and React Hooks to create a custom interactive map with metadata and overlays.
🎯 Target Audience
- Suitable for developers familiar with React looking to enhance their skills in map integration and customization.
✅ Requirements
- Basic understanding of React and JavaScript.
- Completion of 'The Beginner's Guide to React' course is recommended.
📖 Course Content
- Overview of Mapping Technologies with Leaflet.
- Adding React Leaflet Map to a React Application.
- Customize React Leaflet Map with Mapbox Basemap Style.
- Adding Marker Component to Point to a Location.
- Managing Leaflet State in a React App with Hooks.
- Create GeoJSON Document and Add Locations to the Map.
- Add Restaurant Info to GeoJSON Documents and Display in a Tooltip.
- Customize Map with Delivery Zones and Custom Images.
- Use Leaflet's Geolocation API to Find Locations Near You.
Drop a comment
Build Maps with React Leaflet by Colby Fayock
Log in to leave a feedback
Login👇 Psst! Interested in More React Courses?

Build a React App with the Hooks APIVideo
by Andy Van Slaars
🕹️ Levels: 😎 Intermediate
⏳ Duration: 1.5 hours
🤑 Price: Subscription
🧑💻 Learning Platform: Egghead.io


Building React Applications with Idiomatic ReduxVideo
by Dan Abramov
🕹️ Levels: 😎 Intermediate
⏳ Duration: 2.5 hours
🤑 Price: Free
🧑💻 Learning Platform: Egghead.io

Learn React lazy, memo, useState and useEffect in 7 minutesVideo
by Tomasz Łakomy
🕹️ Levels: 🌱 Beginner
⏳ Duration: 0.5 hours
🤑 Price: Subscription
🧑💻 Learning Platform: Egghead.io