zendalona · SahilRakhaiya05 · Mar 16, 2025 · Mar 16, 2025 · Mar 16, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,8 @@
 <html lang="en">
 
 <head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <link rel="stylesheet" href="/public/styles.css" />
   <link href='https://fonts.googleapis.com/css?family=Kumbh Sans' rel='stylesheet'>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
@@ -33,10 +35,10 @@
     </div>
     <div class="header-icons">
       <button title="Help" id="help-btn" tabindex="0"
-        aria-label="select for read user manual" onclick="window.open('/src/pages/user-guide/index.html', '_blank');"
+        aria-label="select for read user manual"
         style="cursor: pointer;">
-    Help <i class="fa fa-question-circle" aria-hidden="true"></i>
-</button>
+        Help <i class="fa fa-question-circle" aria-hidden="true"></i>
+      </button>
     </div>
   </div>
 </header>
@@ -67,6 +69,7 @@
     <div id="layers-dropdown" class="dropdown-content">
       <button title="geographical-layer" aria-label="geographical-layer" id="geographical-layer">Geographical</button>
       <button title="political-layer" aria-label="political-layer" id="political-layer">Political</button>
+      <button title="satellite-layer" aria-label="satellite-layer" id="satellite-layer">Satellite</button>
     </div>
     <button class="fa fa-location-arrow" id="locateme" title="Locate me"
       aria-label="Locate your location on map"></button>
@@ -125,6 +128,18 @@ <h1>Find Distance</h1>
 
   <div tabindex="0" aria-label="focused on map. use arrow keys to navigate" id="map"></div>
 
+  <div id="help-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="help-modal-title" style="display: none;">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 id="help-modal-title">World-Map-Explorer – User Manual</h2>
+        <button class="close-modal" aria-label="Close help manual">&times;</button>
+      </div>
+      <div class="modal-body">
+        <iframe id="help-content" src="/src/pages/user-guide/index.html" title="User Manual" loading="lazy" sandbox="allow-same-origin allow-scripts"></iframe>
+      </div>
+    </div>
+  </div>
+
 </body>
 <footer>
   <span id="status-bar"></span>

diff --git a/public/styles.css b/public/styles.css
@@ -127,18 +127,37 @@ header button{
     height: calc(100vh - 22px);
 }
 #infoBox {
-  position: absolute; /* Position it in the corner */
+  position: absolute;
   bottom: 50px;
   left: 15px;
   color: white;
-  background-color: #6f0e0edb;
+  background-color: rgba(111, 14, 14, 0.95);
   border: 1px solid black;
-  padding: 10px;
+  padding: 15px;
   border-radius: 5px;
-  z-index: 1000; /* Ensure it's on top of the map */
+  z-index: 1000;
   display: none;
-  line-height: 22px;
+  line-height: 24px;
+  font-size: 14px;
+  max-width: 300px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+#infoBox span {
+  display: inline-block;
+  margin-bottom: 4px;
+}
+
+#coordinates {
+  margin-top: 5px;
+  display: block;
 }
+
+#infoBox h3 {
+  margin: 10px 0 5px 0;
+  font-size: 16px;
+}
+
 #search-container {
     position: relative;
     top: 50px;
@@ -315,11 +334,9 @@ header button{
 }
 #layers-dropdown {
   display: none;
-    position: absolute;
-    margin-right: 378px;
-    margin-top: 60px;
-
-
+  position: absolute;
+  margin-right: 378px;
+  margin-top: 60px;
 }
 #layers-dropdown button {
   background-color: #000000b7;
@@ -334,6 +351,7 @@ header button{
   border-radius: 5px;
   cursor: pointer;
   font-size: 10px;
+  margin-bottom: 2px;
 }
 #geographical-layer{
  position: absolute; 
@@ -347,6 +365,11 @@ header button{
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
   padding-left: 50px;
 }
+#satellite-layer {
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  padding-left: 50px;
+  margin-top: 52px;
+}
 
 .dist-input{
   margin-left: 7px;
@@ -461,4 +484,75 @@ footer {
   align-items: right;
   float: right;
   margin-left: 10px;
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 9999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 2% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 90%;
+  max-width: 1200px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  flex-shrink: 0;
+}
+
+.modal-header h2 {
+  margin: 0;
+  color: #2c3e50;
+}
+
+.close-modal {
+  color: #aaa;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0 5px;
+}
+
+.close-modal:hover,
+.close-modal:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.modal-body {
+  flex: 1;
+  overflow: hidden;
+}
+
+.modal-body iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.modal.show {
+  display: block;
 }
diff --git a/src/components/tile-layer.js b/src/components/tile-layer.js
@@ -26,3 +26,14 @@ export let tileLayerGeographical = L.tileLayer(
     tabindex: 0,
   }
 );
