added full screen option

moinabyssinia · Jun 16, 2021 · 093bb12 · 093bb12
1 parent 131d844
commit 093bb12
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git 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
@@ -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({