Skip to content
A fullscreen control for Leaflet
HTML Makefile
Branch: gh-pages
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Support AMD and Node/CommonJS module systems (#64) Apr 26, 2017
.gitignore New icon + project restructuring Nov 27, 2013
CHANGELOG.md v1.0.2 Jan 18, 2017
LICENSE
Makefile Eliminate src directory Dec 28, 2015
README.md Add localization part in readme (#74) Feb 12, 2018
component.json Update changelog, add package.json Feb 25, 2013
fullscreen.svg Eliminate src directory Dec 28, 2015
index.html Update index.html to leaflet 1.3.3 (#82) Aug 8, 2018
package.json v1.0.2 Jan 18, 2017

README.md

Leaflet.fullscreen

A HTML5 fullscreen plugin for Leaflet.

Usage

To provide a button for toggling fullscreen on and off:

// 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:

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');
    }
});

Localization

To change fullscreen control text:

map.addControl(new L.Control.Fullscreen({
    title: {
        'false': 'View Fullscreen',
        'true': 'Exit Fullscreen'
    }
}));

Including via CDN

Leaflet.fullscreen is available through the Mapbox Plugin CDN - just copy this include:

<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />

Building

npm install && make

ProTip You may want to install watch so you can run watch make without needing to execute make on every change.

Supported Leaflet Versions

Leaflet 1.0 and later is supported. Earlier versions may work, but are not tested.

You can’t perform that action at this time.