Fullscreen control for react-leaflet
npm install react-leaflet-fullscreenjs
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 (
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
);
};render( , document.getElementById("root"));
`$3
Since it's based on leaflet.fullscreen the properties set is just passed in leaflet.fullscreen as is.`jsx
// 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,
``