From 093bb12dc3b0509ff2e9a16574ac849fc20ab094 Mon Sep 17 00:00:00 2001
From: moinabyssinia <michaelg.tadesse@gmail.com>
Date: Wed, 16 Jun 2021 16:51:26 -0400
Subject: [PATCH] added full screen option

---
 index.html     |  5 +++++
 webmap2Maps.js | 16 ++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/index.html b/index.html
index 8dc9681..9f17256 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,11 @@
   <!-- <script src="https://labs.easyblog.it/maps/leaflet-search/src/leaflet-search.js"></script>
   <link rel="stylesheet" type="text/css" href="leaflet-search.css"> -->
 
+  <!-- adding leaflet full screen option -->
+  <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
+  <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
+
+
   <!-- css -->
   <link rel="stylesheet" href="./leaflet/leaflet.css" />
   <link rel="stylesheet" type="text/css" href="webmap.css">
diff --git a/webmap2Maps.js b/webmap2Maps.js
index e20e983..e2b4f55 100644
--- a/webmap2Maps.js
+++ b/webmap2Maps.js
@@ -41,6 +41,22 @@ const satellite = L.tileLayer(mUrl1, {attribution: mAttr1}),
 
 L.control.layers(baseLayers).addTo(map);
 
+// full screen option
+map.addControl(new L.Control.Fullscreen());
+
+map.isFullscreen() // Is the map fullscreen?
+map.toggleFullscreen() // Either go fullscreen, or cancel the existing fullscreen.
+
+// `fullscreenchange` Event that's fired when entering or exiting fullscreen.
+map.on('fullscreenchange', function () {
+    if (map.isFullscreen()) {
+        console.log('entered fullscreen');
+    } else {
+        console.log('exited fullscreen');
+    }
+});
+
+
 
   // custom zoom bar control that includes a Zoom Home function
 L.Control.zoomHome = L.Control.extend({