A fullscreen control for Leaflet
npm install @runette/leaflet-fullscreen js
// Create a new map with a fullscreen button:
var map = new L.Map('map', {
fullscreenControl: true,
// OR
fullscreenControl: {
pseudoFullscreen: false // if true, fullscreen to page width and height
}
});
// or, add to an existing map:
map.addControl(new L.Control.Fullscreen());
`
The plugin also adds several methods to L.Map which are always available, even if you choose not to use the fullscreen button:
` js
map.isFullscreen() // Is the map fullscreen?
map.toggleFullscreen() // Either go fullscreen, or cancel the existing fullscreen.
// enterFullscreen Event that's fired when entering fullscreen.
map.on('enterFullscreen', function () {
if (map.isFullscreen()) {
console.log('entered fullscreen');
});
$3
To change fullscreen control text:
` js
map.addControl(new L.Control.Fullscreen({
title: {
'false': 'View fullscreen',
'true': 'Exit fullscreen'
}
}));
`
$3
`sh
npm install @runette/leaflet-fullscreen
`
$3
This version includes a index.d.ts with Typescript type definitions for :
`typescript
interface FullscreenOptions extends ControlOptions {}
`
and extensions to the following with the additional properties and methods
`typescript
interface Map {}
namespace control {}
namespace Control {}
``