Need help with leaflet.fullscreen?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

brunob
228 Stars 86 Forks MIT License 130 Commits 4 Opened issues

Description

Leaflet.Control.FullScreen for Leaflet

Services available

!
?

Need anything else?

Contributors list

# 38,687
JavaScr...
HTML
Nextclo...
leaflet
88 commits
# 574,752
HTML
4 commits
# 564,210
HTML
4 commits
# 489,575
HTML
3 commits
# 211,796
CSS
leaflet...
Shell
PHP
3 commits
# 222,095
Node.js
CSS
HTML
process...
2 commits
# 152,110
Shell
CSS
HTML
vue2
1 commit
# 667,630
HTML
1 commit
# 345,795
C
raw
Shell
aggrega...
1 commit
# 81,649
JavaScr...
google-...
HTML
heatmap
1 commit
# 693,570
HTML
1 commit
# 122,309
HTML
CSS
Shell
javascr...
1 commit
# 247,574
CSS
Shell
HTML
openlay...
1 commit
# 693,571
HTML
1 commit
# 2,381
q
React
declara...
prometh...
1 commit
# 224,999
angular...
datagri...
angular...
HTML
1 commit
# 379,065
C
Shell
c-plus-...
1 commit

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:

 
 

Add the fullscreen control to the map:

var 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.

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

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.io/leaflet.fullscreen/

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.