Add Native Fullscreen Mode to Your React Leaflet Map with Leaflet.fullscreen

Colby Fayock
InstructorColby Fayock

Share this video with your friends

Send Tweet
Published 2 years ago
Updated 2 years ago

In this lesson, we'll use the Leaflet plugin Leaflet.fullscreen to add native HTML5-based fullscreen mode to a React Leaflet Map. We'll use the fullscreenControl prop on our Map component to enable the toggle control and learn how to listen to the available event fullscreenchange to fire code when the browser enters or exits fullscreen mode.

Note: The Code Example below won't function properly when clicking the control because of how the CodeSandbox maintains the sandboxed environment.