+
+export let tileLayerSatellite = L.tileLayer(
+  'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+  {
+    maxZoom: 19,
+    attribution:
+      'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
+    noWrap: true,
+    tabindex: 0,
+  }
+);
diff --git a/src/layout/add-listeners-to-ui.js b/src/layout/add-listeners-to-ui.js
@@ -4,7 +4,7 @@
  * See the LICENSE file in the root directory for more information.
  */
 
-import { tileLayerGeographical, tileLayerPolitical } from '../components/tile-layer.js';
+import { tileLayerGeographical, tileLayerPolitical, tileLayerSatellite } from '../components/tile-layer.js';
 import { cancelShowPlaceDetails, geoLayer } from '../services/fetch-place.js';
 import { onSubmitonMainSearchBar } from '../components/Search/search.js';
 import { detailsCloseButton } from '../utils/dom-elements.js';
@@ -20,6 +20,7 @@ let layersDropdown = document.getElementById('layers-dropdown'); //gets the laye
 
 let geographicalLayerBtn = document.getElementById("geographical-layer"); //gets the geographical layer button element
 let politicalLayerBtn = document.getElementById("political-layer"); //gets the political layer button element
+let satelliteLayerBtn = document.getElementById("satellite-layer"); //gets the satellite layer button element
 
 let locationArrow = document
   .getElementById('controls-box')
@@ -77,16 +78,26 @@ detailsCloseButton.addEventListener('click', function () {
   geographicalLayerBtn.addEventListener("click", function () {
     // Add your logic to switch to the geographical layer
     layersDropdown.style.display = "none"; // Hide dropdown
-    tileLayerPolitical.remove();
-    tileLayerGeographical.addTo(map);
+    map.removeLayer(tileLayerPolitical);
+    map.removeLayer(tileLayerSatellite);
+    map.addLayer(tileLayerGeographical);
     notifySreenReader("Switched to geograhical map");
   });
   // Event listener for political layer
   politicalLayerBtn.addEventListener("click", function () {
     // Add your logic to switch to the political layer
     layersDropdown.style.display = "none"; // Hide dropdown
-    tileLayerGeographical.remove();
-    tileLayerPolitical.addTo(map);
+    map.removeLayer(tileLayerGeographical);
+    map.removeLayer(tileLayerSatellite);
+    map.addLayer(tileLayerPolitical);
     notifySreenReader("Switched to political map");
   });
+
+  satelliteLayerBtn.addEventListener("click", function () {
+    map.removeLayer(tileLayerGeographical);
+    map.removeLayer(tileLayerPolitical);
+    map.addLayer(tileLayerSatellite);
+    layersDropdown.style.display = "none";
+    notifySreenReader("Switched to satellite map");
+  });
 }
diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,3 @@
-
 /*
  * Copyright (c) 2023-25 Zendalona
  * This software is licensed under the GPL-3.0 License.
@@ -12,7 +11,42 @@ import { addDisclaimer } from "./layout/disclaimer.js";
 import { detailsCloseButton, distanceBox, distanceIcon, input } from "./utils/dom-elements.js";
 import { lockTabKey } from "./utils/keydown-helpers.js";
 import { closeSound, successSound } from "./utils/sounds.js";
-let marker
+let marker;
+
+// Help modal functionality
+const helpModal = document.getElementById('help-modal');
+const helpBtn = document.getElementById('help-btn');
+const closeModalBtn = document.querySelector('.close-modal');
+
+helpBtn.addEventListener('click', () => {
+  helpModal.style.display = 'block';
+  helpModal.classList.add('show');
+  successSound.play();
+  document.addEventListener('keydown', handleModalKeydown);
+});
+
+closeModalBtn.addEventListener('click', closeHelpModal);
+
+function closeHelpModal() {
+  helpModal.style.display = 'none';
+  helpModal.classList.remove('show');
+  closeSound.play();
+  document.removeEventListener('keydown', handleModalKeydown);
+}
+
+function handleModalKeydown(event) {
+  if (event.key === 'Escape') {
+    closeHelpModal();
+  }
+}
+
+// Close modal if clicked outside
+helpModal.addEventListener('click', (event) => {
+  if (event.target === helpModal) {
+    closeHelpModal();
+  }
+});
+
 addDisclaimer() // Add a disclaimer to the UI
 
 fetch('https://ipinfo.io/json') //fetching the location of the user and setting the map to that location, if failed then setting it to the default location
@@ -22,9 +56,9 @@ fetch('https://ipinfo.io/json') //fetching the location of the user and setting
       map.setView([lat, lon], 7)
   })
   .catch(error => {
-map.setView([10.16,76.64],7)
+    map.setView([10.16,76.64],7)
   }).finally(()=>{
-    window.marker = new Marker(map.getCenter()).addTo(map)
+    marker = new Marker(map.getCenter()).addTo(map)
   })
 document.addEventListener('keydown',handleKeyDownOnDocument) // Initialize event listeners for key shortcuts on the document, general any time shortcuts
 addListenerstoUI() // Initialize event listeners for the UI elements on the page