globe.gl 2.38.0 → 2.39.0

package/dist/globe.gl.mjs

@@ -166,7 +166,7 @@ var THREE = _objectSpread2(_objectSpread2({}, window.THREE ? window.THREE // Pre
 
 // Expose config from ThreeGlobe
 var bindGlobe = linkKapsule('globe', ThreeGlobe);
-var linkedGlobeProps = Object.assign.apply(Object, _toConsumableArray(['globeImageUrl', 'bumpImageUrl', 'globeTileEngineUrl', 'globeTileEngineMaxLevel', 'showGlobe', 'showGraticules', 'showAtmosphere', 'atmosphereColor', 'atmosphereAltitude', 'onGlobeReady', 'pointsData', 'pointLat', 'pointLng', 'pointColor', 'pointAltitude', 'pointRadius', 'pointResolution', 'pointsMerge', 'pointsTransitionDuration', 'arcsData', 'arcStartLat', 'arcStartLng', 'arcEndLat', 'arcEndLng', 'arcColor', 'arcAltitude', 'arcAltitudeAutoScale', 'arcStroke', 'arcCurveResolution', 'arcCircularResolution', 'arcDashLength', 'arcDashGap', 'arcDashInitialGap', 'arcDashAnimateTime', 'arcsTransitionDuration', 'polygonsData', 'polygonGeoJsonGeometry', 'polygonCapColor', 'polygonCapMaterial', 'polygonSideColor', 'polygonSideMaterial', 'polygonStrokeColor', 'polygonAltitude', 'polygonCapCurvatureResolution', 'polygonsTransitionDuration', 'pathsData', 'pathPoints', 'pathPointLat', 'pathPointLng', 'pathPointAlt', 'pathResolution', 'pathColor', 'pathStroke', 'pathDashLength', 'pathDashGap', 'pathDashInitialGap', 'pathDashAnimateTime', 'pathTransitionDuration', 'heatmapsData', 'heatmapPoints', 'heatmapPointLat', 'heatmapPointLng', 'heatmapPointWeight', 'heatmapBandwidth', 'heatmapColorFn', 'heatmapColorSaturation', 'heatmapBaseAltitude', 'heatmapTopAltitude', 'heatmapsTransitionDuration', 'hexBinPointsData', 'hexBinPointLat', 'hexBinPointLng', 'hexBinPointWeight', 'hexBinResolution', 'hexMargin', 'hexTopCurvatureResolution', 'hexTopColor', 'hexSideColor', 'hexAltitude', 'hexBinMerge', 'hexTransitionDuration', 'hexPolygonsData', 'hexPolygonGeoJsonGeometry', 'hexPolygonColor', 'hexPolygonAltitude', 'hexPolygonResolution', 'hexPolygonMargin', 'hexPolygonUseDots', 'hexPolygonCurvatureResolution', 'hexPolygonDotResolution', 'hexPolygonsTransitionDuration', 'tilesData', 'tileLat', 'tileLng', 'tileAltitude', 'tileWidth', 'tileHeight', 'tileUseGlobeProjection', 'tileMaterial', 'tileCurvatureResolution', 'tilesTransitionDuration', 'ringsData', 'ringLat', 'ringLng', 'ringAltitude', 'ringColor', 'ringResolution', 'ringMaxRadius', 'ringPropagationSpeed', 'ringRepeatPeriod', 'labelsData', 'labelLat', 'labelLng', 'labelAltitude', 'labelRotation', 'labelText', 'labelSize', 'labelTypeFace', 'labelColor', 'labelResolution', 'labelIncludeDot', 'labelDotRadius', 'labelDotOrientation', 'labelsTransitionDuration', 'htmlElementsData', 'htmlLat', 'htmlLng', 'htmlAltitude', 'htmlElement', 'htmlTransitionDuration', 'objectsData', 'objectLat', 'objectLng', 'objectAltitude', 'objectRotation', 'objectFacesSurface', 'objectThreeObject', 'customLayerData', 'customThreeObject', 'customThreeObjectUpdate'].map(function (p) {
+var linkedGlobeProps = Object.assign.apply(Object, _toConsumableArray(['globeImageUrl', 'bumpImageUrl', 'globeTileEngineUrl', 'globeTileEngineMaxLevel', 'showGlobe', 'showGraticules', 'showAtmosphere', 'atmosphereColor', 'atmosphereAltitude', 'onGlobeReady', 'pointsData', 'pointLat', 'pointLng', 'pointColor', 'pointAltitude', 'pointRadius', 'pointResolution', 'pointsMerge', 'pointsTransitionDuration', 'arcsData', 'arcStartLat', 'arcStartLng', 'arcEndLat', 'arcEndLng', 'arcColor', 'arcAltitude', 'arcAltitudeAutoScale', 'arcStroke', 'arcCurveResolution', 'arcCircularResolution', 'arcDashLength', 'arcDashGap', 'arcDashInitialGap', 'arcDashAnimateTime', 'arcsTransitionDuration', 'polygonsData', 'polygonGeoJsonGeometry', 'polygonCapColor', 'polygonCapMaterial', 'polygonSideColor', 'polygonSideMaterial', 'polygonStrokeColor', 'polygonAltitude', 'polygonCapCurvatureResolution', 'polygonsTransitionDuration', 'pathsData', 'pathPoints', 'pathPointLat', 'pathPointLng', 'pathPointAlt', 'pathResolution', 'pathColor', 'pathStroke', 'pathDashLength', 'pathDashGap', 'pathDashInitialGap', 'pathDashAnimateTime', 'pathTransitionDuration', 'heatmapsData', 'heatmapPoints', 'heatmapPointLat', 'heatmapPointLng', 'heatmapPointWeight', 'heatmapBandwidth', 'heatmapColorFn', 'heatmapColorSaturation', 'heatmapBaseAltitude', 'heatmapTopAltitude', 'heatmapsTransitionDuration', 'hexBinPointsData', 'hexBinPointLat', 'hexBinPointLng', 'hexBinPointWeight', 'hexBinResolution', 'hexMargin', 'hexTopCurvatureResolution', 'hexTopColor', 'hexSideColor', 'hexAltitude', 'hexBinMerge', 'hexTransitionDuration', 'hexPolygonsData', 'hexPolygonGeoJsonGeometry', 'hexPolygonColor', 'hexPolygonAltitude', 'hexPolygonResolution', 'hexPolygonMargin', 'hexPolygonUseDots', 'hexPolygonCurvatureResolution', 'hexPolygonDotResolution', 'hexPolygonsTransitionDuration', 'tilesData', 'tileLat', 'tileLng', 'tileAltitude', 'tileWidth', 'tileHeight', 'tileUseGlobeProjection', 'tileMaterial', 'tileCurvatureResolution', 'tilesTransitionDuration', 'particlesData', 'particlesList', 'particleLat', 'particleLng', 'particleAltitude', 'particlesSize', 'particlesSizeAttenuation', 'particlesColor', 'particlesTexture', 'ringsData', 'ringLat', 'ringLng', 'ringAltitude', 'ringColor', 'ringResolution', 'ringMaxRadius', 'ringPropagationSpeed', 'ringRepeatPeriod', 'labelsData', 'labelLat', 'labelLng', 'labelAltitude', 'labelRotation', 'labelText', 'labelSize', 'labelTypeFace', 'labelColor', 'labelResolution', 'labelIncludeDot', 'labelDotRadius', 'labelDotOrientation', 'labelsTransitionDuration', 'htmlElementsData', 'htmlLat', 'htmlLng', 'htmlAltitude', 'htmlElement', 'htmlTransitionDuration', 'objectsData', 'objectLat', 'objectLng', 'objectAltitude', 'objectRotation', 'objectFacesSurface', 'objectThreeObject', 'customLayerData', 'customThreeObject', 'customThreeObjectUpdate'].map(function (p) {
   return _defineProperty({}, p, bindGlobe.linkProp(p));
 })));
 var linkedGlobeMethods = Object.assign.apply(Object, _toConsumableArray(['globeMaterial', 'getGlobeRadius', 'getCoords', 'toGeoCoords'].map(function (p) {
@@ -293,6 +293,19 @@ var globe = Kapsule({
     onTileHover: {
       triggerUpdate: false
     },
+    particleLabel: {
+      "default": 'name',
+      triggerUpdate: false
+    },
+    onParticleClick: {
+      triggerUpdate: false
+    },
+    onParticleRightClick: {
+      triggerUpdate: false
+    },
+    onParticleHover: {
+      triggerUpdate: false
+    },
     labelLabel: {
       triggerUpdate: false
     },
@@ -346,7 +359,8 @@ var globe = Kapsule({
       "default": 0.2,
       triggerUpdate: false,
       onChange: function onChange(val, state) {
-        return state.renderObjs.lineHoverPrecision(val);
+        state.renderObjs.lineHoverPrecision(val);
+        state.renderObjs.pointsHoverPrecision(val);
       }
     }
   }, linkedGlobeProps), linkedRenderObjsProps),
@@ -463,6 +477,7 @@ var globe = Kapsule({
       this.hexBinPointsData([]);
       this.hexPolygonsData([]);
       this.tilesData([]);
+      this.particlesData([]);
       this.labelsData([]);
       this.htmlElementsData([]);
       this.objectsData([]);
@@ -570,6 +585,9 @@ var globe = Kapsule({
       tile: function tile(d) {
         return d;
       },
+      particles: function particles(d, intersection) {
+        return !intersection || !intersection.hasOwnProperty('index') || d.length <= intersection.index ? d : d[intersection.index];
+      },
       label: function label(d) {
         return d;
       },
@@ -590,7 +608,7 @@ var globe = Kapsule({
         return !o;
       }; // || o.__globeObjType === 'globe' || o.__globeObjType === 'atmosphere';
       return isBackground(aObj) - isBackground(bObj);
-    }).tooltipContent(function (obj) {
+    }).tooltipContent(function (obj, intersection) {
       var objAccessors = {
         point: state.pointLabel,
         arc: state.arcLabel,
@@ -599,14 +617,15 @@ var globe = Kapsule({
         hexbin: state.hexLabel,
         hexPolygon: state.hexPolygonLabel,
         tile: state.tileLabel,
+        particles: state.particleLabel,
         label: state.labelLabel,
         object: state.objectLabel,
         custom: state.customLayerLabel
       };
       var globeObj = getGlobeObj(obj);
       var objType = globeObj && globeObj.__globeObjType;
-      return globeObj && objType && objAccessors.hasOwnProperty(objType) && dataAccessors.hasOwnProperty(objType) ? accessorFn(objAccessors[objType])(dataAccessors[objType](globeObj.__data)) || '' : '';
-    }).onHover(function (obj) {
+      return globeObj && objType && objAccessors.hasOwnProperty(objType) && dataAccessors.hasOwnProperty(objType) ? accessorFn(objAccessors[objType])(dataAccessors[objType](globeObj.__data, intersection)) || '' : '';
+    }).onHover(function (obj, _, intersection) {
       // Update tooltip and trigger onHover events
       var hoverObjFns = {
         point: state.onPointHover,
@@ -617,6 +636,7 @@ var globe = Kapsule({
         hexbin: state.onHexHover,
         hexPolygon: state.onHexPolygonHover,
         tile: state.onTileHover,
+        particles: state.onParticleHover,
         label: state.onLabelHover,
         object: state.onObjectHover,
         custom: state.onCustomLayerHover
@@ -631,6 +651,7 @@ var globe = Kapsule({
         hexbin: state.onHexClick,
         hexPolygon: state.onHexPolygonClick,
         tile: state.onTileClick,
+        particles: state.onParticleClick,
         label: state.onLabelClick,
         object: state.onObjectClick,
         custom: state.onCustomLayerClick
@@ -641,12 +662,12 @@ var globe = Kapsule({
       hoverObj && !hoverObjFns.hasOwnProperty(hoverObj.__globeObjType) && (hoverObj = null);
       if (hoverObj !== state.hoverObj) {
         var prevObjType = state.hoverObj ? state.hoverObj.__globeObjType : null;
-        var prevObjData = state.hoverObj ? dataAccessors[prevObjType](state.hoverObj.__data) : null;
+        var prevObjData = state.hoverData;
         var objType = hoverObj ? hoverObj.__globeObjType : null;
-        var objData = hoverObj ? dataAccessors[objType](hoverObj.__data) : null;
+        var objData = hoverObj ? dataAccessors[objType](hoverObj.__data, intersection) : null;
         if (prevObjType && prevObjType !== objType) {
           // Hover out
-          hoverObjFns[prevObjType] && hoverObjFns[prevObjType](null, prevObjData);
+          hoverObjFns[prevObjType] && hoverObjFns[prevObjType](null, prevObjData || null);
         }
         if (objType) {
           // Hover in
@@ -656,8 +677,9 @@ var globe = Kapsule({
         // set pointer if hovered object is clickable
         state.renderObjs.renderer().domElement.classList[objType && clickObjFns[objType] ? 'add' : 'remove']('clickable');
         state.hoverObj = hoverObj;
+        state.hoverData = objData;
       }
-    }).onClick(function (obj, ev, point) {
+    }).onClick(function (obj, ev, intersection) {
       if (!obj) return; // ignore background clicks
 
       // Handle click events on objects
@@ -671,6 +693,7 @@ var globe = Kapsule({
         hexbin: state.onHexClick,
         hexPolygon: state.onHexPolygonClick,
         tile: state.onTileClick,
+        particles: state.onParticleClick,
         label: state.onLabelClick,
         object: state.onObjectClick,
         custom: state.onCustomLayerClick
@@ -681,6 +704,7 @@ var globe = Kapsule({
         var args = [ev];
 
         // include click coords
+        var point = intersection !== null && intersection !== undefined && intersection.isVector3 ? intersection : intersection === null || intersection === undefined ? undefined : intersection.point;
         if (objType === 'globe') {
           var _this$toGeoCoords = _this.toGeoCoords(point),
             lat = _this$toGeoCoords.lat,
@@ -692,10 +716,10 @@ var globe = Kapsule({
         } else {
           args.push(_this.toGeoCoords(point));
         }
-        dataAccessors.hasOwnProperty(objType) && args.unshift(dataAccessors[objType](globeObj.__data));
+        dataAccessors.hasOwnProperty(objType) && args.unshift(dataAccessors[objType](globeObj.__data, intersection));
         objFns[objType].apply(objFns, args);
       }
-    }).onRightClick(function (obj, ev, point) {
+    }).onRightClick(function (obj, ev, intersection) {
       if (!obj) return; // ignore background clicks
 
       // Handle right-click events
@@ -709,6 +733,7 @@ var globe = Kapsule({
         hexbin: state.onHexRightClick,
         hexPolygon: state.onHexPolygonRightClick,
         tile: state.onTileRightClick,
+        particles: state.onParticleRightClick,
         label: state.onLabelRightClick,
         object: state.onObjectRightClick,
         custom: state.onCustomLayerRightClick
@@ -719,6 +744,7 @@ var globe = Kapsule({
         var args = [ev];
 
         // include click coords
+        var point = intersection !== null && intersection !== undefined && intersection.isVector3 ? intersection : intersection === null || intersection === undefined ? undefined : intersection.point;
         if (objType === 'globe') {
           var _this$toGeoCoords2 = _this.toGeoCoords(point),
             lat = _this$toGeoCoords2.lat,
@@ -730,7 +756,7 @@ var globe = Kapsule({
         } else {
           args.push(_this.toGeoCoords(point));
         }
-        dataAccessors.hasOwnProperty(objType) && args.unshift(dataAccessors[objType](globeObj.__data));
+        dataAccessors.hasOwnProperty(objType) && args.unshift(dataAccessors[objType](globeObj.__data, intersection));
         objFns[objType].apply(objFns, args);
       }
     });

package/example/satellites/index.html

@@ -25,28 +25,21 @@
 
   <script type="module">
     import * as satellite from 'https://esm.sh/satellite.js';
-    import * as THREE from 'https://esm.sh/three';
 
     const EARTH_RADIUS_KM = 6371; // km
-    const SAT_SIZE = 100; // km
     const TIME_STEP = 3 * 1000; // per frame
 
     const timeLogger = document.getElementById('time-log');
 
     const world = new Globe(document.getElementById('chart'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
-      .objectLat('lat')
-      .objectLng('lng')
-      .objectAltitude('alt')
-      .objectFacesSurface(false)
-      .objectLabel('name');
+      .particleLat('lat')
+      .particleLng('lng')
+      .particleAltitude('alt')
+      .particlesColor(() => 'palegreen');
 
     setTimeout(() => world.pointOfView({ altitude: 3.5 }));
 
-    const satGeometry = new THREE.OctahedronGeometry(SAT_SIZE * world.getGlobeRadius() / EARTH_RADIUS_KM / 2, 0);
-    const satMaterial = new THREE.MeshLambertMaterial({ color: 'palegreen', transparent: true, opacity: 0.7 });
-    world.objectThreeObject(() => new THREE.Mesh(satGeometry, satMaterial));
-
     fetch('../datasets/space-track-leo.txt').then(r => r.text()).then(rawData => {
       const tleData = rawData.replace(/\r/g, '')
         .split(/\n(?=[^12])/)
@@ -57,8 +50,7 @@
         name: name.trim().replace(/^0 /, '')
       }))
       // exclude those that can't be propagated
-      .filter(d => !!satellite.propagate(d.satrec, new Date()).position)
-      .slice(0, 2000);
+      .filter(d => !!satellite.propagate(d.satrec, new Date()).position);
 
       // time ticker
       let time = new Date();
@@ -80,7 +72,7 @@
           }
         });
 
-        world.objectsData(satData);
+        world.particlesData([satData.filter(d => !isNaN(d.lat) && !isNaN(d.lng) && !isNaN(d.alt))]);
       })();
     });
   </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "globe.gl",
-  "version": "2.38.0",
+  "version": "2.39.0",
   "description": "UI component for Globe Data Visualization using ThreeJS/WebGL",
   "type": "module",
   "unpkg": "dist/globe.gl.min.js",
@@ -52,8 +52,8 @@
     "accessor-fn": "1",
     "kapsule": "^1.16",
     "three": ">=0.154 <1",
-    "three-globe": "^2.40",
-    "three-render-objects": "^1.35"
+    "three-globe": "^2.41",
+    "three-render-objects": "^1.37"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",