DBApp icon added to map

Now you can go to the DBApp with the icon.

Apps/3DHeritageMapApp.html

@@ -53,6 +53,8 @@ <h2>Options</h2>
     <!-- Button to open options box -->
     <button id="openOptionsBox"><img src="Images/menu.png" alt="menuicon"></button>
 
+    <a href="../DBApp/dbapp.html"><button id="dataBaseButton"><img src="Images/database.png" alt="dataBaseIcon"></button></a>
+
     <!-- Cesium Container -->
     <div id="cesiumContainer"></div>
 

Apps/3DHeritageScripts.js

@@ -392,12 +392,18 @@ document.getElementById('openInfoBox').onclick = () => {
 document.getElementById('closeOptionsBox').onclick = () => {
     document.getElementById('optionsBox').style.display = 'none';
     document.getElementById('openOptionsBox').style.display = 'block';
+
+    // Show the dataBaseButton when infoBox is closed
+    document.getElementById('dataBaseButton').style.display = 'block';
 };
 
 // Add event listener for the open options box button
 document.getElementById('openOptionsBox').onclick = () => {
     document.getElementById('optionsBox').style.display = 'block';
     document.getElementById('openOptionsBox').style.display = 'none';
+
+     // Hide the dataBaseButton when infoBox is opened
+     document.getElementById('dataBaseButton').style.display = 'none';
 };
 
 

Apps/3DHeritageStyles.css

@@ -66,6 +66,28 @@
      margin-bottom: 10px;
  }
 
+ #dataBaseButton {
+    position: absolute;
+     top: 60px;
+     left: 10px;
+     cursor: pointer;
+     background-color: rgba(42, 42, 42, 0.8);
+     border: none;
+     color: white;
+     border-radius: 4px;
+     padding: 5px 5px;
+     z-index: 1;
+}
+
+#dataBaseButton:hover {
+    background-color: rgb(37, 150, 190);
+     border-style: solid;
+     border: 2px;
+     border-color: white;
+}
+
+
+
  #infoBox {
      position: absolute;
      top: 50px;