đšī¸ 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?


Redux Fundamentals (feat. React)Video
by Steve Kinney
đšī¸ Levels: đ Intermediate
âŗ Duration: 4.5 hours
đ¤ Price: Subscription
đ§âđģ Learning Platform: Frontend Masters

Manage React State with RecoilVideo
by Yoni Weisbrod
đšī¸ Levels: đ Intermediate
âŗ Duration: 0.5 hours
đ¤ Price: Free
đ§âđģ Learning Platform: Egghead.io

React Hooks: RevisitedVideo
by Ryan Harris
đšī¸ Levels: đ Intermediate
âŗ Duration: 0.5 hours
đ¤ Price: Subscription
đ§âđģ Learning Platform: Egghead.io