Leaflet.Control.FullScreen

What ?

Simple plugin for Leaflet that adds fullscreen button to your maps.

Inspired by http://elidupuis.github.com/leaflet.zoomfs/

Use the native javascript fullscreen API with help of https://github.com/sindresorhus/screenfull.js

Released under the MIT License http://opensource.org/licenses/mit-license.php

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:

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

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

If your map doesn't have a zoomContron 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.

Events and options:

// 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, defaut 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 seperate 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();

Tips for typescript environments:

Installation

npm i leaflet.fullscreen
npm i screenfull
npm i -D @types/leaflet.fullscreen

Usage

import * as leaflet from 'leaflet';
import 'leaflet.fullscreen';

@Component({
    :
})
export class AppComponent implements AfterViewInit {
  private map: leaflet.Map;
  private mapOptions: leaflet.MapOptions = {
    :
    fullscreenControl: true,
    fullscreenControlOptions: {
      position: 'topleft'
    }
  } ;

  ngAfterViewInit(): void {
    this.map = new leaflet.Map('map', this.mapOptions);
  }
    :
}

Where ?

Source code : https://github.com/brunob/leaflet.fullscreen

Downloads : https://github.com/brunob/leaflet.fullscreen/releases

Demo : https://brunob.github.com/leaflet.fullscreen/