A fullscreen control for Leaflet
npm install leaflet-fullscreen-custom-container-forkTo provide a button for toggling fullscreen on and off:
`` 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.
// fullscreenchange Event that's fired when entering or exiting fullscreen.`
map.on('fullscreenchange', function () {
if (map.isFullscreen()) {
console.log('entered fullscreen');
} else {
console.log('exited fullscreen');
}
});
To change fullscreen control text:
` js`
map.addControl(new L.Control.Fullscreen({
title: {
'false': 'View Fullscreen',
'true': 'Exit Fullscreen'
}
}));
To change the container for the fullscreen API just add it to the options:
` js`
map.addControl(new L.Control.Fullscreen({
'container': document.documentElement,
//...
//more options here
}
}));
will try to fork that into the original project on https://github.com/cismet/Leaflet.fullscreen.
Leaflet.fullscreen is available through the Mapbox Plugin CDN - just copy this include:
`html`
npm install && make
__ProTip__ You may want to install watch so you can run watch make`
without needing to execute make on every change.
Leaflet 1.0 and later is supported. Earlier versions may work, but are not tested.