2026-04-15-4

apps/dashboard/js/playground.js

@@ -14,6 +14,13 @@ const playground = {
         playground.renderKeySelect(keys);
         playground.bindEvents();
         
+        // Watch for section changes to trigger resize
+        window.addEventListener('hashchange', () => {
+            if (window.location.hash === '#playground' && playground.map) {
+                setTimeout(() => playground.map.resize(), 100);
+            }
+        });
+        
         if (keys.length > 0) {
             playground.selectedKey = keys[0].key;
             playground.loadMap();
@@ -53,30 +60,55 @@ const playground = {
         try {
             // Set RTL Text Plugin
             if (maplibregl.getRTLTextPluginStatus() === 'unavailable') {
+                console.log('🌐 Loading MapLibre RTL Plugin...');
                 maplibregl.setRTLTextPlugin(
-                    'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.js',
+                    'js/plugins/mapbox-gl-rtl-text.js',
                     null,
                     true
                 );
             }
 
+            console.log(`🛰️ Fetching Map Style for theme: ${playground.currentStyle}...`);
             const styleUrl = `/api/maps/style.json?api_key=${playground.selectedKey}&theme=${playground.currentStyle}`;
             const res = await fetch(styleUrl);
+            
+            if (!res.ok) {
+                throw new Error(`Style fetch failed with status: ${res.status}`);
+            }
+
             const styleData = await res.json();
+            console.log('🎨 Style fetched successfully, initializing MapLibre...');
 
             playground.map = new maplibregl.Map({
                 container: 'map',
                 style: styleData,
                 center: [35.91, 31.95], // Amman, Jordan
                 zoom: 12,
-                attributionControl: false
+                attributionControl: false,
+                trackResize: true
             });
 
             playground.map.addControl(new maplibregl.NavigationControl(), 'top-right');
             
             playground.map.on('load', () => {
-                console.log('Map loaded!');
-                playground.map.resize();
+                console.log('✅ Map engine ready and tiles loading!');
+                // Wait slightly for container animation to finish
+                setTimeout(() => {
+                    playground.map.resize();
+                    const container = document.getElementById('map');
+                    if (container && container.offsetWidth > 0) {
+                        console.log('📏 Map container size verified:', container.offsetWidth, 'x', container.offsetHeight);
+                    } else {
+                        console.warn('⚠️ Map container has 0 width. Potential visibility issue.');
+                    }
+                }, 500);
+            });
+
+            playground.map.on('error', (e) => {
+                console.error('❌ MapLibre Error Detail:', e.error || e);
+                if (e.error && e.error.message.includes('Style')) {
+                    alert('Map Style Error: Please verify your API Key and Network connection.');
+                }
             });
 
         } catch (error) {