Mapping with React Leaflet

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