datastake-daf 0.6.264 → 0.6.266

package/dist/components/index.js

@@ -18213,6 +18213,7 @@ function useMapHelper$1({
   mapCenter,
   allData,
   renderTooltip,
+  renderTooltipTags,
   onClickLink,
   link,
   tooltipAsText,
@@ -18245,7 +18246,6 @@ function useMapHelper$1({
 
   // Actions to do when active marker is changed
   React.useEffect(() => {
-    console.log("RERENDER");
     if (mapRef) {
       if (activeMarker) {
         mapRef.eachLayer(layer => {
@@ -18332,6 +18332,7 @@ function useMapHelper$1({
               ...data,
               totals
             }),
+            tags: renderTooltipTags(data),
             link,
             total: data.sources,
             onClickLink: () => onClickLink(data)
@@ -18355,6 +18356,7 @@ function useMapHelper$1({
           children: renderTooltipJsx({
             title: data.name,
             items: renderTooltip(data),
+            tags: renderTooltipTags(data),
             link,
             total: data.sources,
             onClickLink: () => onClickLink(data)
@@ -18387,6 +18389,7 @@ function useMapHelper$1({
           data: data,
           title: data.name,
           renderTooltip: renderTooltip,
+          renderTooltipTags: renderTooltipTags,
           link: link,
           onClickLink: onClickLink,
           activeStakeholder: activeStakeholder,
@@ -18421,7 +18424,8 @@ function useMapHelper$1({
             total: data.sources,
             link,
             onClickLink: () => onClickLink(data),
-            items: renderTooltip(data)
+            items: renderTooltip(data),
+            tags: renderTooltipTags(data)
           })
         }));
         roots.current.push(root);
@@ -18467,7 +18471,8 @@ function useMapHelper$1({
             total: data.sources,
             link,
             onClickLink: () => onClickLink(data),
-            items: renderTooltip(data)
+            items: renderTooltip(data),
+            tags: renderTooltipTags(data)
           })
         }));
         roots.current.push(root);
@@ -18484,7 +18489,7 @@ function useMapHelper$1({
         }]);
       }
     }
-  }, [mapRef, renderTooltip, tooltipAsText, onClickLink, zoom, selectedMarkersId, openPopupIdRef.current, handleSelectMarker, activeStakeholder, setActiveStakeholder]);
+  }, [mapRef, renderTooltip, renderTooltipTags, tooltipAsText, onClickLink, zoom, selectedMarkersId, openPopupIdRef.current, handleSelectMarker, activeStakeholder, setActiveStakeholder]);
 
   // Map control handlers
   const zoomHandler = React.useCallback(() => mapRef.setZoom(mapRef.getZoom() + 1), [mapRef]);
@@ -18575,6 +18580,7 @@ const useMap$1 = ({
   polygon,
   app,
   renderTooltip,
+  renderTooltipTags,
   mapConfig,
   tooltipAsText,
   renderMarker,
@@ -18678,6 +18684,7 @@ const useMap$1 = ({
     allData,
     mapCenter,
     renderTooltip,
+    renderTooltipTags,
     onClickLink,
     link,
     tooltipAsText,
@@ -19069,6 +19076,7 @@ function Map$3(_ref) {
     link,
     siderTitle = "Mine Description",
     renderTooltip = () => [],
+    renderTooltipTags = () => {},
     mapConfig = {},
     emptyDescriptionText = "No description provided",
     tooltipAsText = false,
@@ -19105,6 +19113,7 @@ function Map$3(_ref) {
     t,
     app,
     renderTooltip,
+    renderTooltipTags,
     onClickLink,
     link,
     mapConfig,
@@ -20889,6 +20898,128 @@ Globe.propTypes = {
   nameAsSiderTitle: PropTypes__default["default"].bool
 };
 
+const SimpleGlobe = _ref => {
+  let {
+    projects = [],
+    mapConfig = {},
+    showSider = false,
+    onProjectClick = () => {}
+  } = _ref;
+  const mapContainer = React.useRef(null);
+  const map = React.useRef(null);
+  React.useEffect(() => {
+    if (map.current) return; // Initialize map only once
+
+    console.log('🗺️ [SIMPLE GLOBE] Creating map...');
+
+    // 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
+    });
+
+    // Add markers when map loads
+    map.current.on('load', () => {
+      console.log('🗺️ [SIMPLE GLOBE] Map loaded, adding markers...');
+
+      // Hide Mapbox logo and attribution completely
+      map.current.getContainer();
+      const style = document.createElement('style');
+      style.textContent = "\n        .mapboxgl-ctrl-logo,\n        .mapboxgl-ctrl-attrib,\n        .mapboxgl-ctrl-bottom-left,\n        .mapboxgl-ctrl-bottom-right {\n          display: none !important;\n        }\n      ";
+      document.head.appendChild(style);
+
+      // Set the space background with stars
+      try {
+        map.current.setFog({
+          'color': 'rgb(0, 0, 0)',
+          'high-color': 'rgb(0, 0, 0)',
+          'horizon-blend': 0.1,
+          'space-color': 'rgb(0, 0, 0)',
+          'star-intensity': 0.6
+        });
+        console.log('✨ [SIMPLE GLOBE] Space background with stars set');
+      } catch (e) {
+        console.log('⚠️ [SIMPLE GLOBE] Could not set fog, trying alternative...');
+        // Fallback: try simpler fog configuration
+        try {
+          map.current.setFog({
+            'color': 'rgb(0, 0, 0)',
+            'high-color': 'rgb(0, 0, 0)',
+            'horizon-blend': 0.1
+          });
+          console.log('✨ [SIMPLE GLOBE] Alternative space background set');
+        } catch (e2) {
+          console.log('⚠️ [SIMPLE GLOBE] Could not set any fog configuration');
+        }
+      }
+      projects.forEach((project, index) => {
+        var _project$author;
+        console.log("\uD83D\uDCCD [SIMPLE GLOBE] Adding marker ".concat(index, ":"), project);
+
+        // Create marker element
+        const el = document.createElement('div');
+        el.className = 'mapboxgl-marker';
+        el.style.width = '25px';
+        el.style.height = '25px';
+        el.style.backgroundColor = '#00809E';
+        el.style.borderRadius = '50%';
+        el.style.border = '2px solid white';
+        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.color = 'white';
+        el.style.fontWeight = 'bold';
+        el.style.fontSize = '12px';
+        el.innerHTML = "<span>".concat(project.percentageCompletion || 0, "</span>");
+
+        // Create popup content using the same structure as minesitemap
+        const popupContent = "\n          <div class=\"daf-tooltip-cont\">\n            <div class=\"daf-tooltip-head\">\n              <div class=\"daf-tooltip-title\">\n                <div>\n                  <h4>".concat(project.name, "</h4>\n                  <h5>").concat(project.sectoralScope || 'Project', "</h5>\n                </div>\n              </div>\n            </div>\n            <div class=\"daf-tooltip-list\">\n              <div class=\"daf-tooltip-list-item\">\n                <span class=\"daf-tooltip-name\">Country</span>\n                <span class=\"daf-tooltip-value\">").concat(project.country || 'N/A', "</span>\n              </div>\n              <div class=\"daf-tooltip-list-item\">\n                <span class=\"daf-tooltip-name\">Completion</span>\n                <span class=\"daf-tooltip-value\">").concat(project.percentageCompletion || 0, "%</span>\n              </div>\n              <div class=\"daf-tooltip-list-item\">\n                <span class=\"daf-tooltip-name\">Author</span>\n                <span class=\"daf-tooltip-value\">").concat(((_project$author = project.author) === null || _project$author === void 0 ? void 0 : _project$author.name) || 'N/A', "</span>\n              </div>\n              <div class=\"daf-tooltip-list-item\">\n                <span class=\"daf-tooltip-name\">ID</span>\n                <span class=\"daf-tooltip-value\">").concat(project.datastakeId || 'N/A', "</span>\n              </div>\n            </div>\n          </div>\n        ");
+
+        // Create popup
+        const popup = new mapboxgl.Popup({
+          offset: 25,
+          closeButton: true,
+          closeOnClick: false
+        }).setHTML(popupContent);
+
+        // Add marker to map
+        new mapboxgl.Marker(el).setLngLat([project.longitude, project.latitude]).setPopup(popup).addTo(map.current);
+
+        // Add click handler
+        el.addEventListener('click', () => {
+          console.log('📍 [SIMPLE GLOBE] Marker clicked:', project);
+          onProjectClick(project);
+        });
+        console.log("\u2705 [SIMPLE GLOBE] Marker ".concat(index, " added at:"), [project.longitude, project.latitude]);
+      });
+    });
+    return () => {
+      if (map.current) {
+        map.current.remove();
+        map.current = null;
+      }
+    };
+  }, [projects, onProjectClick, mapConfig]);
+  return /*#__PURE__*/jsxRuntime.jsx(Style$A, {
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: mapContainer,
+      style: {
+        width: '100%',
+        height: '100%'
+      }
+    })
+  });
+};
+
 function WidgetPlaceholder(_ref) {
   let {
     icon = "",
@@ -33849,7 +33980,7 @@ const EditForm = _ref => {
     errors = {},
     changeErrors = () => {},
     evaluationConfig = [],
-    staticWidth = '614px'
+    staticWidth = "614px"
   } = _ref;
   const [isSubmitting] = React.useState(false);
   const formData = JSON.parse(JSON.stringify(convertUndefinedToNull(data) || {}));
@@ -33862,9 +33993,9 @@ const EditForm = _ref => {
     options = {},
     introText,
     formTitles,
-    formClass = ''
+    formClass = ""
   } = form || {};
-  const excludedKeys = [...defaultExcludedKeys, 'icon', 'label', 'description', 'showFormIf', 'sectionLabel', 'formDescription', 'introText', 'formClass', 'alertConf', 'formTitles', 'position', 'id'];
+  const excludedKeys = [...defaultExcludedKeys, "icon", "label", "description", "showFormIf", "sectionLabel", "formDescription", "introText", "formClass", "alertConf", "formTitles", "position", "id"];
   const [initialValues, setInitialValues] = React.useState(undefined);
   const getData = (name, input, value, commentValue, path, disabledPath) => {
     var _input$meta, _input$meta2, _input$meta10, _input$meta11, _input$meta12, _input$meta13, _input$meta14, _input$meta15;
@@ -33881,28 +34012,28 @@ const EditForm = _ref => {
     if (disabledInputs.includes(disabledPath) || isDisabled) {
       props.disabled = true;
     }
-    if (input.type === 'total100' && !value) {
+    if (input.type === "total100" && !value) {
       value = [{
         type: null,
         value: null
       }];
-    } else if (input.type === 'date') {
+    } else if (input.type === "date") {
       // value = value ? typeof value === 'string' ? value : value.format('YYYY-MM-DD') : undefined;
       value = convertToDayJs(value);
-    } else if (input.type === 'year') {
+    } else if (input.type === "year") {
       // value = value ? dayjs(value) : undefined;
       value = convertToDayJs(value);
-    } else if (input.type === 'switch') {
+    } else if (input.type === "switch") {
       if (!propHasValue$1(value)) {
         value = value || false;
-        if (typeof path === 'string') {
+        if (typeof path === "string") {
           dot__default["default"].str(path, value, values);
         }
       }
-    } else if (input.type === 'upload' || input.type === 'imageUpload' || input.type === 'videoUpload') {
-      const fileList = (Array.isArray(value) ? value : value && typeof value === 'object' && value.fileList && Array.isArray(value.fileList) ? value.fileList.map(f => f.response).filter(f => f) : []) || [];
-      if (!Array.isArray(value) && value && typeof value === 'object' && value.fileList && Array.isArray(value.fileList)) {
-        if (typeof path === 'string') {
+    } else if (input.type === "upload" || input.type === "imageUpload" || input.type === "videoUpload") {
+      const fileList = (Array.isArray(value) ? value : value && typeof value === "object" && value.fileList && Array.isArray(value.fileList) ? value.fileList.map(f => f.response).filter(f => f) : []) || [];
+      if (!Array.isArray(value) && value && typeof value === "object" && value.fileList && Array.isArray(value.fileList)) {
+        if (typeof path === "string") {
           dot__default["default"].set(path, fileList, values);
         }
       }
@@ -33929,7 +34060,7 @@ const EditForm = _ref => {
         });
       }
     }
-    if (input.type === 'modal') {
+    if (input.type === "modal") {
       props.linkingform = {};
       props.datalink = input.dataLink;
       if (linkingForms[name]) {
@@ -33969,21 +34100,21 @@ const EditForm = _ref => {
       value,
       allowDupplicates: input.allowDupplicates,
       commentValue,
-      commentHint: input.commentHint ? input.commentHint : t('Please specify'),
+      commentHint: input.commentHint ? input.commentHint : t("Please specify"),
       rules: (input.rules || []).map(r => {
-        if (r.message && r.message.indexOf('errors::') >= 0) {
+        if (r.message && r.message.indexOf("errors::") >= 0) {
           r.message = t(r.message);
         }
         return r;
       }),
       template: input.template
     };
-    if (input.type === 'switch' && input.autocomplete) {
+    if (input.type === "switch" && input.autocomplete) {
       Object.assign(config, {
         autocomplete: input.autocomplete
       });
     }
-    if (input.type === 'switch') {
+    if (input.type === "switch") {
       if (input.replace) {
         Object.assign(config, {
           replace: input.replace
@@ -33995,16 +34126,16 @@ const EditForm = _ref => {
         });
       }
     }
-    if (input.type === 'linkingModal') {
+    if (input.type === "linkingModal") {
       Object.assign(config, {
         content: input.inputs
       });
     }
-    if (input.type === 'group') {
+    if (input.type === "group") {
       Object.assign(config, {
         groupInputs: Object.keys(input.groupInputs || {}).map(key => {
-          const isRep = path.split('.')[0].match(/\[/);
-          const newPath = path.split('.').length === 1 ? key : isRep && isRep.length ? path.split('.')[0] + ".".concat(key) : path.split('.')[0] + ".".concat(key);
+          const isRep = path.split(".")[0].match(/\[/);
+          const newPath = path.split(".").length === 1 ? key : isRep && isRep.length ? path.split(".")[0] + ".".concat(key) : path.split(".")[0] + ".".concat(key);
           const groupInp = input.groupInputs[key];
           const inputData = getData(groupInp.dataId || key, input.groupInputs[key], dot__default["default"].pick(newPath, values), null, newPath);
           return {
@@ -34023,11 +34154,11 @@ const EditForm = _ref => {
         })
       });
     }
-    if (input.type === 'groupInputs') {
+    if (input.type === "groupInputs") {
       Object.assign(config, {
         groupInputs: Object.keys(input.inputs || {}).map(key => {
-          const isRep = path.split('.')[0].match(/\[/);
-          const newPath = path.split('.').length === 1 ? key : isRep && isRep.length ? path.split('.')[0] + ".".concat(key) : path.split('.')[0] + ".".concat(key);
+          const isRep = path.split(".")[0].match(/\[/);
+          const newPath = path.split(".").length === 1 ? key : isRep && isRep.length ? path.split(".")[0] + ".".concat(key) : path.split(".")[0] + ".".concat(key);
           const groupInp = input.inputs[key];
           const inputData = getData(groupInp.dataId || key, input.inputs[key], dot__default["default"].pick(newPath, values), null, newPath);
           return {
@@ -34069,21 +34200,21 @@ const EditForm = _ref => {
           style: {
             maxWidth: 700
           },
-          className: "main-form".concat(formClass ? " ".concat(formClass) : ''),
+          className: "main-form".concat(formClass ? " ".concat(formClass) : ""),
           onValuesChange: (_changedValue, _allValues) => {
             const changedValue = _objectSpread2({}, _changedValue);
             const allValues = _objectSpread2({}, _allValues);
 
             // AjaxSubGroup fix, so meta dont get lost
             Object.keys(_allValues || {}).forEach(key => {
-              if (key && values[key] && values[key].meta && typeof values[key] === 'object') {
+              if (key && values[key] && values[key].meta && typeof values[key] === "object") {
                 changedValue[key] = _objectSpread2(_objectSpread2({}, values[key]), _changedValue[key]);
                 allValues[key] = _objectSpread2(_objectSpread2({}, values[key]), _allValues[key]);
               }
             });
             const cleanedChangeValue = convertUndefinedToNull(changedValue);
             const cleanedAllValues = convertUndefinedToNull(_objectSpread2(_objectSpread2({}, values), allValues));
-            if ('associatedMine' in cleanedChangeValue && cleanedChangeValue.associatedMine === null && values.associatedMine != null) {
+            if ("associatedMine" in cleanedChangeValue && cleanedChangeValue.associatedMine === null && values.associatedMine != null) {
               cleanedChangeValue.associatedMine = values.associatedMine;
               cleanedAllValues.associatedMine = values.associatedMine;
             }
@@ -34099,7 +34230,7 @@ const EditForm = _ref => {
             //   ...allValues
             // });
           },
-          children: [definition, introText && introText !== '' ? /*#__PURE__*/jsxRuntime.jsx("p", {
+          children: [definition, introText && introText !== "" ? /*#__PURE__*/jsxRuntime.jsx("p", {
             className: "repeatable",
             children: introText
           }) : null, options.alertConf && typeof options.alertConf === "object" ? /*#__PURE__*/jsxRuntime.jsx(antd.Alert, {
@@ -34111,10 +34242,10 @@ const EditForm = _ref => {
             const input = options[k];
 
             // Apply styling based on individual input type
-            const inputStyles = input.type === 'groupInputs' || input.type === 'phoneNumber' ? {} : {
-              '--static-width': input.type === 'group' && (_data$k = data[k]) !== null && _data$k !== void 0 && _data$k.noPlanningRequired ? '586px' : staticWidth
+            const inputStyles = input.type === "groupInputs" || input.type === "phoneNumber" ? {} : {
+              "--static-width": input.type === "group" && (_data$k = data[k]) !== null && _data$k !== void 0 && _data$k.noPlanningRequired ? "586px" : staticWidth
             };
-            if (input.type === 'ajaxSubGroup') {
+            if (input.type === "ajaxSubGroup") {
               return /*#__PURE__*/jsxRuntime.jsx("div", {
                 style: inputStyles,
                 children: /*#__PURE__*/jsxRuntime.jsx(AjaxSubGroup, {
@@ -34141,9 +34272,9 @@ const EditForm = _ref => {
                   user: user
                 })
               }, i);
-            } else if (input.inputs && input.type !== 'groupInputs' && input.type !== 'groupCheckbox' && input.type !== 'dataLinkGroup') {
+            } else if (input.inputs && input.type !== "groupInputs" && input.type !== "groupCheckbox" && input.type !== "dataLinkGroup") {
               return /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: formatClassname(['group', !input.repeatable && 'sub-group']),
+                className: formatClassname(["group", !input.repeatable && "sub-group"]),
                 style: inputStyles,
                 children: renderNestedInputs$1(options, k, setValues, values, excludedKeys, i, formTitles, getData, MainForm, plainForms, setAddress, onValuesChange, data, _objectSpread2(_objectSpread2({}, allData), {}, {
                   subGroupTitle
@@ -34168,7 +34299,7 @@ const EditForm = _ref => {
                   highlightMandatory: highlightMandatory,
                   changeInputMeta: changeInputMeta,
                   changeLinking: changeLinking,
-                  inputMeta: inputsMeta[k],
+                  inputMeta: inputsMeta[k] || {},
                   values: values,
                   MainForm: MainForm,
                   options: options,
@@ -34225,12 +34356,12 @@ const EditForm = _ref => {
             });
           }
         },
-        children: t('Save')
+        children: t("Save")
       }), /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
         loading: isSubmitting,
         disabled: isSubmitting,
         onClick: () => onCancel(),
-        children: t('Cancel')
+        children: t("Cancel")
       })]
     })]
   });
@@ -61662,6 +61793,7 @@ exports.SelectFiltersTimeFrame = Timeframe;
 exports.SettingsPopover = SettingsPopover;
 exports.Sidenav = Sidenav;
 exports.SidenavMenu = SidenavMenu;
+exports.SimpleGlobe = SimpleGlobe;
 exports.StackChart = StackChart;
 exports.StakeholderMappings = index$1;
 exports.Steps = DAFSteps;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.264",
+	"version": "0.6.266",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",
@@ -15,7 +15,7 @@
 		"buffer": "^6.0.3",
 		"countries-list": "^2.6.1",
 		"country-city-location": "^1.0.13",
-		"datastake-daf": "0.6.184",
+		"datastake-daf": "^0.6.263",
 		"dayjs": "^1.11.12",
 		"deepmerge": "^4.3.1",
 		"dot-object": "^2.1.5",

package/src/@daf/core/components/Dashboard/Globe/README.md

@@ -0,0 +1,106 @@
+# SimpleGlobe Component
+
+A simplified wrapper for the Globe component that makes it easy to display project data as pins on a 3D globe.
+
+## Features
+
+- 🗺️ **3D Globe Visualization**: Interactive 3D globe using Mapbox GL JS
+- 📍 **Pin-based Display**: Projects are displayed as clickable pins on the globe
+- 🎯 **Simple Integration**: Just pass your project data and it works
+- 📊 **Rich Tooltips**: Hover over pins to see project details
+- 🎨 **Customizable**: Support for custom map configurations
+
+## Quick Start
+
+```jsx
+import SimpleGlobe from './SimpleGlobe';
+
+const MyComponent = () => {
+  const projects = [
+    {
+      name: "Solar Project",
+      latitude: 14.7167,
+      longitude: -17.4677,
+      percentageCompletion: 75,
+      projectDescription: "Large-scale solar energy project"
+    }
+  ];
+
+  return (
+    <div style={{ width: '100%', height: '600px' }}>
+      <SimpleGlobe 
+        projects={projects}
+        onProjectClick={(project) => console.log('Clicked:', project)}
+      />
+    </div>
+  );
+};
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `projects` | `Array` | `[]` | Array of project objects |
+| `mapConfig` | `Object` | `{}` | Map configuration options |
+| `showSider` | `boolean` | `false` | Whether to show the sidebar |
+| `onProjectClick` | `Function` | `() => {}` | Callback when a project pin is clicked |
+
+## Project Data Format
+
+Your project objects should have the following structure:
+
+```javascript
+{
+  _id: "unique-id",                    // Optional: Unique identifier
+  name: "Project Name",                // Required: Project name
+  latitude: 14.7167,                  // Required: Latitude coordinate
+  longitude: -17.4677,                 // Required: Longitude coordinate
+  projectDescription: "Description",   // Optional: Project description
+  country: "SN",                       // Optional: Country code
+  sectoralScope: "energy",            // Optional: Project sector
+  percentageCompletion: 75,             // Optional: Completion percentage
+  author: { name: "Author Name" }      // Optional: Author information
+}
+```
+
+## Examples
+
+### Basic Usage
+```jsx
+<SimpleGlobe projects={myProjects} />
+```
+
+### With Sidebar
+```jsx
+<SimpleGlobe 
+  projects={myProjects} 
+  showSider={true} 
+/>
+```
+
+### With Custom Configuration
+```jsx
+<SimpleGlobe 
+  projects={myProjects}
+  mapConfig={{
+    maxZoom: 8,
+    minZoom: 2
+  }}
+  onProjectClick={(project) => {
+    // Handle project click
+    console.log('Project clicked:', project);
+  }}
+/>
+```
+
+## Storybook
+
+You can see all examples in Storybook under "Dashboard/Globe/SimpleGlobe".
+
+## Notes
+
+- The component automatically transforms your project data to the format expected by the underlying Globe component
+- Pins are displayed as circular markers with project completion percentage
+- Tooltips show project details when hovering over pins
+- The globe is fully interactive - you can zoom, pan, and rotate