Video

Build Maps with React Leaflet

🕹️ 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