Fullscreen

Fills the screen with the map.

type: fullscreenstandalonestable

What it does

One button to put the map in fullscreen and leave fullscreen again.

It uses the browser's fullscreen API on the map element. Browser chrome, the page header, and the rest of the layout are hidden while fullscreen is active.

Using it

Click it to fill the screen. Click again, or press Escape, to come back. The map keeps its center, zoom, and layers across the change. Only the size changes.

In your own map

Add fullscreen with a position, usually beside the navigation control.

An iframe cannot go fullscreen unless it is allowed to. If your map is embedded, the embedding page must say so:

<iframe src="…" allow="fullscreen"></iframe>

Without that the browser refuses the request.

Extending it

The code requests fullscreen on the webmapx-map element, so the toolbar, panels, and controls come with the map.

Config typefullscreen
Element<webmapx-fullscreen-control>
Placementstandalone
Sourcesrc/components/webmapx-fullscreen-control.ts
Teststests/tool-registration.test.ts
Relatednavigation, insetMap