Copyright Š 2025Best Frontend Courses. All rights reserved.

  • Categories
  • Instructors
  • Terms of Service
  • Privacy Policy
  • Feedback
Best Frontend Courses LogoBest Frontend Courses
    • AI
    • Accessibility
    • Algorithms
    • Angular
    • Architecture
    • Astro
    • Auth
    • CSS
    • Firebase
    • Game Development
    • Gatsby
    • Git
    • GraphQL
    • HTML
    • Ionic
    • JavaScript
    • Jotai
    • MobX
    • Native
    • Netlify
    • Next.js
    • Nx
    • Performance
    • Prisma
    • React
    • React Native
    • Redux
    • Remix
    • Rx.js
    • SCSS/Sass
    • SolidJS
    • Storybook
    • Supabase
    • Svelte
    • Tailwind
    • Testing
    • TypeScript
    • Vue.js
    • XState
    • jQuery
    • p5.js
  • Add Course
  • Login
  1. Home
  2. React
  3. Build Maps with React Leaflet
React
Video

Build Maps with React Leaflet

by Colby Fayock
Enroll
đŸ•šī¸ 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.
Update Course

Drop a comment

Build Maps with React Leaflet by Colby Fayock

Log in to leave a feedback

Login

👇 Psst! Interested in More React Courses?

ReduxReduxReactReact

Redux Fundamentals (feat. React)
Video

by Steve Kinney

đŸ•šī¸ Levels: 😎 Intermediate

âŗ Duration: 4.5 hours

🤑 Price: Subscription

🧑‍đŸ’ģ Learning Platform: Frontend Masters

ReactReact

Manage React State with Recoil
Video

by Yoni Weisbrod

đŸ•šī¸ Levels: 😎 Intermediate

âŗ Duration: 0.5 hours

🤑 Price: Free

🧑‍đŸ’ģ Learning Platform: Egghead.io

ReactReact

React Hooks: Revisited
Video

by Ryan Harris

đŸ•šī¸ Levels: 😎 Intermediate

âŗ Duration: 0.5 hours

🤑 Price: Subscription

🧑‍đŸ’ģ Learning Platform: Egghead.io

🔙 Back to React Category