datastake-daf 0.6.284 → 0.6.286

package/dist/components/index.js

@@ -21079,14 +21079,16 @@ const SimpleGlobe = _ref => {
         const lat = Number(project.latitude);
         console.log("\uD83D\uDCCD [SIMPLE GLOBE] Marker ".concat(index, " coordinates:"), {
           lng,
-          lat
+          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,
+            project: project.name
           });
           return;
         }
@@ -21095,14 +21097,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 and anchor
+        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 (like other Globe components)
+        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]);
       });
 
@@ -21408,6 +21424,201 @@ const IsolatedGlobe = _ref => {
   });
 };
 
+const NoConflictGlobe = _ref => {
+  let {
+    projects = [],
+    mapConfig = {},
+    onProjectClick = () => {},
+    type = "default",
+    color = "#00809E"
+  } = _ref;
+  const mapContainer = React.useRef(null);
+  const map = React.useRef(null);
+  const boundsRef = React.useRef(null);
+  React.useEffect(() => {
+    if (map.current) return;
+    console.log('🗺️ [NO CONFLICT GLOBE] Creating map with aggressive isolation...');
+
+    // Set Mapbox access token
+    mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
+
+    // Create map
+    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', () => {
+      console.log('🗺️ [NO CONFLICT GLOBE] Map loaded, adding markers...');
+
+      // Inject aggressive CSS isolation
+      const styleId = 'no-conflict-globe-styles';
+      let existingStyle = document.getElementById(styleId);
+      if (!existingStyle) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = "\n          /* NO CONFLICT GLOBE - Aggressive CSS Isolation */\n          .no-conflict-globe-container {\n            position: relative !important;\n            width: 100% !important;\n            height: 100% !important;\n            overflow: hidden !important;\n            font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif !important;\n            -webkit-tap-highlight-color: rgb(0 0 0/0) !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-canvas-container {\n            position: relative !important;\n            left: 0 !important;\n            top: 0 !important;\n            transform: none !important;\n            width: 100% !important;\n            height: 100% !important;\n            overflow: hidden !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-canvas-container canvas {\n            position: absolute !important;\n            left: 0 !important;\n            top: 0 !important;\n            transform: none !important;\n            width: 100% !important;\n            height: 100% !important;\n            isolation: isolate !important;\n          }\n          \n          /* Override ALL possible Leaflet CSS interference */\n          .no-conflict-globe-container .mapboxgl-marker {\n            position: absolute !important;\n            left: auto !important;\n            top: auto !important;\n            transform: none !important;\n            pointer-events: auto !important;\n            z-index: 1000 !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-marker .no-conflict-marker {\n            position: relative !important;\n            left: auto !important;\n            top: auto !important;\n            transform: none !important;\n            pointer-events: auto !important;\n            cursor: pointer !important;\n            display: flex !important;\n            align-items: center !important;\n            justify-content: center !important;\n            isolation: isolate !important;\n          }\n          \n          /* Override Leaflet pane positioning */\n          .no-conflict-globe-container .mapboxgl-marker-pane {\n            position: absolute !important;\n            left: 0 !important;\n            top: 0 !important;\n            transform: none !important;\n            z-index: 600 !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-tile-container {\n            position: absolute !important;\n            left: 0 !important;\n            top: 0 !important;\n            transform: none !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-zoom-animated {\n            transform-origin: 0 0 !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-marker.leaflet-interactive {\n            cursor: pointer !important;\n          }\n          \n          /* Popup styles with isolation */\n          .no-conflict-globe-container .mapboxgl-popup {\n            position: absolute !important;\n            left: auto !important;\n            top: auto !important;\n            transform: none !important;\n            z-index: 700 !important;\n            text-align: center !important;\n            margin-bottom: 20px !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-popup-content-wrapper {\n            padding: 1px !important;\n            text-align: left !important;\n            border-radius: 12px !important;\n            background: white !important;\n            color: #333 !important;\n            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4) !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-popup-content {\n            margin: 13px 24px 13px 20px !important;\n            line-height: 1.3 !important;\n            font-size: 13px !important;\n            min-height: 1px !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-popup-content p {\n            margin: 17px 0 !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-popup-tip-container {\n            width: 40px !important;\n            height: 20px !important;\n            position: absolute !important;\n            left: 50% !important;\n            margin-top: -1px !important;\n            margin-left: -20px !important;\n            overflow: hidden !important;\n            pointer-events: none !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-popup-tip {\n            width: 17px !important;\n            height: 17px !important;\n            padding: 1px !important;\n            margin: -10px auto 0 !important;\n            pointer-events: auto !important;\n            transform: rotate(45deg) !important;\n            background: white !important;\n            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4) !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-popup-close-button {\n            position: absolute !important;\n            top: 0 !important;\n            right: 0 !important;\n            border: none !important;\n            text-align: center !important;\n            width: 24px !important;\n            height: 24px !important;\n            font: 16px/24px Tahoma, Verdana, sans-serif !important;\n            color: #757575 !important;\n            text-decoration: none !important;\n            background: transparent !important;\n            cursor: pointer !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-popup-close-button:hover {\n            color: #585858 !important;\n          }\n          \n          /* Hide Mapbox attribution completely */\n          .no-conflict-globe-container .mapboxgl-ctrl-attribution {\n            display: none !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-ctrl-logo {\n            display: none !important;\n          }\n          \n          /* Override any Leaflet pane positioning */\n          .no-conflict-globe-container .mapboxgl-overlay-pane {\n            position: absolute !important;\n            left: 0 !important;\n            top: 0 !important;\n            transform: none !important;\n            z-index: 400 !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-shadow-pane {\n            position: absolute !important;\n            left: 0 !important;\n            top: 0 !important;\n            transform: none !important;\n            z-index: 500 !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-tooltip-pane {\n            position: absolute !important;\n            left: 0 !important;\n            top: 0 !important;\n            transform: none !important;\n            z-index: 650 !important;\n            isolation: isolate !important;\n          }\n          \n          .no-conflict-globe-container .mapboxgl-popup-pane {\n            position: absolute !important;\n            left: 0 !important;\n            top: 0 !important;\n            transform: none !important;\n            z-index: 700 !important;\n            isolation: isolate !important;\n          }\n          \n          /* Override any Leaflet div icon styles */\n          .no-conflict-globe-container .mapboxgl-marker .leaflet-div-icon {\n            background: none !important;\n            border: none !important;\n            position: relative !important;\n            left: auto !important;\n            top: auto !important;\n            transform: none !important;\n          }\n          \n          /* Override any Leaflet marker icon styles */\n          .no-conflict-globe-container .mapboxgl-marker .leaflet-marker-icon {\n            position: relative !important;\n            left: auto !important;\n            top: auto !important;\n            transform: none !important;\n          }\n          \n          /* Override any Leaflet marker shadow styles */\n          .no-conflict-globe-container .mapboxgl-marker .leaflet-marker-shadow {\n            display: none !important;\n          }\n          \n          /* Override any Leaflet interactive styles */\n          .no-conflict-globe-container .mapboxgl-marker.leaflet-interactive {\n            cursor: pointer !important;\n            pointer-events: auto !important;\n          }\n          \n          /* Override any Leaflet zoom animations */\n          .no-conflict-globe-container .mapboxgl-zoom-animated {\n            transform-origin: 0 0 !important;\n          }\n          \n          /* Override any Leaflet tile styles */\n          .no-conflict-globe-container .mapboxgl-tile {\n            position: absolute !important;\n            left: 0 !important;\n            top: 0 !important;\n            transform: none !important;\n          }\n          \n          /* Override any Leaflet image layer styles */\n          .no-conflict-globe-container .mapboxgl-image-layer {\n            position: absolute !important;\n            left: 0 !important;\n            top: 0 !important;\n            transform: none !important;\n          }\n        ";
+        document.head.appendChild(style);
+      }
+
+      // Calculate bounds to fit all markers
+      const bounds = new mapboxgl.LngLatBounds();
+      let hasValidCoordinates = false;
+      projects.forEach((project, index) => {
+        console.log("\uD83D\uDCCD [NO CONFLICT GLOBE] Adding marker ".concat(index, ":"), project);
+
+        // Create marker element with unique class
+        const el = document.createElement('div');
+        el.className = 'no-conflict-marker';
+        el.style.cursor = 'pointer';
+        el.style.boxShadow = '0px 3.45px 3.45px 0px #00000029';
+        el.style.display = 'flex';
+        el.style.alignItems = 'center';
+        el.style.justifyContent = 'center';
+        el.style.position = 'relative';
+        el.style.left = 'auto';
+        el.style.top = 'auto';
+        el.style.transform = 'none';
+        el.style.zIndex = '1000';
+        el.style.isolation = 'isolate';
+        if (type === "location") {
+          // Location marker - SVG map pin style
+          el.style.width = '28px';
+          el.style.height = '33px';
+          el.innerHTML = "\n            <svg\n              width=\"28\"\n              height=\"33\"\n              viewBox=\"0 0 28 33\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M5.14346 4.87419C10.0688 -0.15896 18.0528 -0.162058 22.9757 4.86861C27.6563 9.65161 27.8841 17.2616 23.6622 22.3255H23.6608C23.427 22.6141 23.1808 22.894 22.9211 23.1623L14.0671 32.2101L5.44057 23.3948L5.13868 23.096C0.215857 18.0655 0.218422 9.90737 5.14346 4.87419Z\"\n                fill=\"".concat(color, "\"\n                stroke=\"white\"\n              />\n            </svg>\n          ");
+        } else {
+          // Default circular marker style
+          el.style.width = '30px';
+          el.style.height = '30px';
+          el.style.backgroundColor = color;
+          el.style.borderRadius = '50%';
+          el.style.border = '2px solid white';
+          el.style.color = 'white';
+          el.style.fontWeight = 'bold';
+          el.style.fontSize = '14px';
+          el.style.textAlign = 'center';
+          el.style.lineHeight = '1';
+          el.innerHTML = "<span style=\"display: block; line-height: 1;\">".concat(project.percentageCompletion || 0, "</span>");
+        }
+
+        // Create popup content
+        const popupContent = "\n          <div style=\"padding: 12px; min-width: 200px;\">\n            <h3 style=\"margin: 0 0 8px 0; font-size: 16px; color: #333;\">".concat(project.name, "</h3>\n            <p style=\"margin: 0 0 4px 0; font-size: 12px; color: #666;\">\n              <strong>Country:</strong> ").concat(project.country || 'N/A', "\n            </p>\n            <p style=\"margin: 0 0 4px 0; font-size: 12px; color: #666;\">\n              <strong>Sector:</strong> ").concat(project.sectoralScope || 'Project', "\n            </p>\n            <p style=\"margin: 0 0 4px 0; font-size: 12px; color: #666;\">\n              <strong>Completion:</strong> ").concat(project.percentageCompletion || 0, "%\n            </p>\n            <p style=\"margin: 4px 0 0 0; font-size: 12px; color: #666;\">\n              <strong>Coordinates:</strong> ").concat(Number(project.latitude).toFixed(4), ", ").concat(Number(project.longitude).toFixed(4), "\n            </p>\n          </div>\n        ");
+
+        // Create popup
+        const popup = new mapboxgl.Popup({
+          offset: 25,
+          closeButton: true,
+          closeOnClick: false
+        }).setHTML(popupContent);
+
+        // Ensure coordinates are valid numbers
+        const lng = Number(project.longitude);
+        const lat = Number(project.latitude);
+        console.log("\uD83D\uDCCD [NO CONFLICT GLOBE] Marker ".concat(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("\u274C [NO CONFLICT GLOBE] Invalid coordinates for project ".concat(index, ":"), {
+            lng,
+            lat,
+            original: {
+              longitude: project.longitude,
+              latitude: project.latitude
+            },
+            project: project.name
+          });
+          return;
+        }
+
+        // Add coordinates to bounds
+        bounds.extend([lng, lat]);
+        hasValidCoordinates = true;
+
+        // 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('📍 [NO CONFLICT GLOBE] Marker clicked:', project);
+          onProjectClick(project);
+        });
+
+        // Verify marker position after a short delay
+        setTimeout(() => {
+          const markerLngLat = marker.getLngLat();
+          console.log("\uD83D\uDD0D [NO CONFLICT 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 [NO CONFLICT GLOBE] Marker ".concat(index, " added at:"), [lng, lat]);
+      });
+
+      // Fit map to show all markers if we have valid coordinates
+      if (hasValidCoordinates && !bounds.isEmpty()) {
+        console.log('🗺️ [NO CONFLICT GLOBE] Fitting map to bounds:', bounds);
+        map.current.fitBounds(bounds, {
+          padding: {
+            top: 20,
+            bottom: 20,
+            left: 20,
+            right: 20
+          },
+          maxZoom: 6,
+          duration: 1000
+        });
+        boundsRef.current = bounds;
+      } else {
+        boundsRef.current = null;
+      }
+    });
+    return () => {
+      if (map.current) {
+        map.current.remove();
+        map.current = null;
+      }
+    };
+  }, [projects, onProjectClick, mapConfig]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "no-conflict-globe-container",
+    style: {
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      isolation: 'isolate'
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: mapContainer,
+      style: {
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        isolation: 'isolate'
+      }
+    })
+  });
+};
+
 function WidgetPlaceholder(_ref) {
   let {
     icon = "",
@@ -62203,6 +62414,7 @@ exports.MoreTags = MoreTags;
 exports.MultiBarProgress = MultiBarProgress;
 exports.MultiColorProgressBar = MultiColorProgressBar;
 exports.Multiselect = Multiselect;
+exports.NoConflictGlobe = NoConflictGlobe;
 exports.NotFound = NotFound;
 exports.Pagination = Pagination;
 exports.PdfForm = PdfForm;

package/package.json

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

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

@@ -0,0 +1,488 @@
+import React, { useEffect, useRef } from 'react';
+import mapboxgl from 'mapbox-gl';
+
+/**
+ * NoConflictGlobe - Mapbox component with aggressive CSS isolation
+ * Uses unique CSS classes and inline styles to prevent any conflicts
+ */
+const NoConflictGlobe = ({ 
+  projects = [], 
+  mapConfig = {},
+  onProjectClick = () => {},
+  type = "default",
+  color = "#00809E"
+}) => {
+  const mapContainer = useRef(null);
+  const map = useRef(null);
+  const boundsRef = useRef(null);
+
+  useEffect(() => {
+    if (map.current) return;
+
+    console.log('🗺️ [NO CONFLICT GLOBE] Creating map with aggressive isolation...');
+    
+    // Set Mapbox access token
+    mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
+
+    // Create map
+    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', () => {
+      console.log('🗺️ [NO CONFLICT GLOBE] Map loaded, adding markers...');
+      
+      // Inject aggressive CSS isolation
+      const styleId = 'no-conflict-globe-styles';
+      let existingStyle = document.getElementById(styleId);
+      if (!existingStyle) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+          /* NO CONFLICT GLOBE - Aggressive CSS Isolation */
+          .no-conflict-globe-container {
+            position: relative !important;
+            width: 100% !important;
+            height: 100% !important;
+            overflow: hidden !important;
+            font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif !important;
+            -webkit-tap-highlight-color: rgb(0 0 0/0) !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-canvas-container {
+            position: relative !important;
+            left: 0 !important;
+            top: 0 !important;
+            transform: none !important;
+            width: 100% !important;
+            height: 100% !important;
+            overflow: hidden !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-canvas-container canvas {
+            position: absolute !important;
+            left: 0 !important;
+            top: 0 !important;
+            transform: none !important;
+            width: 100% !important;
+            height: 100% !important;
+            isolation: isolate !important;
+          }
+          
+          /* Override ALL possible Leaflet CSS interference */
+          .no-conflict-globe-container .mapboxgl-marker {
+            position: absolute !important;
+            left: auto !important;
+            top: auto !important;
+            transform: none !important;
+            pointer-events: auto !important;
+            z-index: 1000 !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-marker .no-conflict-marker {
+            position: relative !important;
+            left: auto !important;
+            top: auto !important;
+            transform: none !important;
+            pointer-events: auto !important;
+            cursor: pointer !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            isolation: isolate !important;
+          }
+          
+          /* Override Leaflet pane positioning */
+          .no-conflict-globe-container .mapboxgl-marker-pane {
+            position: absolute !important;
+            left: 0 !important;
+            top: 0 !important;
+            transform: none !important;
+            z-index: 600 !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-tile-container {
+            position: absolute !important;
+            left: 0 !important;
+            top: 0 !important;
+            transform: none !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-zoom-animated {
+            transform-origin: 0 0 !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-marker.leaflet-interactive {
+            cursor: pointer !important;
+          }
+          
+          /* Popup styles with isolation */
+          .no-conflict-globe-container .mapboxgl-popup {
+            position: absolute !important;
+            left: auto !important;
+            top: auto !important;
+            transform: none !important;
+            z-index: 700 !important;
+            text-align: center !important;
+            margin-bottom: 20px !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-popup-content-wrapper {
+            padding: 1px !important;
+            text-align: left !important;
+            border-radius: 12px !important;
+            background: white !important;
+            color: #333 !important;
+            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4) !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-popup-content {
+            margin: 13px 24px 13px 20px !important;
+            line-height: 1.3 !important;
+            font-size: 13px !important;
+            min-height: 1px !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-popup-content p {
+            margin: 17px 0 !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-popup-tip-container {
+            width: 40px !important;
+            height: 20px !important;
+            position: absolute !important;
+            left: 50% !important;
+            margin-top: -1px !important;
+            margin-left: -20px !important;
+            overflow: hidden !important;
+            pointer-events: none !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-popup-tip {
+            width: 17px !important;
+            height: 17px !important;
+            padding: 1px !important;
+            margin: -10px auto 0 !important;
+            pointer-events: auto !important;
+            transform: rotate(45deg) !important;
+            background: white !important;
+            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4) !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-popup-close-button {
+            position: absolute !important;
+            top: 0 !important;
+            right: 0 !important;
+            border: none !important;
+            text-align: center !important;
+            width: 24px !important;
+            height: 24px !important;
+            font: 16px/24px Tahoma, Verdana, sans-serif !important;
+            color: #757575 !important;
+            text-decoration: none !important;
+            background: transparent !important;
+            cursor: pointer !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-popup-close-button:hover {
+            color: #585858 !important;
+          }
+          
+          /* Hide Mapbox attribution completely */
+          .no-conflict-globe-container .mapboxgl-ctrl-attribution {
+            display: none !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-ctrl-logo {
+            display: none !important;
+          }
+          
+          /* Override any Leaflet pane positioning */
+          .no-conflict-globe-container .mapboxgl-overlay-pane {
+            position: absolute !important;
+            left: 0 !important;
+            top: 0 !important;
+            transform: none !important;
+            z-index: 400 !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-shadow-pane {
+            position: absolute !important;
+            left: 0 !important;
+            top: 0 !important;
+            transform: none !important;
+            z-index: 500 !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-tooltip-pane {
+            position: absolute !important;
+            left: 0 !important;
+            top: 0 !important;
+            transform: none !important;
+            z-index: 650 !important;
+            isolation: isolate !important;
+          }
+          
+          .no-conflict-globe-container .mapboxgl-popup-pane {
+            position: absolute !important;
+            left: 0 !important;
+            top: 0 !important;
+            transform: none !important;
+            z-index: 700 !important;
+            isolation: isolate !important;
+          }
+          
+          /* Override any Leaflet div icon styles */
+          .no-conflict-globe-container .mapboxgl-marker .leaflet-div-icon {
+            background: none !important;
+            border: none !important;
+            position: relative !important;
+            left: auto !important;
+            top: auto !important;
+            transform: none !important;
+          }
+          
+          /* Override any Leaflet marker icon styles */
+          .no-conflict-globe-container .mapboxgl-marker .leaflet-marker-icon {
+            position: relative !important;
+            left: auto !important;
+            top: auto !important;
+            transform: none !important;
+          }
+          
+          /* Override any Leaflet marker shadow styles */
+          .no-conflict-globe-container .mapboxgl-marker .leaflet-marker-shadow {
+            display: none !important;
+          }
+          
+          /* Override any Leaflet interactive styles */
+          .no-conflict-globe-container .mapboxgl-marker.leaflet-interactive {
+            cursor: pointer !important;
+            pointer-events: auto !important;
+          }
+          
+          /* Override any Leaflet zoom animations */
+          .no-conflict-globe-container .mapboxgl-zoom-animated {
+            transform-origin: 0 0 !important;
+          }
+          
+          /* Override any Leaflet tile styles */
+          .no-conflict-globe-container .mapboxgl-tile {
+            position: absolute !important;
+            left: 0 !important;
+            top: 0 !important;
+            transform: none !important;
+          }
+          
+          /* Override any Leaflet image layer styles */
+          .no-conflict-globe-container .mapboxgl-image-layer {
+            position: absolute !important;
+            left: 0 !important;
+            top: 0 !important;
+            transform: none !important;
+          }
+        `;
+        document.head.appendChild(style);
+      }
+      
+      // Calculate bounds to fit all markers
+      const bounds = new mapboxgl.LngLatBounds();
+      let hasValidCoordinates = false;
+      
+      projects.forEach((project, index) => {
+        console.log(`📍 [NO CONFLICT GLOBE] Adding marker ${index}:`, project);
+        
+        // Create marker element with unique class
+        const el = document.createElement('div');
+        el.className = 'no-conflict-marker';
+        el.style.cursor = 'pointer';
+        el.style.boxShadow = '0px 3.45px 3.45px 0px #00000029';
+        el.style.display = 'flex';
+        el.style.alignItems = 'center';
+        el.style.justifyContent = 'center';
+        el.style.position = 'relative';
+        el.style.left = 'auto';
+        el.style.top = 'auto';
+        el.style.transform = 'none';
+        el.style.zIndex = '1000';
+        el.style.isolation = 'isolate';
+        
+        if (type === "location") {
+          // Location marker - SVG map pin style
+          el.style.width = '28px';
+          el.style.height = '33px';
+          el.innerHTML = `
+            <svg
+              width="28"
+              height="33"
+              viewBox="0 0 28 33"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5.14346 4.87419C10.0688 -0.15896 18.0528 -0.162058 22.9757 4.86861C27.6563 9.65161 27.8841 17.2616 23.6622 22.3255H23.6608C23.427 22.6141 23.1808 22.894 22.9211 23.1623L14.0671 32.2101L5.44057 23.3948L5.13868 23.096C0.215857 18.0655 0.218422 9.90737 5.14346 4.87419Z"
+                fill="${color}"
+                stroke="white"
+              />
+            </svg>
+          `;
+        } else {
+          // Default circular marker style
+          el.style.width = '30px';
+          el.style.height = '30px';
+          el.style.backgroundColor = color;
+          el.style.borderRadius = '50%';
+          el.style.border = '2px solid white';
+          el.style.color = 'white';
+          el.style.fontWeight = 'bold';
+          el.style.fontSize = '14px';
+          el.style.textAlign = 'center';
+          el.style.lineHeight = '1';
+          el.innerHTML = `<span style="display: block; line-height: 1;">${project.percentageCompletion || 0}</span>`;
+        }
+
+        // Create popup content
+        const popupContent = `
+          <div style="padding: 12px; min-width: 200px;">
+            <h3 style="margin: 0 0 8px 0; font-size: 16px; color: #333;">${project.name}</h3>
+            <p style="margin: 0 0 4px 0; font-size: 12px; color: #666;">
+              <strong>Country:</strong> ${project.country || 'N/A'}
+            </p>
+            <p style="margin: 0 0 4px 0; font-size: 12px; color: #666;">
+              <strong>Sector:</strong> ${project.sectoralScope || 'Project'}
+            </p>
+            <p style="margin: 0 0 4px 0; font-size: 12px; color: #666;">
+              <strong>Completion:</strong> ${project.percentageCompletion || 0}%
+            </p>
+            <p style="margin: 4px 0 0 0; font-size: 12px; color: #666;">
+              <strong>Coordinates:</strong> ${Number(project.latitude).toFixed(4)}, ${Number(project.longitude).toFixed(4)}
+            </p>
+          </div>
+        `;
+
+        // Create popup
+        const popup = new mapboxgl.Popup({ 
+          offset: 25,
+          closeButton: true,
+          closeOnClick: false
+        }).setHTML(popupContent);
+
+        // Ensure coordinates are valid numbers
+        const lng = Number(project.longitude);
+        const lat = Number(project.latitude);
+        
+        console.log(`📍 [NO CONFLICT 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(`❌ [NO CONFLICT GLOBE] Invalid coordinates for project ${index}:`, { 
+            lng, lat, 
+            original: { longitude: project.longitude, latitude: project.latitude },
+            project: project.name 
+          });
+          return;
+        }
+
+        // Add coordinates to bounds
+        bounds.extend([lng, lat]);
+        hasValidCoordinates = true;
+
+        // 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('📍 [NO CONFLICT GLOBE] Marker clicked:', project);
+          onProjectClick(project);
+        });
+        
+        // Verify marker position after a short delay
+        setTimeout(() => {
+          const markerLngLat = marker.getLngLat();
+          console.log(`🔍 [NO CONFLICT 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(`✅ [NO CONFLICT GLOBE] Marker ${index} added at:`, [lng, lat]);
+      });
+      
+      // Fit map to show all markers if we have valid coordinates
+      if (hasValidCoordinates && !bounds.isEmpty()) {
+        console.log('🗺️ [NO CONFLICT GLOBE] Fitting map to bounds:', bounds);
+        map.current.fitBounds(bounds, {
+          padding: { top: 20, bottom: 20, left: 20, right: 20 },
+          maxZoom: 6,
+          duration: 1000
+        });
+        boundsRef.current = bounds;
+      } else {
+        boundsRef.current = null;
+      }
+    });
+
+    return () => {
+      if (map.current) {
+        map.current.remove();
+        map.current = null;
+      }
+    };
+  }, [projects, onProjectClick, mapConfig]);
+
+  return (
+    <div 
+      className="no-conflict-globe-container"
+      style={{ 
+        width: '100%', 
+        height: '100%',
+        position: 'relative',
+        isolation: 'isolate'
+      }}
+    >
+      <div 
+        ref={mapContainer} 
+        style={{ 
+          width: '100%', 
+          height: '100%',
+          position: 'relative',
+          isolation: 'isolate'
+        }} 
+      />
+    </div>
+  );
+};
+
+export default NoConflictGlobe;

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

@@ -221,11 +221,19 @@ const SimpleGlobe = ({
         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:`, { 
+          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, 
+            project: project.name 
+          });
           return;
         }
 
@@ -233,8 +241,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 and anchor
+        const marker = new mapboxgl.Marker({
+          element: el,
+          anchor: 'center'
+        })
           .setLngLat([lng, lat])
           .setPopup(popup)
           .addTo(map.current);
@@ -244,6 +255,17 @@ const SimpleGlobe = ({
           console.log('📍 [SIMPLE GLOBE] Marker clicked:', project);
           onProjectClick(project);
         });
+        
+        // Verify marker position after a short delay (like other Globe components)
+        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,6 +1,6 @@
 import SimpleGlobe from "./SimpleGlobe";
 import SimpleGlobeDebug from "./SimpleGlobeDebug";
-import IsolatedGlobe from "./IsolatedGlobe";
+import NoConflictGlobe from "./NoConflictGlobe";
 import CSSInJSGlobe from "./CSSInJSGlobe";
 import ThemeLayout from "../../ThemeLayout";
 import Widget from "../Widget";
@@ -285,14 +285,14 @@ export const DebugVersion = {
   )
 };
 
-export const IsolatedVersion = {
-  name: "Isolated Version (Shadow DOM)",
+export const NoConflictVersion = {
+  name: "No Conflict Version (Aggressive CSS Isolation)",
   render: () => (
     <div style={{ margin: "3em" }}>
       <ThemeLayout>
-        <Widget title="Isolated Globe (Shadow DOM)" className="no-px no-pb-body">
+        <Widget title="No Conflict Globe (Aggressive CSS Isolation)" className="no-px no-pb-body">
           <div style={{ width: '100%', height: '600px' }}>
-            <IsolatedGlobe projects={SAMPLE_PROJECTS} type="location" color="#4ECDC4" />
+            <NoConflictGlobe projects={SAMPLE_PROJECTS} type="location" color="#4ECDC4" />
           </div>
         </Widget>
       </ThemeLayout>

package/src/index.js

@@ -64,6 +64,7 @@ export { default as InExpandableWidgetMap } from "./@daf/core/components/Dashboa
 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 IsolatedGlobe } from "./@daf/core/components/Dashboard/Globe/IsolatedGlobe.jsx";
+export { default as NoConflictGlobe } from "./@daf/core/components/Dashboard/Globe/NoConflictGlobe.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";