storymapping added

Apps/3DHeritageMapApp.html

@@ -50,6 +50,13 @@ <h2>Options</h2>
         </label>
         <button id="closeOptionsBox">X</button>
     </div>
+
+    <!-- StoryMap Box -->
+<div id="storyMapBox">
+    <h2>Story Mapping</h2>
+    <p>This is a placeholder for your story mapping content.</p>
+</div>
+
     <!-- Button to open options box -->
     <button id="openOptionsBox"><img src="Images/menu.png" alt="menuicon"></button>
 

Apps/3DHeritageScripts.js

@@ -14,7 +14,6 @@ const viewer = new Cesium.Viewer("cesiumContainer", {
     sceneModePicker: false // Disable scene mode picker
 });
 
-
 viewer.camera.setView({
     destination: cologneLocation,
     orientation: {
@@ -24,20 +23,6 @@ viewer.camera.setView({
     }
 });
 
-
-// slower
-/*
-viewer.camera.flyTo({
-    destination: cologneLocation,
-    orientation: {
-        heading: Cesium.Math.toRadians(0.0), // The direction of the camera
-        pitch: Cesium.Math.toRadians(-45.0),
-        roll: 0.0
-    },
-    duration: 3 // animation duration
-});
-*/
-
 // Enable 3D lighting
 viewer.scene.globe.enableLighting = true;
 
@@ -95,25 +80,6 @@ function updateEntities(radioId) {
     });
 }
 
-
-
-// Code for going Cologne when the home button is clicked
-viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
-    e.cancel = true; // Cancel the default action
-    viewer.camera.flyTo({
-        destination: cologneLocation,
-        orientation: {
-            heading: Cesium.Math.toRadians(0.0), // The direction of the camera
-            pitch: Cesium.Math.toRadians(-45.0),
-            roll: 0.0
-        },
-        duration: 3 // animation duration
-    });
-});
-
-
-
-
 /**
  * Function to load GeoJSON data and add it to the viewer. *
  */
@@ -128,6 +94,10 @@ async function loadGeoJson() {
 
         const entities = dataSource.entities.values;
 
+        // Story Map Box element
+        const storyMapBox = document.getElementById('storyMapBox');
+        storyMapBox.innerHTML = '<h2>Story Mapping</h2>'; // Reset the content
+
         entities.forEach(entity => {
             if (entity.position) {
                 const name = entity.properties.kurzbezeichnung ? entity.properties.kurzbezeichnung.getValue() : '';
@@ -152,6 +122,40 @@ async function loadGeoJson() {
                     pixelOffset: new Cesium.Cartesian2(0, -32),
                     heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                 });
+
+                // If the viewer3d property is "ja", append its kurzbezeichnung to the story map box
+                if (entity.properties.viewer3d && entity.properties.viewer3d.getValue() === 'ja') {
+                    const kurzbezeichnung = entity.properties.kurzbezeichnung ? entity.properties.kurzbezeichnung.getValue() : 'No name available';
+                    const pElement = document.createElement('p');
+                    pElement.textContent = kurzbezeichnung;
+
+                    // Add click event to each name that moves the camera to the entity's position
+                    pElement.addEventListener('click', () => {
+                        const markerPosition = entity.position.getValue(Cesium.JulianDate.now());
+
+                        // Height offset to position the camera above the marker
+                        const heightOffset = 200; // Marker'ın üstünde olmak için
+
+                        // Position the camera behind the marker
+                        const cameraPosition = new Cesium.Cartesian3(
+                            markerPosition.x + 400, // Move in the X direction
+                            markerPosition.y + 50,  // Move in the Y direction
+                            markerPosition.z + heightOffset // Move up
+                        );
+
+                        viewer.camera.flyTo({
+                            destination: cameraPosition,
+                            orientation: {
+                                heading: Cesium.Math.toRadians(0.0), // Camera direction
+                                pitch: Cesium.Math.toRadians(-60.0), // Downward viewing angle
+                                roll: 0.0
+                            },
+                            duration: 3 // Animation duration
+                        });
+                    });
+
+                    storyMapBox.appendChild(pElement); // Add to Story Map Box
+                }
             }
         });
 
@@ -168,6 +172,7 @@ async function loadGeoJson() {
 }
 
 
+
 // Load GeoJSON data
 // Wait till scene is ready using scene.globe.tileLoadProgressEvent
 viewer.scene.globe.tileLoadProgressEvent.addEventListener((count) => {
@@ -393,20 +398,27 @@ document.getElementById('closeOptionsBox').onclick = () => {
     document.getElementById('optionsBox').style.display = 'none';
     document.getElementById('openOptionsBox').style.display = 'block';
 
-    // Show the dataBaseButton when infoBox is closed
+    // Show the dataBaseButton when optionsBox is closed
     document.getElementById('dataBaseButton').style.display = 'block';
+
+    // Hide the storyMapBox when optionsBox is closed
+    document.getElementById('storyMapBox').style.display = 'none';
 };
 
 // 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';
+    // Hide the dataBaseButton when optionsBox is opened
+    document.getElementById('dataBaseButton').style.display = 'none';
+
+    // Show the storyMapBox when optionsBox is opened
+    document.getElementById('storyMapBox').style.display = 'block';
 };
 
 
+
 // Loading icon element
 const loadingScreen = document.getElementById('loadingScreen');
 

Apps/3DHeritageStyles.css

@@ -1,4 +1,3 @@
- /* HTML, body ve Cesium Container'ı tam ekran yap */
  html,
  body,
  #cesiumContainer {
@@ -9,7 +8,6 @@
      overflow: hidden;
  }
 
- /* Seçenek kutusu stil tanımlamaları */
  #optionsBox {
      position: absolute;
      top: 10px;
@@ -147,6 +145,22 @@
      border-color: white;
  }
 
+ #storyMapBox {
+    position: absolute;
+    top: 250px; 
+    left: 10px;
+    width: 220px;
+    background-color: rgba(42, 42, 42, 0.8);
+    padding: 10px;
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+    color: white;
+    display: none; 
+    z-index: 1;
+    border-radius: 8px;
+}
+
+
+
  #loadingScreen {
     position: fixed;
     top: 0;