Skip to content

brunob/leaflet.fullscreen

Folders and files

NameName
Last commit message
Last commit date
Mar 10, 2025
Jan 22, 2024
Mar 10, 2025
Jan 22, 2024
Jan 22, 2024
Mar 10, 2025
Mar 6, 2025
Mar 6, 2025
Jan 17, 2025
Mar 10, 2025
Apr 2, 2025
Jul 3, 2024
Jul 7, 2024
Jan 17, 2025
Apr 2, 2025
Mar 10, 2025

Repository files navigation

Leaflet.Control.FullScreen

What ?

Leaflet.Control.FullScreen is a simple plugin for Leaflet that adds a fullscreen button to your maps using the Fullscreen API.

All major browsers support the Fullscreen API. For details about which browsers support this API, see the CanIuse website.

How ?

Include Control.FullScreen.js and Control.FullScreen.css in your page:

<link rel="stylesheet" href="Control.FullScreen.css" />
<script src="Control.FullScreen.js"></script>

Add the fullscreen control to the map:

let map = new L.Map('map', {
	fullscreenControl: true,
	fullscreenControlOptions: {
		position: 'topleft'
	}
});

If your map has a zoomControl the fullscreen button will be added at the bottom of this one.

If your map doesn't have a zoomControl the fullscreen button will be added to topleft corner of the map (same as the zoomControl).

If you want to use the plugin on a map embedded in an iframe, don't forget to set allowfullscreen attribute on your iframe.

Option, events and methods:

// create a fullscreen button and add it to the map
L.control
	.fullscreen({
		position: 'topleft', // change the position of the button can be topleft, topright, bottomright or bottomleft, default topleft
		title: 'Show me the fullscreen !', // change the title of the button, default Full Screen
		titleCancel: 'Exit fullscreen mode', // change the title of the button when fullscreen is on, default Exit Full Screen
		content: null, // change the content of the button, can be HTML, default null
		forceSeparateButton: true, // force separate button to detach from zoom buttons, default false
		forcePseudoFullscreen: true, // force use of pseudo full screen even if full screen API is available, default false
		fullscreenElement: false // Dom element to render in full screen, false by default, fallback to map._container
	})
	.addTo(map);

// events are fired when entering or exiting fullscreen.
map.on('enterFullscreen', function () {
	console.log('entered fullscreen');
});

map.on('exitFullscreen', function () {
	console.log('exited fullscreen');
});

// you can also toggle fullscreen from map object
map.toggleFullscreen();

Where ?

Use as ESM module

To use this plugin in the code of a project (based on e.g. React or Angular) follow these steps:

  1. install leaflet.fullscreen with your package manager (e.g. npm install leaflet.fullscreen).

  2. Update your code

import L from 'leaflet';
import 'leaflet.fullscreen';

const let map = new L.Map('map', {
	fullscreenControl: true,
	fullscreenControlOptions: {
		position: 'topleft'
	}
});

Contributing

If you find any problems, bugs or have questions, please open a GitHub issue in this repository.

Pull requests are of course also very welcome 🙂

The CHANGELOG.md is generated with standard-changelog (using the command npm run release).

To make this possible the commit messages / pull request titles must follow the conventional commits specification.

<type>: <subject>

[optional body]

[optional footer(s)]

The following is the list of supported types:

  • build: changes that affect build components like build tool, ci pipeline, dependencies, project version, etc...
  • chore: changes that aren't user-facing (e.g. merging branches).
  • ci: changes to the CI configuration files and scripts (basically directory .github/workflows).
  • docs: changes that affect the documentation only.
  • feat: changes that introduce a new feature.
  • fix: changes that patch a bug.
  • perf: changes which improve performance.
  • refactor: changes which neither fix a bug nor add a feature.
  • revert: changes that revert a previous commit.
  • style: changes that don't affect code logic, such as white-spaces, formatting, missing semi-colons.
  • test: changes that add missing tests or correct existing tests.

For breaking changes a footer with the following content must be used. BREAKING CHANGE:

Developer commands

  • npm run lint - Run linting and formatter checks.
  • npm run lint:fix - Fix linting and formatter issues.

Credits

License

This project is licensed under the MIT License - see the LICENSE file for details.