Add SSGP + dynamic state

config.js

@@ -5,6 +5,13 @@ const theater1Popup = `
     </div>
 `;
 
+const theater2Popup = `
+    <div class="text-center">
+        <h1 class="fs-4">Teatro Santi Giovanni e Paolo, Venezia</h1>
+        <button type="button" class="btn btn-dark" id="ssgp">Apri scena 3D</button>
+    </div>
+`;
+
 const audioBtn1 = `
     <button type="button" class="text-left btn aton-btn fs-6 mx-2" data-bs-toggle="modal" data-bs-target="#audio1">
         <i class="bi bi-play-btn me-2"></i> Esempio audio (<em>Che fiero costume</em>)
@@ -13,7 +20,7 @@ const audioBtn1 = `
 
 export const config = {
     scene : {
-        initialExposure: 0.6,
+        initialExposure: 0.7,
         autoLP: true,
         clipping: {
             defaultPoint: [
@@ -34,12 +41,20 @@ export const config = {
             coords: [45.4363, 12.3352],
             model: "teatro_san_salvador_20250926.gltf",
             pano: "pano/defsky-grass.jpg",
+        },
+        {
+            id : "ssgp",
+            label : "Teatro Santi Giovanni e Paolo, Venezia",
+            popup: theater2Popup,
+            coords: [45.4401, 12.3408],
+            model: "SSGP.glb",
+            pano: "pano/defsky-grass.jpg",
         }
     ],
     map : {
         center: [43.570833, 12.140278],
-        initialZoom : 7,
+        initialZoom : 8,
         minZoom : 6,
-        maxZoom : 15
+        maxZoom : 16
     }
-}
+}

index.html

@@ -133,7 +133,7 @@
                 L'aria "Che fiero costume" bla bla...
             </p>
             <p>
-                Un po' di elucubrazioni sull'opera lirica nel barocco ecc...
+                Lorem ipsum dolor...
             </p>
             <h2 class="fs-5 mt-4 text-center font-bold">Ascolta</h2>
             <audio class="w-100 p-2 mt-1" src="./assets/bt_TracciaAudio_ Che fiero costume.mp3" controls></audio>

js/map.js

@@ -23,7 +23,10 @@ Map.init = function(mapContainerId) {
 
     baseMap.addTo(map);
 
+    //const markerIcon = L.divIcon({className: 'bi bi-bank text-large'});
+
     config.markers.forEach(marker => {
+        debugger;
         const popup = this.domParser.parseFromString(marker.popup, 'text/html')
             .querySelector('div');
         popup.querySelector('button').onclick = () => {
@@ -31,9 +34,12 @@ Map.init = function(mapContainerId) {
             map.getContainer().classList.toggle('d-none');
         };
 
-        L.marker(marker.coords).addTo(map)
-            .bindPopup(popup)
-            .openPopup();
+        L.marker(marker.coords,).addTo(map)
+            .bindPopup(popup, {autoClose:false, /*closeOnClick:false*/})
+            .togglePopup();
+
+        // Update state
+        AppState.scenes.push({id: marker.id, active: false});
         
     });
 

js/state.js

@@ -1,12 +1,7 @@
 export const AppState = {
     // The root scene object
     root: null,
-    scenes : [
-        {
-            id : "salvador",
-            active : false
-        }
-    ],
+    scenes : [],
     ambientOcclusion : true,
     shadows : true,
     lightProbe : false,