Code Monkey home page Code Monkey logo

leaflet.fullscreen's Introduction

Leaflet.fullscreen

A HTML5 fullscreen plugin for Leaflet.

Fork

Reason for the @runette fork: The root repo is not being actively managed. This fork starts with version 1.0.3.

Changes

  • Rework Legacy PNG Icons with Font Awesome SVG (#118)
  • Remove onFullscreenchange and replace with enterFullscreen event in README (#108)
  • included index.d.ts (#106)
  • changed the icon to SVG (#102 and #103)
  • remove fullscreen listener (#100)
  • Accessibility Fix (#2)
  • Fix Typo in index.d.ts (#3)

Usage

To provide a button for toggling fullscreen on and off:

// Create a new map with a fullscreen button
let 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.

// `enterFullscreen` Event that's fired when entering  fullscreen.
map.on('enterFullscreen', function () {
    if (map.isFullscreen()) {
        console.log('entered fullscreen');
});

Localization

To change fullscreen control text:

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

Including via NPM

npm install @runette/leaflet-fullscreen

Type definitions

This version includes a index.d.ts with Typescript type definitions for :

interface FullscreenOptions extends ControlOptions {}

and extensions to the following with the additional properties and methods

    interface Map {}

    namespace control  {}

    namespace Control {}
npm install
npm run test
npm run uglifyjs
npm run sass

Supported Leaflet Versions

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

License

ISC

SVG icons from Font Awesome v5.15.4: Creative Commons Attribution 4.0

leaflet.fullscreen's People

Contributors

alekzonder avatar casioo avatar drakkins avatar giuly90 avatar hbtjma avatar hswong3i avatar ishutka avatar ivansanchez avatar jeyb avatar jfirebaugh avatar kristjanesperanto avatar leemark avatar malvoz avatar mpschaeuble avatar neophen avatar runette avatar tmcw avatar zuck avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

leaflet.fullscreen's Issues

No button icons and exit-fullscreen button not working

I'm having multiple issues with the plugin, which could be related. I installed from GitHub directly ("leaflet-fullscreen": "git://github.com/runette/Leaflet.fullscreen.git" in package.json). This is what I see when displaying a map:

image

The icon in the fullscreen button is missing. When I click the button, the map is displayed in fullscreen as expected. There is still no icon in the button.

When I click the button again in fullscreen mode, nothing happens (it should exit fullscreen, I would expect).

There are no messages in the console.

Am I doing something wrong? Is the plugin broken? Thanks!

Maybe related to Leaflet#121

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.