globe.gl 2.25.3 → 2.26.2

package/README.md

@@ -33,6 +33,7 @@ And check out the [React bindings](https://github.com/vasturiano/react-globe.gl)
 * [Hollow Globe](https://vasturiano.github.io/globe.gl/example/hollow-globe/) ([source](https://github.com/vasturiano/globe.gl/blob/master/example/hollow-globe/index.html))
 * [Path Lines](https://vasturiano.github.io/globe.gl/example/random-paths/) ([source](https://github.com/vasturiano/globe.gl/blob/master/example/random-paths/index.html))
 * [Map Labels](https://vasturiano.github.io/globe.gl/example/world-cities/) ([source](https://github.com/vasturiano/globe.gl/blob/master/example/world-cities/index.html))
+* [HTML Markers](https://vasturiano.github.io/globe.gl/example/html-markers/) ([source](https://github.com/vasturiano/globe.gl/blob/master/example/html-markers/index.html))
 * [Hexed Country Polygons](https://vasturiano.github.io/globe.gl/example/hexed-polygons/) ([source](https://github.com/vasturiano/globe.gl/blob/master/example/hexed-polygons/index.html))
 * [Tiles](https://vasturiano.github.io/globe.gl/example/tiles/) ([source](https://github.com/vasturiano/globe.gl/blob/master/example/tiles/index.html))
 * [Ripple Rings](https://vasturiano.github.io/globe.gl/example/random-rings/) ([source](https://github.com/vasturiano/globe.gl/blob/master/example/random-rings/index.html))
@@ -73,6 +74,24 @@ myGlobe(myDOMElement)
 
 ## API reference
 
+* [Initialisation](#initialisation)
+* [Container Layout](#container-layout)
+* [Globe Layer](#globe-layer)
+* [Points Layer](#points-layer)
+* [Arcs Layer](#arcs-layer)
+* [Polygons Layer](#polygons-layer)
+* [Paths Layer](#paths-layer)
+* [Hex Bin Layer](#hex-bin-layer)
+* [Hexed Polygons Layer](#hexed-polygons-layer)
+* [Tiles Layer](#tiles-layer)
+* [Rings Layer](#rings-layer)
+* [Labels Layer](#labels-layer)
+* [HTML Elements Layer](#html-elements-layer)
+* [3D Objects Layer](#3d-objects-layer)
+* [Custom Layer](#custom-layer)
+* [Render Control](#render-control)
+* [Utility](#utility)
+
 ### Initialisation
 
 ```js
@@ -85,7 +104,7 @@ Globe({ configOptions })(<domElement>)
 | <b>waitForGlobeReady</b>: <i>boolean</i> | Whether to wait until the globe wrapping or background image has been fully loaded before rendering the globe or any of the data layers. | `true` |
 | <b>animateIn</b>: <i>boolean</i> | Whether to animate the globe initialization, by scaling and rotating the globe into its inital position. | `true` |
 
-### Container layout
+### Container Layout
 
 | Method | Description | Default |
 | --- | --- | :--: |
@@ -324,7 +343,22 @@ Globe({ configOptions })(<domElement>)
 | <b>onLabelRightClick</b>(<i>fn</i>) | Callback function for label right-clicks. The label object, the event object and the clicked coordinates are included as arguments: `onLabelRightClick(label, event, { lat, lng, altitude })`. | - |
 | <b>onLabelHover</b>(<i>fn</i>) | Callback function for label mouse over events. The label object (or `null` if there's no label under the mouse line of sight) is included as the first argument, and the previous label object (or `null`) as second argument: `onLabelHover(label, prevlabel)`. | - |
 
-### Objects Layer
+### HTML Elements Layer
+
+<p align="center">
+   <a href="//vasturiano.github.io/globe.gl/example/html-markers/"><img width="70%" src="https://vasturiano.github.io/globe.gl/example/html-markers/preview.png"></a>
+</p>
+
+| Method | Description | Default |
+| --- | --- | :--: |
+| <b>htmlElementsData</b>([<i>array</i>]) | Getter/setter for the list of objects to represent in the HTML elements map layer. Each HTML element is rendered using [ThreeJS CSS2DRenderer](https://threejs.org/docs/#examples/en/renderers/CSS2DRenderer). | `[]` |
+| <b>htmlLat</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | HTML element accessor function, attribute or a numeric constant for the latitude coordinate of the element's central position. | `lat` |
+| <b>htmlLng</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | HTML element accessor function, attribute or a numeric constant for the longitude coordinate of the element's central position. | `lng` |
+| <b>htmlAltitude</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | HTML element accessor function, attribute or a numeric constant for the altitude coordinate of the element's position, in terms of globe radius units. | 0 |
+| <b>htmlElement</b>([<i>str</i> or <i>fn</i>]) | Accessor function or attribute to retrieve the DOM element to use. Should return an instance of [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `null` |
+| <b>htmlTransitionDuration</b>([<i>num</i>]) | Getter/setter for duration (ms) of the transition to animate HTML elements position changes. A value of `0` will move the elements immediately to their final position. | 1000 |
+
+### 3D Objects Layer
 
 <p align="center">
    <a href="//vasturiano.github.io/globe.gl/example/satellites/"><img width="70%" src="https://vasturiano.github.io/globe.gl/example/satellites/preview.png"></a>
@@ -358,7 +392,7 @@ Globe({ configOptions })(<domElement>)
 | <b>onCustomLayerRightClick</b>(<i>fn</i>) | Callback function for custom object right-clicks. The custom object, the event object and the clicked coordinates are included as arguments: `onCustomLayerRightClick(obj, event, { lat, lng, altitude })`. | - |
 | <b>onCustomLayerHover</b>(<i>fn</i>) | Callback function for custom object mouse over events. The custom object (or `null` if there's no object under the mouse line of sight) is included as the first argument, and the previous custom object (or `null`) as second argument: `onCustomLayerHover(obj, prevObj)`. | - |
 
-### Render control
+### Render Control
 
 | Method | Description | Default |
 | --- | --- | :--: |

package/dist/globe.gl.common.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var three$1 = require('three');
+var three = require('three');
+var CSS2DRenderer_js = require('three/examples/jsm/renderers/CSS2DRenderer.js');
 var ThreeGlobe = require('three-globe');
 var ThreeRenderObjects = require('three-render-objects');
 var accessorFn = require('accessor-fn');
@@ -189,16 +190,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: three$1.AmbientLight,
-  DirectionalLight: three$1.DirectionalLight,
-  Vector2: three$1.Vector2
-};
+  AmbientLight: three.AmbientLight,
+  DirectionalLight: three.DirectionalLight,
+  Vector2: three.Vector2
+}), {}, {
+  CSS2DRenderer: CSS2DRenderer_js.CSS2DRenderer
+});
 // Expose config from ThreeGlobe
 
 var bindGlobe = linkKapsule('globe', ThreeGlobe__default["default"]);
-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) {
@@ -213,7 +217,6 @@ var linkedRenderObjsMethods = Object.assign.apply(Object, _toConsumableArray(['p
   return _defineProperty({}, p, bindRenderObjs.linkMethod(p));
 }))); //
 
-var GLOBE_RADIUS = 100;
 var globe = Kapsule__default["default"]({
   props: _objectSpread2(_objectSpread2({
     onZoom: {
@@ -489,6 +492,7 @@ var globe = Kapsule__default["default"]({
       this.hexPolygonsData([]);
       this.tilesData([]);
       this.labelsData([]);
+      this.htmlElementsData([]);
       this.objectsData([]);
       this.customLayerData([]);
     }
@@ -499,15 +503,18 @@ var globe = Kapsule__default["default"]({
         waitForGlobeReady = _ref6$waitForGlobeRea === void 0 ? true : _ref6$waitForGlobeRea,
         globeInitConfig = _objectWithoutProperties(_ref6, _excluded);
 
+    var globe = new ThreeGlobe__default["default"](_objectSpread2({
+      waitForGlobeReady: waitForGlobeReady
+    }, globeInitConfig));
     return {
-      globe: new ThreeGlobe__default["default"](_objectSpread2({
-        waitForGlobeReady: waitForGlobeReady
-      }, globeInitConfig)),
+      globe: globe,
       renderObjs: ThreeRenderObjects__default["default"]({
         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) {
@@ -523,18 +530,19 @@ var globe = Kapsule__default["default"]({
     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;
@@ -548,7 +556,9 @@ var globe = Kapsule__default["default"]({
       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
 
@@ -595,7 +605,7 @@ var globe = Kapsule__default["default"]({
       }
     };
     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/dist/globe.gl.d.ts

@@ -1,4 +1,4 @@
-import { WebGLRendererParameters, Scene, Camera, WebGLRenderer, Object3D } from 'three';
+import { WebGLRendererParameters, Scene, Camera, WebGLRenderer } from 'three';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { ConfigOptions as ConfigOptions$1, ThreeGlobeGeneric } from 'three-globe';
 
@@ -23,7 +23,11 @@ interface GeoCoords {
 
 type PointerEventsFilterFn = (object: Object3D, data?: object) => boolean;
 
-interface GlobeGenericInstance<ChainableInstance> extends ThreeGlobeGeneric<ChainableInstance> {
+// don't surface these internal props from inner ThreeGlobe
+type ExcludedInnerProps = 'setPointOfView';
+
+interface GlobeGenericInstance<ChainableInstance>
+  extends Omit<ThreeGlobeGeneric<ChainableInstance>, ExcludedInnerProps> {
   (element: HTMLElement): ChainableInstance;
   resetProps(): ChainableInstance;
   _destructor(): void;