datastake-daf 0.6.281 → 0.6.282

package/dist/components/index.js

@@ -20959,15 +20959,29 @@ const SimpleGlobe = _ref => {
     // Set Mapbox access token
     mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
 
-    // Create map with custom Straatos style
-    map.current = new mapboxgl.Map({
-      container: mapContainer.current,
-      style: 'mapbox://styles/pietragottardo/cm9tt9zfi00d101pg1vdx26si',
-      center: [0, 0],
-      zoom: mapConfig.maxZoom || 3,
-      projection: 'globe',
-      attributionControl: false
-    });
+    // Create map with custom Straatos style (with fallback)
+    try {
+      map.current = new mapboxgl.Map({
+        container: mapContainer.current,
+        style: 'mapbox://styles/pietragottardo/cm9tt9zfi00d101pg1vdx26si',
+        center: [0, 0],
+        zoom: mapConfig.maxZoom || 3,
+        projection: 'globe',
+        attributionControl: false
+      });
+      console.log('🗺️ [SIMPLE GLOBE] Custom style loaded successfully');
+    } catch (error) {
+      console.warn('⚠️ [SIMPLE GLOBE] Custom style failed, using fallback:', error);
+      // Fallback to standard style
+      map.current = new mapboxgl.Map({
+        container: mapContainer.current,
+        style: 'mapbox://styles/mapbox/satellite-v9',
+        center: [0, 0],
+        zoom: mapConfig.maxZoom || 3,
+        projection: 'globe',
+        attributionControl: false
+      });
+    }
 
     // Add markers when map loads
     map.current.on('load', () => {
@@ -21019,6 +21033,12 @@ const SimpleGlobe = _ref => {
         el.style.display = 'flex';
         el.style.alignItems = 'center';
         el.style.justifyContent = 'center';
+        // Ensure proper positioning and prevent CSS interference
+        el.style.position = 'relative';
+        el.style.left = 'auto';
+        el.style.top = 'auto';
+        el.style.transform = 'none';
+        el.style.zIndex = '1000';
         if (type === "location") {
           // Location marker - SVG map pin style
           el.style.width = '28px';
@@ -21074,19 +21094,31 @@ const SimpleGlobe = _ref => {
           closeOnClick: false
         }).setHTML(popupContent);
 
-        // Ensure coordinates are valid numbers
+        // Ensure coordinates are valid numbers and in correct order
         const lng = Number(project.longitude);
         const lat = Number(project.latitude);
         console.log("\uD83D\uDCCD [SIMPLE GLOBE] Marker ".concat(index, " coordinates:"), {
-          lng,
-          lat
+          original: {
+            longitude: project.longitude,
+            latitude: project.latitude
+          },
+          processed: {
+            lng,
+            lat
+          },
+          project: project.name
         });
 
         // Validate coordinates
         if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
           console.error("\u274C [SIMPLE GLOBE] Invalid coordinates for project ".concat(index, ":"), {
             lng,
-            lat
+            lat,
+            original: {
+              longitude: project.longitude,
+              latitude: project.latitude
+            },
+            project: project.name
           });
           return;
         }
@@ -21095,14 +21127,28 @@ const SimpleGlobe = _ref => {
         bounds.extend([lng, lat]);
         hasValidCoordinates = true;
 
-        // Add marker to map with proper coordinate order [lng, lat]
-        new mapboxgl.Marker(el).setLngLat([lng, lat]).setPopup(popup).addTo(map.current);
+        // Create marker with explicit positioning
+        const marker = new mapboxgl.Marker({
+          element: el,
+          anchor: 'center'
+        }).setLngLat([lng, lat]).setPopup(popup).addTo(map.current);
 
         // Add click handler
         el.addEventListener('click', () => {
           console.log('📍 [SIMPLE GLOBE] Marker clicked:', project);
           onProjectClick(project);
         });
+
+        // Verify marker position after a short delay
+        setTimeout(() => {
+          const markerLngLat = marker.getLngLat();
+          console.log("\uD83D\uDD0D [SIMPLE GLOBE] Marker ".concat(index, " position verification:"), {
+            expected: [lng, lat],
+            actual: [markerLngLat.lng, markerLngLat.lat],
+            project: project.name,
+            match: Math.abs(markerLngLat.lng - lng) < 0.0001 && Math.abs(markerLngLat.lat - lat) < 0.0001
+          });
+        }, 100);
         console.log("\u2705 [SIMPLE GLOBE] Marker ".concat(index, " added at:"), [lng, lat]);
       });
 
@@ -21217,6 +21263,136 @@ const SimpleGlobe = _ref => {
   });
 };
 
