YoVDO

Mapping with React Leaflet

Offered By: egghead.io

Tags

React Courses Web Development Courses Leaflet Courses

Course Description

Overview

In this collection, you'll learn the basics of creating a new map in your React application with React Leaflet. We'll walk through adding the map itself as well as adding markers with popups, different shapes, and increasingly complex features to your map!

Syllabus

  • Create a New Map using React Leaflet
  • Add a React Leaflet Marker with a Popup to a Map
  • Add Shapes to a Map in React Leaflet
  • Style React Leaflet Shapes using Component Props
  • Style and Animate a React Leaflet Shape with Custom CSS
  • Interface with the React Leaflet Map API with the useRef and useEffect React Hooks
  • Change the React Leaflet Map ZoomControl Location and Icons
  • Add GeoJSON Location Data to a Map Using Markers and Popups in React Leaflet
  • Customize GeoJSON Data Markers with a React Leaflet Icon Image
  • Manage Map Data and Feature Shapes Together in a React Leaflet LayerGroup or FeatureGroup
  • Change the Map Tile Service of a React Leaflet TileLayer Basemap to NASA GIBS Blue Marble
  • Add a LayersControl Toggle to Switch Between TileLayer Basemaps in React Leaflet
  • Change the Location of a React Leaflet Map with Leaflet's flyTo and setView
  • Use Geojson.io to Draw Custom Marker and Shape Features for a React Leaflet Map
  • Use Leaflet's Geolocation API to Find a Browser's Location to Update a React Leaflet Map
  • Add Native Fullscreen Mode to Your React Leaflet Map with Leaflet.fullscreen
  • Add Placename Location Search to React Leaflet with Esri Leaflet Geocoder
  • Fix React Leaflet Polyline International Date Line Wrapping with the Antimeridian Plugin

Taught by

Colby Fayock

Related Courses

Introduction to ReactJS
Microsoft via edX
Front-End Web Development with React
The Hong Kong University of Science and Technology via Coursera
Multiplatform Mobile App Development with React Native
The Hong Kong University of Science and Technology via Coursera
Client-based Web Applications development: ReactJS & Angular
Universidad Politécnica de Madrid via Miríadax
React
Udacity