Skip to content

krvital/react-leaflet-fullscreen

Repository files navigation

FullscreenControl for react-leaflet

It is the easiest way to add fullscreen control to your react-leaflet map. There is no fullscreen control in the standard set of leaflet controls, so here it is.

image

Live demo

Here is the live demo

Usage example

import React from "react";
import { render } from "react-dom";
import { MapContainer, TileLayer } from "react-leaflet";
import { FullscreenControl } from "react-leaflet-fullscreen";
import "react-leaflet-fullscreen/styles.css";

const App = () => {
  return (
    <div id="app">
      <MapContainer center={[54.989, 73.369]} zoom={12} scrollWheelZoom={false} id="map">
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <FullscreenControl />
      </MapContainer>
    </div>
  );
};

render(<App />, document.getElementById("root"));

Component props

Since it's based on leaflet.fullscreen the properties set is just passed in leaflet.fullscreen as is.

// Position of the element. Default value is "topleft"
position: 'topleft' | 'topright' | 'bottomright' | 'bottomleft'

// Title of the button. Default value is "Full Screen"
title: string,

// Title of the button when fullscreen is on. Default value is "Exit Full Screen"
titleCancel: string 

// Content of the button. Default values is null
content: null | HTMLElement 

// Force seperate button to detach from zoom buttons. Default value if false
forceSeparateButton: boolean, 

// force use of pseudo full screen even if full screen API is available. Default value is false
forcePseudoFullscreen: boolean,

About

Fullscreen control for react-leaflet

Resources

License

Stars

Watchers

Forks

Packages

No packages published