+const SimpleGlobeTestDebug = _ref => {
+  let {
+    projects = []
+  } = _ref;
+  const mapContainer = React.useRef(null);
+  const map = React.useRef(null);
+  React.useEffect(() => {
+    if (map.current) return;
+    console.log('🧪 [DEBUG TEST] Creating minimal map...');
+
+    // Set Mapbox access token
+    mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
+
+    // Create minimal map
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: 'mapbox://styles/mapbox/satellite-v9',
+      center: [0, 0],
+      zoom: 2,
+      projection: 'globe'
+    });
+
+    // Add markers when map loads
+    map.current.on('load', () => {
+      console.log('🧪 [DEBUG TEST] Map loaded, adding test markers...');
+      projects.forEach((project, index) => {
+        console.log("\uD83E\uDDEA [DEBUG TEST] Processing project ".concat(index, ":"), project);
+
+        // Create simple marker
+        const el = document.createElement('div');
+        el.style.width = '20px';
+        el.style.height = '20px';
+        el.style.backgroundColor = '#FF0000';
+        el.style.borderRadius = '50%';
+        el.style.border = '2px solid white';
+        el.style.cursor = 'pointer';
+        el.style.boxShadow = '0px 3px 6px rgba(0,0,0,0.3)';
+
+        // Get coordinates
+        const lng = Number(project.longitude);
+        const lat = Number(project.latitude);
+        console.log("\uD83E\uDDEA [DEBUG TEST] Coordinates for ".concat(project.name, ":"), {
+          original: {
+            longitude: project.longitude,
+            latitude: project.latitude
+          },
+          processed: {
+            lng,
+            lat
+          },
+          valid: !isNaN(lng) && !isNaN(lat) && lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90
+        });
+        if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
+          console.error("\u274C [DEBUG TEST] Invalid coordinates for ".concat(project.name, ":"), {
+            lng,
+            lat
+          });
+          return;
+        }
+
+        // Create popup
+        const popup = new mapboxgl.Popup({
+          offset: 25
+        }).setHTML("\n            <div style=\"padding: 8px;\">\n              <h3 style=\"margin: 0 0 8px 0; font-size: 14px;\">".concat(project.name, "</h3>\n              <p style=\"margin: 0; font-size: 12px; color: #666;\">\n                Lat: ").concat(lat.toFixed(4), ", Lng: ").concat(lng.toFixed(4), "\n              </p>\n              <p style=\"margin: 4px 0 0 0; font-size: 12px;\">\n                ").concat(project.projectDescription || 'No description', "\n              </p>\n            </div>\n          "));
+
+        // Add marker with explicit positioning
+        const marker = new mapboxgl.Marker({
+          element: el,
+          anchor: 'center'
+        }).setLngLat([lng, lat]).setPopup(popup).addTo(map.current);
+
+        // Verify position after a delay
+        setTimeout(() => {
+          const markerLngLat = marker.getLngLat();
+          const positionMatch = Math.abs(markerLngLat.lng - lng) < 0.0001 && Math.abs(markerLngLat.lat - lat) < 0.0001;
+          console.log("\uD83D\uDD0D [DEBUG TEST] Position verification for ".concat(project.name, ":"), {
+            expected: [lng, lat],
+            actual: [markerLngLat.lng, markerLngLat.lat],
+            match: positionMatch,
+            difference: {
+              lng: Math.abs(markerLngLat.lng - lng),
+              lat: Math.abs(markerLngLat.lat - lat)
+            }
+          });
+          if (!positionMatch) {
+            console.error("\u274C [DEBUG TEST] Position mismatch for ".concat(project.name, "!"));
+          }
+        }, 200);
+        console.log("\u2705 [DEBUG TEST] Marker added for ".concat(project.name, " at:"), [lng, lat]);
+      });
+    });
+    return () => {
+      if (map.current) {
+        map.current.remove();
+        map.current = null;
+      }
+    };
+  }, [projects]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    style: {
+      width: '100%',
+      height: '600px',
+      border: '2px solid #ccc',
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: mapContainer,
+      style: {
+        width: '100%',
+        height: '100%',
+        position: 'relative'
+      }
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: {
+        position: 'absolute',
+        top: '10px',
+        left: '10px',
+        background: 'rgba(255,255,255,0.9)',
+        padding: '8px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        zIndex: 1000
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("strong", {
+        children: "Debug Test Map"
+      }), /*#__PURE__*/jsxRuntime.jsx("br", {}), "Projects: ", projects.length, /*#__PURE__*/jsxRuntime.jsx("br", {}), "Check console for position verification"]
+    })]
+  });
+};
+
 function WidgetPlaceholder(_ref) {
   let {
     icon = "",
@@ -62040,6 +62216,7 @@ exports.SettingsPopover = SettingsPopover;
 exports.Sidenav = Sidenav;
 exports.SidenavMenu = SidenavMenu;
 exports.SimpleGlobe = SimpleGlobe;
+exports.SimpleGlobeTestDebug = SimpleGlobeTestDebug;
 exports.StackChart = StackChart;
 exports.StakeholderMappings = index$1;
 exports.Steps = DAFSteps;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.281",
+	"version": "0.6.282",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/Globe/SimpleGlobe.jsx

@@ -47,15 +47,29 @@ const SimpleGlobe = ({
     // Set Mapbox access token
     mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
 
-    // Create map with custom Straatos style
-    map.current = new mapboxgl.Map({
-      container: mapContainer.current,
-      style: 'mapbox://styles/pietragottardo/cm9tt9zfi00d101pg1vdx26si',
-      center: [0, 0],
-      zoom: mapConfig.maxZoom || 3,
-      projection: 'globe',
-      attributionControl: false
-    });
+    // Create map with custom Straatos style (with fallback)
+    try {
+      map.current = new mapboxgl.Map({
+        container: mapContainer.current,
+        style: 'mapbox://styles/pietragottardo/cm9tt9zfi00d101pg1vdx26si',
+        center: [0, 0],
+        zoom: mapConfig.maxZoom || 3,
+        projection: 'globe',
+        attributionControl: false
+      });
+      console.log('🗺️ [SIMPLE GLOBE] Custom style loaded successfully');
+    } catch (error) {
+      console.warn('⚠️ [SIMPLE GLOBE] Custom style failed, using fallback:', error);
+      // Fallback to standard style
+      map.current = new mapboxgl.Map({
+        container: mapContainer.current,
+        style: 'mapbox://styles/mapbox/satellite-v9',
+        center: [0, 0],
+        zoom: mapConfig.maxZoom || 3,
+        projection: 'globe',
+        attributionControl: false
+      });
+    }
 
     // Add markers when map loads
     map.current.on('load', () => {
@@ -139,6 +153,12 @@ const SimpleGlobe = ({
         el.style.display = 'flex';
         el.style.alignItems = 'center';
         el.style.justifyContent = 'center';
+        // Ensure proper positioning and prevent CSS interference
+        el.style.position = 'relative';
+        el.style.left = 'auto';
+        el.style.top = 'auto';
+        el.style.transform = 'none';
+        el.style.zIndex = '1000';
         
         if (type === "location") {
           // Location marker - SVG map pin style
@@ -217,15 +237,23 @@ const SimpleGlobe = ({
           closeOnClick: false
         }).setHTML(popupContent);
 
-        // Ensure coordinates are valid numbers
+        // Ensure coordinates are valid numbers and in correct order
         const lng = Number(project.longitude);
         const lat = Number(project.latitude);
         
-        console.log(`📍 [SIMPLE GLOBE] Marker ${index} coordinates:`, { lng, lat });
+        console.log(`📍 [SIMPLE GLOBE] Marker ${index} coordinates:`, { 
+          original: { longitude: project.longitude, latitude: project.latitude },
+          processed: { lng, lat },
+          project: project.name 
+        });
         
         // Validate coordinates
         if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
-          console.error(`❌ [SIMPLE GLOBE] Invalid coordinates for project ${index}:`, { lng, lat });
+          console.error(`❌ [SIMPLE GLOBE] Invalid coordinates for project ${index}:`, { 
+            lng, lat, 
+            original: { longitude: project.longitude, latitude: project.latitude },
+            project: project.name 
+          });
           return;
         }
 
@@ -233,8 +261,11 @@ const SimpleGlobe = ({
         bounds.extend([lng, lat]);
         hasValidCoordinates = true;
 
-        // Add marker to map with proper coordinate order [lng, lat]
-        const marker = new mapboxgl.Marker(el)
+        // Create marker with explicit positioning
+        const marker = new mapboxgl.Marker({
+          element: el,
+          anchor: 'center'
+        })
           .setLngLat([lng, lat])
           .setPopup(popup)
           .addTo(map.current);
@@ -244,6 +275,17 @@ const SimpleGlobe = ({
           console.log('📍 [SIMPLE GLOBE] Marker clicked:', project);
           onProjectClick(project);
         });
+        
+        // Verify marker position after a short delay
+        setTimeout(() => {
+          const markerLngLat = marker.getLngLat();
+          console.log(`🔍 [SIMPLE GLOBE] Marker ${index} position verification:`, {
+            expected: [lng, lat],
+            actual: [markerLngLat.lng, markerLngLat.lat],
+            project: project.name,
+            match: Math.abs(markerLngLat.lng - lng) < 0.0001 && Math.abs(markerLngLat.lat - lat) < 0.0001
+          });
+        }, 100);
           
         console.log(`✅ [SIMPLE GLOBE] Marker ${index} added at:`, [lng, lat]);
       });

package/src/@daf/core/components/Dashboard/Globe/SimpleGlobe.stories.js

@@ -1,5 +1,6 @@
 import SimpleGlobe from "./SimpleGlobe";
 import SimpleGlobeDebug from "./SimpleGlobeDebug";
+import SimpleGlobeTestDebug from "./SimpleGlobeTestDebug";
 import ThemeLayout from "../../ThemeLayout";
 import Widget from "../Widget";
 
@@ -282,3 +283,19 @@ export const DebugVersion = {
     </div>
   )
 };
+
+export const TestDebugVersion = {
+  name: "Test Debug Version (Minimal Setup)",
+  render: () => (
+    <div style={{ margin: "3em" }}>
+      <ThemeLayout>
+        <Widget title="Test Debug Globe (Minimal Mapbox)" className="no-px no-pb-body">
+          <SimpleGlobeTestDebug projects={SAMPLE_PROJECTS} />
+        </Widget>
+      </ThemeLayout>
+    </div>
+  )
+};
+
+// Export the component for reuse in other projects
+export { SimpleGlobeTestDebug };

package/src/@daf/core/components/Dashboard/Globe/SimpleGlobeTestDebug.jsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useRef } from 'react';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+/**
+ * SimpleGlobeTestDebug - A minimal test component to debug marker positioning issues
+ * This component uses the most basic Mapbox setup to isolate positioning problems
+ */
+const SimpleGlobeTestDebug = ({ projects = [] }) => {
+  const mapContainer = useRef(null);
+  const map = useRef(null);
+
+  useEffect(() => {
+    if (map.current) return;
+
+    console.log('🧪 [DEBUG TEST] Creating minimal map...');
+    
+    // Set Mapbox access token
+    mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
+
+    // Create minimal map
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: 'mapbox://styles/mapbox/satellite-v9',
+      center: [0, 0],
+      zoom: 2,
+      projection: 'globe'
+    });
+
+    // Add markers when map loads
+    map.current.on('load', () => {
+      console.log('🧪 [DEBUG TEST] Map loaded, adding test markers...');
+      
+      projects.forEach((project, index) => {
+        console.log(`🧪 [DEBUG TEST] Processing project ${index}:`, project);
+        
+        // Create simple marker
+        const el = document.createElement('div');
+        el.style.width = '20px';
+        el.style.height = '20px';
+        el.style.backgroundColor = '#FF0000';
+        el.style.borderRadius = '50%';
+        el.style.border = '2px solid white';
+        el.style.cursor = 'pointer';
+        el.style.boxShadow = '0px 3px 6px rgba(0,0,0,0.3)';
+        
+        // Get coordinates
+        const lng = Number(project.longitude);
+        const lat = Number(project.latitude);
+        
+        console.log(`🧪 [DEBUG TEST] Coordinates for ${project.name}:`, {
+          original: { longitude: project.longitude, latitude: project.latitude },
+          processed: { lng, lat },
+          valid: !isNaN(lng) && !isNaN(lat) && lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90
+        });
+        
+        if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
+          console.error(`❌ [DEBUG TEST] Invalid coordinates for ${project.name}:`, { lng, lat });
+          return;
+        }
+
+        // Create popup
+        const popup = new mapboxgl.Popup({ offset: 25 })
+          .setHTML(`
+            <div style="padding: 8px;">
+              <h3 style="margin: 0 0 8px 0; font-size: 14px;">${project.name}</h3>
+              <p style="margin: 0; font-size: 12px; color: #666;">
+                Lat: ${lat.toFixed(4)}, Lng: ${lng.toFixed(4)}
+              </p>
+              <p style="margin: 4px 0 0 0; font-size: 12px;">
+                ${project.projectDescription || 'No description'}
+              </p>
+            </div>
+          `);
+
+        // Add marker with explicit positioning
+        const marker = new mapboxgl.Marker({
+          element: el,
+          anchor: 'center'
+        })
+          .setLngLat([lng, lat])
+          .setPopup(popup)
+          .addTo(map.current);
+
+        // Verify position after a delay
+        setTimeout(() => {
+          const markerLngLat = marker.getLngLat();
+          const positionMatch = Math.abs(markerLngLat.lng - lng) < 0.0001 && Math.abs(markerLngLat.lat - lat) < 0.0001;
+          
+          console.log(`🔍 [DEBUG TEST] Position verification for ${project.name}:`, {
+            expected: [lng, lat],
+            actual: [markerLngLat.lng, markerLngLat.lat],
+            match: positionMatch,
+            difference: {
+              lng: Math.abs(markerLngLat.lng - lng),
+              lat: Math.abs(markerLngLat.lat - lat)
+            }
+          });
+          
+          if (!positionMatch) {
+            console.error(`❌ [DEBUG TEST] Position mismatch for ${project.name}!`);
+          }
+        }, 200);
+        
+        console.log(`✅ [DEBUG TEST] Marker added for ${project.name} at:`, [lng, lat]);
+      });
+    });
+
+    return () => {
+      if (map.current) {
+        map.current.remove();
+        map.current = null;
+      }
+    };
+  }, [projects]);
+
+  return (
+    <div style={{ 
+      width: '100%', 
+      height: '600px', 
+      border: '2px solid #ccc',
+      position: 'relative'
+    }}>
+      <div 
+        ref={mapContainer} 
+        style={{ 
+          width: '100%', 
+          height: '100%',
+          position: 'relative'
+        }} 
+      />
+      <div style={{
+        position: 'absolute',
+        top: '10px',
+        left: '10px',
+        background: 'rgba(255,255,255,0.9)',
+        padding: '8px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        zIndex: 1000
+      }}>
+        <strong>Debug Test Map</strong><br/>
+        Projects: {projects.length}<br/>
+        Check console for position verification
+      </div>
+    </div>
+  );
+};
+
+export default SimpleGlobeTestDebug;

package/src/@daf/core/components/Dashboard/Globe/SimpleGlobeTestDebug.standalone.jsx

@@ -0,0 +1,183 @@
+import React, { useEffect, useRef } from 'react';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+/**
+ * SimpleGlobeTestDebug - A minimal test component to debug marker positioning issues
+ * This component uses the most basic Mapbox setup to isolate positioning problems
+ * 
+ * USAGE:
+ * 1. Copy this file to your straatos project
+ * 2. Install mapbox-gl: npm install mapbox-gl
+ * 3. Import and use: <SimpleGlobeTestDebug projects={yourProjects} />
+ * 
+ * @param {Array} projects - Array of project objects with location data
+ * @param {string} projects[].name - Project name
+ * @param {number} projects[].latitude - Latitude coordinate
+ * @param {number} projects[].longitude - Longitude coordinate
+ * @param {string} projects[].projectDescription - Project description (optional)
+ */
+const SimpleGlobeTestDebug = ({ projects = [] }) => {
+  const mapContainer = useRef(null);
+  const map = useRef(null);
+
+  useEffect(() => {
+    if (map.current) return;
+
+    console.log('🧪 [DEBUG TEST] Creating minimal map...');
+    
+    // Set Mapbox access token - REPLACE WITH YOUR TOKEN
+    mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
+
+    // Create minimal map
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: 'mapbox://styles/mapbox/satellite-v9',
+      center: [0, 0],
+      zoom: 2,
+      projection: 'globe'
+    });
+
+    // Add markers when map loads
+    map.current.on('load', () => {
+      console.log('🧪 [DEBUG TEST] Map loaded, adding test markers...');
+      
+      projects.forEach((project, index) => {
+        console.log(`🧪 [DEBUG TEST] Processing project ${index}:`, project);
+        
+        // Create simple marker
+        const el = document.createElement('div');
+        el.style.width = '20px';
+        el.style.height = '20px';
+        el.style.backgroundColor = '#FF0000';
+        el.style.borderRadius = '50%';
+        el.style.border = '2px solid white';
+        el.style.cursor = 'pointer';
+        el.style.boxShadow = '0px 3px 6px rgba(0,0,0,0.3)';
+        
+        // Get coordinates
+        const lng = Number(project.longitude);
+        const lat = Number(project.latitude);
+        
+        console.log(`🧪 [DEBUG TEST] Coordinates for ${project.name}:`, {
+          original: { longitude: project.longitude, latitude: project.latitude },
+          processed: { lng, lat },
+          valid: !isNaN(lng) && !isNaN(lat) && lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90
+        });
+        
+        if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
+          console.error(`❌ [DEBUG TEST] Invalid coordinates for ${project.name}:`, { lng, lat });
+          return;
+        }
+
+        // Create popup
+        const popup = new mapboxgl.Popup({ offset: 25 })
+          .setHTML(`
+            <div style="padding: 8px;">
+              <h3 style="margin: 0 0 8px 0; font-size: 14px;">${project.name}</h3>
+              <p style="margin: 0; font-size: 12px; color: #666;">
+                Lat: ${lat.toFixed(4)}, Lng: ${lng.toFixed(4)}
+              </p>
+              <p style="margin: 4px 0 0 0; font-size: 12px;">
+                ${project.projectDescription || 'No description'}
+              </p>
+            </div>
+          `);
+
+        // Add marker with explicit positioning
+        const marker = new mapboxgl.Marker({
+          element: el,
+          anchor: 'center'
+        })
+          .setLngLat([lng, lat])
+          .setPopup(popup)
+          .addTo(map.current);
+
+        // Verify position after a delay
+        setTimeout(() => {
+          const markerLngLat = marker.getLngLat();
+          const positionMatch = Math.abs(markerLngLat.lng - lng) < 0.0001 && Math.abs(markerLngLat.lat - lat) < 0.0001;
+          
+          console.log(`🔍 [DEBUG TEST] Position verification for ${project.name}:`, {
+            expected: [lng, lat],
+            actual: [markerLngLat.lng, markerLngLat.lat],
+            match: positionMatch,
+            difference: {
+              lng: Math.abs(markerLngLat.lng - lng),
+              lat: Math.abs(markerLngLat.lat - lat)
+            }
+          });
+          
+          if (!positionMatch) {
+            console.error(`❌ [DEBUG TEST] Position mismatch for ${project.name}!`);
+          }
+        }, 200);
+        
+        console.log(`✅ [DEBUG TEST] Marker added for ${project.name} at:`, [lng, lat]);
+      });
+    });
+
+    return () => {
+      if (map.current) {
+        map.current.remove();
+        map.current = null;
+      }
+    };
+  }, [projects]);
+
+  return (
+    <div style={{ 
+      width: '100%', 
+      height: '600px', 
+      border: '2px solid #ccc',
+      position: 'relative'
+    }}>
+      <div 
+        ref={mapContainer} 
+        style={{ 
+          width: '100%', 
+          height: '100%',
+          position: 'relative'
+        }} 
+      />
+      <div style={{
+        position: 'absolute',
+        top: '10px',
+        left: '10px',
+        background: 'rgba(255,255,255,0.9)',
+        padding: '8px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        zIndex: 1000
+      }}>
+        <strong>Debug Test Map</strong><br/>
+        Projects: {projects.length}<br/>
+        Check console for position verification
+      </div>
+    </div>
+  );
+};
+
+export default SimpleGlobeTestDebug;
+
+// Example usage:
+/*
+import SimpleGlobeTestDebug from './SimpleGlobeTestDebug';
+
+const MyComponent = () => {
+  const projects = [
+    {
+      name: "Test Project",
+      latitude: 14.7167,
+      longitude: -17.4677,
+      projectDescription: "Test project in Dakar"
+    }
+  ];
+
+  return (
+    <div style={{ width: '100%', height: '600px' }}>
+      <SimpleGlobeTestDebug projects={projects} />
+    </div>
+  );
+};
+*/

package/src/index.js

@@ -63,6 +63,7 @@ export { default as MineSiteMap } from "./@daf/core/components/Dashboard/Map/ind
 export { default as InExpandableWidgetMap } from "./@daf/core/components/Dashboard/Map/InExpandableWidgetMap/index.jsx";
 export { default as Globe } from "./@daf/core/components/Dashboard/Globe/index.jsx";
 export { default as SimpleGlobe } from "./@daf/core/components/Dashboard/Globe/SimpleGlobe.jsx";
+export { default as SimpleGlobeTestDebug } from "./@daf/core/components/Dashboard/Globe/SimpleGlobeTestDebug.jsx";
 export { default as WidgetPlaceholder } from "./@daf/core/components/Dashboard/Widget/WidgetPlaceholder/index.jsx";
 export { default as Steps } from "./@daf/core/components/Dashboard/Steps/index.jsx";
 export { default as DashboardLayout } from "./@daf/core/components/Dashboard/DashboardLayout/index.jsx";