Custom Element Demo

This example demonstrates the fullscreenElement option, which allows you to specify a custom DOM element to go fullscreen instead of just the map container.

Why use this?

When building map applications with additional UI elements (toolbars, legends, sidebars), you often want the entire interface to go fullscreen, not just the map itself.

In this demo:

The entire wrapper (#map-wrapper) goes fullscreen, including:

• 📊 Toolbar at the top
• 🗺️ Map in the center
• 📋 Legend at the bottom

Without fullscreenElement:
Only the map would go fullscreen, leaving the toolbar and legend behind.

With fullscreenElement:
The entire wrapper goes fullscreen, preserving your complete UI layout.

Code Example:

const mapWrapper = document.getElementById('map-wrapper');

map.addControl(
  new FullScreen({
    position: 'topleft',
    fullscreenElement: mapWrapper
  })
);