├── CHANGELOG.md ├── .gitignore ├── index.d.ts ├── index.js ├── dist.js ├── package.json ├── LICENSE ├── styles.css └── README.md /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [4.0.1] 4 | Updated for compatibility with react-leaflet v4 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | .idea 4 | npm-debug.log 5 | .atom-redmine 6 | .parcel-cache 7 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | interface FullscreenOptions { 2 | position?: 'topleft' | 'topright' | 'bottomleft' | 'bottomright'; 3 | title?: string; 4 | titleCancel?: string; 5 | content?: string; 6 | forceSeparateButton?: boolean; 7 | forcePseudoFullscreen?: boolean; 8 | fullscreenElement?: false | HTMLElement; 9 | } 10 | export declare function FullscreenControl(props: FullscreenOptions): null; 11 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import L from 'leaflet'; 2 | import "leaflet.fullscreen" 3 | import { useRef, useEffect } from "react"; 4 | import { useMap } from "react-leaflet"; 5 | 6 | export function FullscreenControl(props) { 7 | const map = useMap(); 8 | const ctrl = useRef(L.control.fullscreen(props)); 9 | 10 | useEffect(() => { 11 | ctrl.current.addTo(map); 12 | 13 | return () => { 14 | ctrl.current.remove(); 15 | ctrl.current.link.remove(); 16 | }; 17 | }); 18 | 19 | return null; 20 | } 21 | 22 | -------------------------------------------------------------------------------- /dist.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var L = require('leaflet'); 4 | require('leaflet.fullscreen'); 5 | var react = require('react'); 6 | var reactLeaflet = require('react-leaflet'); 7 | 8 | function FullscreenControl(props) { 9 | const map = reactLeaflet.useMap(); 10 | const ctrl = react.useRef(L.control.fullscreen(props)); 11 | 12 | react.useEffect(() => { 13 | ctrl.current.addTo(map); 14 | 15 | return () => { 16 | ctrl.current.remove(); 17 | ctrl.current.link.remove(); 18 | }; 19 | }); 20 | 21 | return null; 22 | } 23 | 24 | exports.FullscreenControl = FullscreenControl; 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-leaflet-fullscreen", 3 | "version": "4.1.0", 4 | "description": "Fullscreen control for react-leaflet", 5 | "main": "dist.js", 6 | "scripts": { 7 | "build": "npx rollup index.js --file dist.js --format cjs" 8 | }, 9 | "keywords": [ 10 | "react", 11 | "leaflet", 12 | "fullscreen" 13 | ], 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/krvital/react-leaflet-fullscreen" 17 | }, 18 | "author": "Vitaly Kravtsov (https://krvital.pro/)", 19 | "license": "MIT", 20 | "peerDependencies": { 21 | "react-leaflet": "^4.x" 22 | }, 23 | "dependencies": { 24 | "leaflet.fullscreen": "2.4.0" 25 | } 26 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Vitaly Kravtsov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | .fullscreen-icon { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAAAUklEQVR4AWOgGhgF/8HwPIrYeYgoIU0OKGIOxGm6jyJ2n5Cm8wwOQEUGKGIGQBEHoAwB0AA0FwEbSAgOBBwWmggHBOVBTjhyKU9GhBMslcAoAABPu2Hh6JIyeQAAAABJRU5ErkJggg==); } 2 | .leaflet-retina .fullscreen-icon { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAAnklEQVR4Ae2WVQEDMRAFn4RIi8OVtBIiIQ7KzO3dlN+8z4MJbEDGGPPXTA+SukQevTlKlCq6RFFSor7RXFR1qkehawTRo9uqIOaoPyTqQ0Wporh76GJdFg+zqbS4odm8s6nAkVQ1Tc+kqQqkano5pKpdFTVhTG8EwyKLwPLmF+xHbkH8psofEx918PFHOX85+YbrFn+B5K/Ef4wxxswAnU97CHDaZQMAAAAASUVORK5CYII=); background-size: 26px 26px; } 3 | .leaflet-container:-webkit-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; } 4 | .leaflet-container:-ms-fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; } 5 | .leaflet-container:full-screen { width: 100% !important; height: 100% !important; z-index: 99999; } 6 | .leaflet-container:fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; } 7 | .leaflet-pseudo-fullscreen { position: fixed !important; width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; z-index: 99999; } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FullscreenControl for react-leaflet 2 | It is the easiest way to add fullscreen control to your [react-leaflet](https://react-leaflet.js.org/) map. There is no fullscreen control in the standard set of leaflet controls, so here it is. 3 | 4 | ![image](https://github.com/krvital/react-leaflet-fullscreen/assets/811386/278384cf-d891-421e-822c-823d6db2d378) 5 | 6 | ### Live demo 7 | Here is the [live demo](https://codesandbox.io/s/react-leaflet-fullscreen-v4-74kd9d) 8 | 9 | ### Usage example 10 | ```js 11 | import React from "react"; 12 | import { render } from "react-dom"; 13 | import { MapContainer, TileLayer } from "react-leaflet"; 14 | import { FullscreenControl } from "react-leaflet-fullscreen"; 15 | import "react-leaflet-fullscreen/styles.css"; 16 | 17 | const App = () => { 18 | return ( 19 |
20 | 21 | 25 | 26 | 27 |
28 | ); 29 | }; 30 | 31 | render(, document.getElementById("root")); 32 | ``` 33 | 34 | ### Component props 35 | Since it's based on [leaflet.fullscreen](https://github.com/brunob/leaflet.fullscreen) the properties set is just passed in leaflet.fullscreen as is. 36 | 37 | ```jsx 38 | // Position of the element. Default value is "topleft" 39 | position: 'topleft' | 'topright' | 'bottomright' | 'bottomleft' 40 | 41 | // Title of the button. Default value is "Full Screen" 42 | title: string, 43 | 44 | // Title of the button when fullscreen is on. Default value is "Exit Full Screen" 45 | titleCancel: string 46 | 47 | // Content of the button. Default values is null 48 | content: null | HTMLElement 49 | 50 | // Force seperate button to detach from zoom buttons. Default value if false 51 | forceSeparateButton: boolean, 52 | 53 | // force use of pseudo full screen even if full screen API is available. Default value is false 54 | forcePseudoFullscreen: boolean, 55 | ``` 56 | --------------------------------------------------------------------------------