2026-04-13-4

apps/web/public/map-demo.html

@@ -281,6 +281,21 @@
   <!-- STATUS -->
   <div id="status"></div>
 
+  <!-- OPTIONS -->
+  <div style="margin-top: 24px; border-top: 1px solid rgba(0,0,0,0.06); padding-top: 20px;">
+    <div style="font-size: 14px; font-weight: 800; margin-bottom: 15px; color: #18100A;">🛡️ خيارات / Options</div>
+    
+    <label style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px; cursor: pointer; font-size: 13px;">
+      <input type="checkbox" id="toggle-3d" checked onchange="updateLayers()" style="accent-color: var(--primary); width: 16px; height: 16px;">
+      <span>مباني ثلاثية الأبعاد / 3D Buildings</span>
+    </label>
+
+    <label style="display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px;">
+      <input type="checkbox" id="toggle-pois" checked onchange="updateLayers()" style="accent-color: var(--primary); width: 16px; height: 16px;">
+      <span>عرض المعالم / Show POIs</span>
+    </label>
+  </div>
+
   <!-- DB NAMES INDICATOR -->
   <div id="db-status">
     <div class="dot-gold"></div>
@@ -325,8 +340,8 @@
   /* ───────────────────────────────────────────
      CONFIG
   ─────────────────────────────────────────── */
-  const API_BASE = 'https://map-saas.intaleqapp.com';
-  const API_KEY  = 'intaleq_secret_2026';
+  const API_BASE = window.location.origin; // Dynamically use the current host
+  const API_KEY  = 'zP9vL5mK2nQ8xR7jT4wS1yB6hG3fV0cX';
   const HEADERS  = { 'x-api-key': API_KEY };
 
   const ROUTES = {
@@ -650,6 +665,27 @@
       info.textContent = '❌ خطأ في الاتصال بالسيرفر.';
     }
   }
+
+  /* ───────────────────────────────────────────
+     LAYER CONTROLS
+  ─────────────────────────────────────────── */
+  function updateLayers() {
+    const show3D   = document.getElementById('toggle-3d').checked;
+    const showPOIs = document.getElementById('toggle-pois').checked;
+
+    if (map.getLayer('3d-buildings')) {
+      map.setLayoutProperty('3d-buildings', 'visibility', show3D ? 'visible' : 'none');
+    }
+
+    if (map.getLayer('intaleq-db-label')) {
+      map.setLayoutProperty('intaleq-db-label', 'visibility', showPOIs ? 'visible' : 'none');
+    }
+
+    // Also toggle the dynamic POIs icons layer if exists
+    if (map.getLayer('intaleq_pois')) {
+       map.setLayoutProperty('intaleq_pois', 'visibility', showPOIs ? 'visible' : 'none');
+    }
+  }
 </script>
 </body>
 </html>