globe.gl 2.25.3 → 2.26.2

package/dist/globe.gl.module.js

@@ -1,4 +1,5 @@
 import { AmbientLight, DirectionalLight, Vector2 } from 'three';
+import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 import ThreeGlobe from 'three-globe';
 import ThreeRenderObjects from 'three-render-objects';
 import accessorFn from 'accessor-fn';
@@ -179,16 +180,19 @@ function linkKapsule (kapsulePropName, kapsuleType) {
 }
 
 var _excluded = ["rendererConfig", "waitForGlobeReady"];
-var three = window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
+
+var THREE = _objectSpread2(_objectSpread2({}, window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
 : {
   AmbientLight: AmbientLight,
   DirectionalLight: DirectionalLight,
   Vector2: Vector2
-};
+}), {}, {
+  CSS2DRenderer: CSS2DRenderer
+});
 // Expose config from ThreeGlobe
 
 var bindGlobe = linkKapsule('globe', ThreeGlobe);
-var linkedGlobeProps = Object.assign.apply(Object, _toConsumableArray(['globeImageUrl', 'bumpImageUrl', 'showGlobe', 'showGraticules', 'showAtmosphere', 'atmosphereColor', 'atmosphereAltitude', 'globeMaterial', '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', 'hexBinPointsData', 'hexBinPointLat', 'hexBinPointLng', 'hexBinPointWeight', 'hexBinResolution', 'hexMargin', 'hexTopCurvatureResolution', 'hexTopColor', 'hexSideColor', 'hexAltitude', 'hexBinMerge', 'hexTransitionDuration', 'hexPolygonsData', 'hexPolygonGeoJsonGeometry', 'hexPolygonColor', 'hexPolygonAltitude', 'hexPolygonResolution', 'hexPolygonMargin', 'hexPolygonCurvatureResolution', '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', 'objectsData', 'objectLat', 'objectLng', 'objectAltitude', 'objectThreeObject', 'customLayerData', 'customThreeObject', 'customThreeObjectUpdate'].map(function (p) {
+var linkedGlobeProps = Object.assign.apply(Object, _toConsumableArray(['globeImageUrl', 'bumpImageUrl', 'showGlobe', 'showGraticules', 'showAtmosphere', 'atmosphereColor', 'atmosphereAltitude', 'globeMaterial', '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', 'hexBinPointsData', 'hexBinPointLat', 'hexBinPointLng', 'hexBinPointWeight', 'hexBinResolution', 'hexMargin', 'hexTopCurvatureResolution', 'hexTopColor', 'hexSideColor', 'hexAltitude', 'hexBinMerge', 'hexTransitionDuration', 'hexPolygonsData', 'hexPolygonGeoJsonGeometry', 'hexPolygonColor', 'hexPolygonAltitude', 'hexPolygonResolution', 'hexPolygonMargin', 'hexPolygonCurvatureResolution', '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', 'objectThreeObject', 'customLayerData', 'customThreeObject', 'customThreeObjectUpdate'].map(function (p) {
   return _defineProperty({}, p, bindGlobe.linkProp(p));
 })));
 var linkedGlobeMethods = Object.assign.apply(Object, _toConsumableArray(['getGlobeRadius', 'getCoords', 'toGeoCoords'].map(function (p) {
@@ -203,7 +207,6 @@ var linkedRenderObjsMethods = Object.assign.apply(Object, _toConsumableArray(['p
   return _defineProperty({}, p, bindRenderObjs.linkMethod(p));
 }))); //
 
-var GLOBE_RADIUS = 100;
 var globe = Kapsule({
   props: _objectSpread2(_objectSpread2({
     onZoom: {
@@ -479,6 +482,7 @@ var globe = Kapsule({
       this.hexPolygonsData([]);
       this.tilesData([]);
       this.labelsData([]);
+      this.htmlElementsData([]);
       this.objectsData([]);
       this.customLayerData([]);
     }
@@ -489,15 +493,18 @@ var globe = Kapsule({
         waitForGlobeReady = _ref6$waitForGlobeRea === void 0 ? true : _ref6$waitForGlobeRea,
         globeInitConfig = _objectWithoutProperties(_ref6, _excluded);
 
+    var globe = new ThreeGlobe(_objectSpread2({
+      waitForGlobeReady: waitForGlobeReady
+    }, globeInitConfig));
     return {
-      globe: new ThreeGlobe(_objectSpread2({
-        waitForGlobeReady: waitForGlobeReady
-      }, globeInitConfig)),
+      globe: globe,
       renderObjs: ThreeRenderObjects({
         controlType: 'orbit',
         rendererConfig: rendererConfig,
-        waitForLoadComplete: waitForGlobeReady
-      }).skyRadius(GLOBE_RADIUS * 500).showNavInfo(false)
+        waitForLoadComplete: waitForGlobeReady,
+        extraRenderers: [new THREE.CSS2DRenderer()] // Used in HTML elements layer
+
+      }).skyRadius(globe.getGlobeRadius() * 500).showNavInfo(false)
     };
   },
   init: function init(domNode, state) {
@@ -513,18 +520,19 @@ var globe = Kapsule({
     state.container.appendChild(roDomNode);
     state.renderObjs(roDomNode); // inject renderer size on three-globe
 
-    state.globe.rendererSize(state.renderObjs.renderer().getSize(new three.Vector2())); // set initial distance
+    state.globe.rendererSize(state.renderObjs.renderer().getSize(new THREE.Vector2())); // set initial distance
 
     this.pointOfView({
       altitude: 2.5
     }); // calibrate orbit controls
 
+    var globeR = state.globe.getGlobeRadius();
     var controls = state.renderObjs.controls();
-    controls.minDistance = GLOBE_RADIUS * 1.01; // just above the surface
+    controls.minDistance = globeR * 1.01; // just above the surface
 
     setTimeout(function () {
-      return controls.maxDistance = GLOBE_RADIUS * 100;
-    }); // apply async  after renderObjs sets maxDistance
+      return controls.maxDistance = globeR * 100;
+    }); // apply async after renderObjs sets maxDistance
 
     controls.enablePan = false;
     controls.enableDamping = true;
@@ -538,7 +546,9 @@ var globe = Kapsule({
       controls.rotateSpeed = pov.altitude * 0.2; // Math.pow(pov.altitude + 1, 2) * 0.025;
 
       controls.zoomSpeed = (pov.altitude + 1) * 0.1; // Math.sqrt(pov.altitude) * 0.2;
+      // Update three-globe pov when camera moves, for proper hiding of elements
 
+      state.globe.setPointOfView(state.renderObjs.camera().position);
       state.onZoom && state.onZoom(pov);
     }); // config renderObjs
 
@@ -585,7 +595,7 @@ var globe = Kapsule({
       }
     };
     state.renderObjs.objects([// Populate scene
-    new three.AmbientLight(0xbbbbbb), new three.DirectionalLight(0xffffff, 0.6), state.globe]).hoverOrderComparator(function (a, b) {
+    new THREE.AmbientLight(0xbbbbbb), new THREE.DirectionalLight(0xffffff, 0.6), state.globe]).hoverOrderComparator(function (a, b) {
       var aObj = getGlobeObj(a);
       var bObj = getGlobeObj(b); // de-prioritize background / non-globe objects
 

package/example/html-markers/index.html

@@ -0,0 +1,42 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/globe.gl"></script>
+<!--  <script src="../../dist/globe.gl.js"></script>-->
+</head>
+
+<body>
+<div id="globeViz"></div>
+
+<script>
+  const markerSvg = `<svg viewBox="-4 0 36 36">
+    <path fill="currentColor" d="M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z"></path>
+    <circle fill="black" cx="14" cy="14" r="7"></circle>
+  </svg>`;
+
+  // Gen random data
+  const N = 30;
+  const gData = [...Array(N).keys()].map(() => ({
+    lat: (Math.random() - 0.5) * 180,
+    lng: (Math.random() - 0.5) * 360,
+    size: 7 + Math.random() * 30,
+    color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]
+  }));
+
+  Globe()
+    .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
+    .htmlElementsData(gData)
+    .htmlElement(d => {
+      const el = document.createElement('div');
+      el.innerHTML = markerSvg;
+      el.style.color = d.color;
+      el.style.width = `${d.size}px`;
+
+      el.style['pointer-events'] = 'auto';
+      el.style.cursor = 'pointer';
+      el.onclick = () => console.info(d);
+      return el;
+    })
+    (document.getElementById('globeViz'));
+</script>
+</body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "globe.gl",
-  "version": "2.25.3",
+  "version": "2.26.2",
   "description": "UI component for Globe Data Visualization using ThreeJS/WebGL",
   "unpkg": "dist/globe.gl.min.js",
   "jsdelivr": "dist/globe.gl.min.js",
@@ -43,23 +43,23 @@
     "accessor-fn": "1",
     "kapsule": "^1.13",
     "three": ">=0.118 <1",
-    "three-globe": "^2.23",
+    "three-globe": "^2.24",
     "three-render-objects": "^1.26"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
-    "@babel/preset-env": "^7.16.11",
+    "@babel/core": "^7.18.2",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+    "@babel/preset-env": "^7.18.2",
     "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^21.0.2",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "postcss": "^8.4.7",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "postcss": "^8.4.14",
     "rimraf": "^3.0.2",
-    "rollup": "^2.68.0",
-    "rollup-plugin-dts": "^4.1.0",
+    "rollup": "^2.75.0",
+    "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.5.5"
+    "typescript": "^4.7.2"
   }
 }