add a module to handle the full-screen mode of the map container for …

…different desktop browsers

js/fullScreen.js

@@ -0,0 +1,56 @@
+/* Copyright (c) 2023-2024 Serhii I. Myshko
+https://github.com/sergeiown/Map_with_Marker_Clusters/blob/main/LICENSE */
+
+export function toggleFullScreen(element) {
+    function handleFullScreenRequest(promise) {
+        promise
+            .then(() => {
+                console.log('Entered full-screen mode.');
+            })
+            .catch((err) => {
+                console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+            });
+    }
+
+    function handleFullScreenExit(promise) {
+        promise
+            .then(() => {
+                console.log('Exited full-screen mode.');
+            })
+            .catch((err) => {
+                console.error(`Error attempting to disable full-screen mode: ${err.message} (${err.name})`);
+            });
+    }
+
+    if (!document.fullscreenElement) {
+        if (element.requestFullscreen) {
+            handleFullScreenRequest(element.requestFullscreen());
+        } else if (element.mozRequestFullScreen) {
+            // Firefox
+            handleFullScreenRequest(element.mozRequestFullScreen());
+        } else if (element.webkitRequestFullscreen) {
+            // Chrome, Safari, and Opera
+            handleFullScreenRequest(element.webkitRequestFullscreen());
+        } else if (element.msRequestFullscreen) {
+            // IE/Edge
+            handleFullScreenRequest(element.msRequestFullscreen());
+        } else {
+            console.error('Fullscreen API is not supported by this browser.');
+        }
+    } else {
+        if (document.exitFullscreen) {
+            handleFullScreenExit(document.exitFullscreen());
+        } else if (document.mozCancelFullScreen) {
+            // Firefox
+            handleFullScreenExit(document.mozCancelFullScreen());
+        } else if (document.webkitExitFullscreen) {
+            // Chrome, Safari, and Opera
+            handleFullScreenExit(document.webkitExitFullscreen());
+        } else if (document.msExitFullscreen) {
+            // IE/Edge
+            handleFullScreenExit(document.msExitFullscreen());
+        } else {
+            console.error('Fullscreen API is not supported by this browser.');
+        }
+    }
+}

js/map.js

@@ -5,6 +5,7 @@ import * as layers from '../js/layers.js';
 import { isMobile } from '../js/mobileDetector.js';
 import { createControlButton } from '../js/buttons.js';
 import { addLegend } from '../js/legend.js';
+import { toggleFullScreen } from '../js/fullScreen.js';
 import { updateControlStyle, updateLayer, gradualOpacityAnimation } from '../js/mapUtils.js';
 
 export function initializeMap() {
@@ -25,6 +26,19 @@ export function initializeMap() {
     });
     map.addControl(new centerButton());
 
+    if (!isMobile) {
+        const fullScreenButton = createControlButton({
+            position: 'topleft',
+            title: 'Set full screen mode',
+            imageSrc: './markers/full_screen.png',
+            onClick: function () {
+                const mapContainer = document.getElementById('map');
+                toggleFullScreen(mapContainer);
+            },
+        });
+        map.addControl(new fullScreenButton());
+    }
+
     const frontButton = createControlButton({
         position: 'bottomleft',
         title: 'Front line map',