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!
Overview
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
