Map / scene transition logic + config

js/map.js

@@ -1,24 +1,36 @@
-// Global Leaflet
+// Global Leaflet and ATON
+
+import {config} from '../config.js';
+import Scene from './scene.js';
+
 const Map = {};
 
 Map.init = function(mapContainerId) {
     let baseMap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxNativeZoom : 15,
-        maxZoom: 15,
+        maxNativeZoom : config.map.maxZoom,
+        maxZoom: config.map.maxZoom,
         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);
+        minZoom: config.map.minZoom
+    }).setView(config.map.center, config.map.initialZoom);
 
     baseMap.addTo(map);
 
-    L.marker([45.4363, 12.3352]).addTo(map)
-        .bindPopup('Teatro San Salvador, Venezia')
-        .openPopup();
+    config.markers.forEach(marker => {
+        L.marker(marker.coords).addTo(map)
+            .bindPopup(marker.popup)
+            .openPopup();
+
+        let btn = document.querySelector(`#${marker.id}`);
+        btn.addEventListener('click', () => {
+            Scene.openScene(marker);
+            map.getContainer().classList.toggle('d-none');
+        });
+    });
 }
 
 export default Map;