Draft map with Leaflet (inverted logic...)

js/main.js

@@ -1,5 +1,6 @@
+import Map from "./map.js";
 /*
-	Main js entry for template ATON web-app
+	Main js entry for ATON web-app
 
 ===============================================*/
 // Realize our app
@@ -11,10 +12,13 @@ const material = {
 };
 
 APP.showEdges = function(object) {
+    const edgeMaterial = new THREE.MeshBasicMaterial({color: "#333"});
     if (object.isMesh) {
-        let edges = new THREE.EdgesGeometry(child.geometry, 45);
+        let edges = new THREE.EdgesGeometry(object.geometry, 45);
         let line = new THREE.LineSegments(edges, edgeMaterial);
-        child.add(line);
+        object.add(line);
+
+        console.log(object);
     }
 }
 
@@ -25,10 +29,24 @@ APP.toggleSettingsPanel = function(id) {
     const btn = document.querySelector(`#${id}`);
 
     btn.addEventListener('click', () => {
-        ATON.UI.showSidePanel({header: 'Settings'});
+        ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
     })
 }
 
+/**
+ * @param {String} id - The back-to-map button id
+ */
+APP.toggleScene = function(id) {
+    const btn = document.querySelector(`#${id}`);
+    const scene = document.querySelector('canvas');
+
+    btn.addEventListener('click', () => {
+        scene.classList.toggle('d-none');
+        document.querySelector('#map').classList.toggle('d-none');
+        Map.init('map');
+    });
+}
+
 // You can require here flares (plugins) if needed by the app
 //APP.requireFlares(["myFlare","anotherFlare"]);
 
@@ -44,13 +62,19 @@ APP.setup = ()=>{
 
     // Open settings side panel when clicking on btn
     APP.toggleSettingsPanel('settings');
+    APP.toggleScene('back');
 
     // All assets for this app are stored here
     ATON.setPathCollection('./assets/');
+    // Light direction should be dynamic / user-defined
     ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
 
+    const rootUI = ATON.getRootUI();
+    rootUI.traverse(object => APP.showEdges(object));
+
 	// Load 3D model
 	let mainNode = ATON.createSceneNode("teatro").load("teatro_san_salvador_20250926.gltf");
+    // Panorama should be configurable and / or user-defined
     const pano = "defsky-grass.jpg";
     ATON.setMainPanorama(pano);
     mainNode.setMaterial(new THREE.MeshPhongMaterial(material));

js/map.js

@@ -0,0 +1,24 @@
+// Global Leaflet
+const Map = {};
+
+Map.init = function(mapContainerId) {
+    let baseMap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxNativeZoom : 15,
+        maxZoom: 15,
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    });
+
+    // Mappa centrata su Roma...
+    let map = L.map(mapContainerId, {
+        //attributionControl: false,
+        minZoom: 5,
+    }).setView([41.9028, 12.4964], 6);
+
+    baseMap.addTo(map);
+
+    L.marker([45.4363, 12.3352]).addTo(map)
+        .bindPopup('Teatro San Salvador, Venezia')
+        .openPopup();
+}
+
+export default Map;