react-globe.gl 2.25.0 → 2.27.0

package/README.md

@@ -238,8 +238,8 @@ ReactDOM.render(
 | <b>heatmapBandwidth</b> | <i>number</i>, <i>string</i> or <i>func</i> | 4 | Heatmap object accessor function, attribute or a numeric constant for the heatmap bandwidth, in angular degrees. The bandwidth is an internal parameter of the [Gaussian kernel function](https://en.wikipedia.org/wiki/Gaussian_function) and defines how localized is the influence of a point on distant locations. A narrow bandwidth leads to a more spiky representation, while a broad one has smoother curves. |
 | <b>heatmapColorFn</b> | <i>string</i> or <i>func</i> | [Turbo colormap](https://blog.research.google/2019/08/turbo-improved-rainbow-colormap-for.html) interpolator with fading opacity | Heatmap object accessor function or attribute for the color interpolator function to represent density in the heatmap. This function should receive a number between `0` and `1` (or potentially higher if saturation > 1), and return a color string. |
 | <b>heatmapColorSaturation</b> | <i>number</i>, <i>string</i> or <i>func</i> | 1.5 | Heatmap object accessor function, attribute or a numeric constant for the color scale saturation. The saturation is a multiplier of the normalized density value (`[0,1]`) before passing it to the color interpolation function. It can be used to dampen outlier peaks in density and bring the data floor into view. |
-| <b>heatmapBaseAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.01 | Heatmap polygon object accessor function, attribute or a numeric constant for the heatmap base floor altitude in terms of globe radius units (`0` = 0 altitude, `1` = globe radius). |
-| <b>heatmapTopAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | - | Heatmap polygon object accessor function, attribute or a numeric constant for the heatmap top peak altitude in terms of globe radius units (`0` = 0 altitude, `1` = globe radius). An equal value to the base altitude will yield a surface flat heatmap. If a top altitude is set, the variations in density will be used to define the altitude curves between base and top. |
+| <b>heatmapBaseAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.01 | Heatmap object accessor function, attribute or a numeric constant for the heatmap base floor altitude in terms of globe radius units (`0` = 0 altitude, `1` = globe radius). |
+| <b>heatmapTopAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | - | Heatmap object accessor function, attribute or a numeric constant for the heatmap top peak altitude in terms of globe radius units (`0` = 0 altitude, `1` = globe radius). An equal value to the base altitude will yield a surface flat heatmap. If a top altitude is set, the variations in density will be used to define the altitude curves between base and top. |
 | <b>heatmapsTransitionDuration</b> | <i>number</i> | 0 | Duration (ms) of the transition to animate heatmap changes. A value of `0` will set the heatmap colors/altitudes immediately in their final position. New heatmaps are animated by rising them from the ground up and gently fading in through the color scale. |
 | <b>onHeatmapClick</b> | <i>func</i> | - | Callback function for heatmap (left-button) clicks. The heatmap object, the event object and the clicked coordinates are included as arguments: `onHeatmapClick(heatmap, event, { lat, lng, altitude })`. |
 | <b>onHeatmapRightClick</b> | <i>func</i> | - | Callback function for heatmap right-clicks. The heatmap object, the event object and the clicked coordinates are included as arguments: `onHeatmapRightClick(heatmap, event, { lat, lng, altitude })`. |
@@ -285,7 +285,9 @@ ReactDOM.render(
 | <b>hexPolygonAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.001 | Hexed polygon object accessor function, attribute or a numeric constant for the polygon's hexagons altitude in terms of globe radius units (`0` = 0 altitude, `1` = globe radius). |
 | <b>hexPolygonResolution</b> | <i>number</i>, <i>string</i> or <i>func</i> | 3 | Hexed polygon object accessor function, attribute or a numeric constant for the geographic binning resolution as defined by [H3](https://uber.github.io/h3/#/documentation/core-library/resolution-table). Determines the area of the hexagons that tesselate the globe's surface. Accepts values between `0` and `15`. Level 0 partitions the earth in 122 (mostly) hexagonal cells. Each subsequent level sub-divides the previous in roughly 7 hexagons. |
 | <b>hexPolygonMargin</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.2 | Hexed polygon object accessor function, attribute or a numeric constant for the radial margin of each hexagon. Margins above `0` will create gaps between adjacent hexagons within a polygon. The margin is specified in terms of fraction of the hexagon's surface diameter. Values below `0` or above `1` are disadvised. |
+| <b>hexPolygonUseDots</b> | <i>bool</i>, <i>string</i> or <i>func</i> | `false` | Hexed polygon object accessor function, attribute or a boolean constant for whether to represent each polygon point as a circular dot instead of an hexagon. |
 | <b>hexPolygonCurvatureResolution</b> | <i>number</i>, <i>string</i> or <i>func</i> | 5 | Hexed polygon object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of each hexed polygon surface curvature. The finer the resolution, the more the polygon hexes are fragmented into smaller faces to approximate the spheric surface, at the cost of performance. |
+| <b>hexPolygonDotResolution</b> | <i>number</i>, <i>string</i> or <i>func</i> | 12 | Hexed polygon object accessor function, attribute or a numeric constant for the resolution of each circular dot, expressed in how many slice segments to divide the circumference. Higher values yield smoother circles, at the cost of performance. This is only applicable in dot representation mode. |
 | <b>hexPolygonsTransitionDuration</b> | <i>number</i> | 0 | Duration (ms) of the transition to animate hexed polygons altitude and margin changes. A value of `0` will move the hexagons immediately to their final state. New hexed polygons are animated by sizing each hexagon from `0` radius. |
 | <b>onHexPolygonClick</b> | <i>func</i> | *-* | Callback function for hexed polygon (left-button) clicks. The polygon object, the event object and the clicked coordinates are included as arguments: `onHexPolygonClick(polygon, event, { lat, lng, altitude })`. |
 | <b>onHexPolygonRightClick</b> | <i>func</i> | *-* | Callback function for hexed polygon right-clicks. The polygon object, the event object and the clicked coordinates are included as arguments: `onHexPolygonRightClick(polygon, event, { lat, lng, altitude })`. |
@@ -424,7 +426,8 @@ ReactDOM.render(
 | <b>pointOfView</b> | { <i>lat</i>, <i>lng</i>, <i>altitude</i> } [,<i>ms</i>=`0`] | By default the camera will aim at the cross between the equator and the prime meridian (`0,0` coordinates), at an altitude of `2.5` globe radii. | Camera position, in terms of geographical `lat`, `lng`, `altitude` coordinates. Each of the coordinates is optional, allowing for motion in just some direction. The 2nd optional argument defines the duration of the transition (in ms) to animate the camera motion. A value of 0 (default) moves the camera immediately to the final position. |
 | <b>pauseAnimation</b>| *-* |Pauses the rendering cycle of the component, effectively freezing the current view and cancelling all user interaction. This method can be used to save performance in circumstances when a static image is sufficient. |
 | <b>resumeAnimation</b>| *-* |Resumes the rendering cycle of the component, and re-enables the user interaction. This method can be used together with `pauseAnimation` for performance optimization purposes. |
-| <b>onZoom</b> | <i>func</i> | *-* | Callback function for point-of-view changes by zooming or rotating the globe using the orbit controls. The current point of view (with the syntax `{ lat, lng, altitude }`) is included as sole argument. |
+| <b>onZoom</b> | <i>func</i> | Callback function for point-of-view changes by zooming or rotating the globe using the orbit controls. The current point of view (with the syntax `{ lat, lng, altitude }`) is included as sole argument. |
+| <b>lights</b> | <i>array</i> | Getter/setter for the list of lights to use in the scene. Each item should be an instance of [Light](https://threejs.org/docs/#api/en/lights/Light). |
 | <b>scene</b>| *-* |Access the internal ThreeJS [Scene](https://threejs.org/docs/#api/scenes/Scene). Can be used to extend the current scene with additional objects not related to globe.gl. |
 | <b>camera</b>| *-* |Access the internal ThreeJS [Camera](https://threejs.org/docs/#api/cameras/PerspectiveCamera). |
 | <b>renderer</b>| *-* |Access the internal ThreeJS [WebGL renderer](https://threejs.org/docs/#api/renderers/WebGLRenderer). |

package/dist/react-globe.gl.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Material, Object3D, Scene, Camera, WebGLRenderer } from 'three';
+import { Material, Object3D, Light, Scene, Camera, WebGLRenderer } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { ConfigOptions, GlobeInstance } from 'globe.gl';
@@ -173,7 +173,9 @@ interface GlobeProps extends ConfigOptions {
   hexPolygonAltitude?: ObjAccessor<number>;
   hexPolygonResolution?: ObjAccessor<number>;
   hexPolygonMargin?: ObjAccessor<number>;
+  hexPolygonUseDots?: ObjAccessor<boolean>;
   hexPolygonCurvatureResolution?: ObjAccessor<number>;
+  hexPolygonDotResolution?: ObjAccessor<number>;
   hexPolygonsTransitionDuration?: number;
   hexPolygonLabel?: ObjAccessor<string>;
   onHexPolygonClick?: (polygon: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
@@ -270,6 +272,8 @@ interface GlobeMethods {
   pointOfView(pov: { lat?: number, lng?: number, altitude?: number }, transitionMs?: number): GlobeInstance;
   pauseAnimation(): GlobeInstance;
   resumeAnimation(): GlobeInstance;
+  lights(): Light[];
+  lights(lights: Light[]): ChainableInstance;
   scene(): Scene;
   camera(): Camera;
   renderer(): WebGLRenderer;

package/dist/react-globe.gl.js

@@ -1,4 +1,4 @@
-// Version 2.25.0 react-globe.gl - https://github.com/vasturiano/react-globe.gl
+// Version 2.27.0 react-globe.gl - https://github.com/vasturiano/react-globe.gl
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
   typeof define === 'function' && define.amd ? define(['react'], factory) :
@@ -67506,7 +67506,7 @@
     var bwRad = bandwidth * Math.PI / 180;
     return sum$1(data.map(function (d) {
       var weight = weightAccessor(d);
-      if (weight <= 0) return;
+      if (!weight) return 0;
       var dist = geoDistance(pnt, [lngAccessor(d), latAccessor(d)]);
       return gaussianKernel(dist, bwRad) * weight;
     }));
@@ -67720,7 +67720,7 @@
               kdeVals = _obj$__currentTargetD.kdeVals,
               topAlt = _obj$__currentTargetD.topAlt,
               saturation = _obj$__currentTargetD.saturation;
-            var maxVal = max$1(kdeVals) || 1e-15;
+            var maxVal = max$1(kdeVals.map(Math.abs)) || 1e-15;
 
             // Set vertex colors
             obj.geometry.setAttribute('color', array2BufferAttr(
@@ -67735,7 +67735,7 @@
               var _vertexGeoCoords$idx = _slicedToArray$1(vertexGeoCoords[idx], 2),
                 lng = _vertexGeoCoords$idx[0],
                 lat = _vertexGeoCoords$idx[1];
-              var alt = altScale(val);
+              var alt = altScale(Math.abs(val));
               var p = polar2Cartesian(lat, lng, alt);
               return [p.x, p.y, p.z];
             }), 3));
@@ -67992,9 +67992,11 @@
   var THREE$9 = window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
   : {
     BufferGeometry: BufferGeometry,
+    CircleGeometry: CircleGeometry,
     DoubleSide: DoubleSide,
     Mesh: Mesh,
-    MeshLambertMaterial: MeshLambertMaterial
+    MeshLambertMaterial: MeshLambertMaterial,
+    Vector3: Vector3
   };
   var bfg = Object.assign({}, _bfg);
   var BufferGeometryUtils = bfg.BufferGeometryUtils || bfg;
@@ -68026,10 +68028,18 @@
         "default": 0.2
       },
       // in fraction of hex diameter
+      hexPolygonUseDots: {
+        "default": false
+      },
+      // if points should be circular instead of hexagonal
       hexPolygonCurvatureResolution: {
         "default": 5
       },
-      // in angular degrees
+      // in angular degrees, only relevant for hex tops
+      hexPolygonDotResolution: {
+        "default": 12
+      },
+      // how many slice segments in the dot circle's circumference
       hexPolygonsTransitionDuration: {
         "default": 0,
         triggerUpdate: false
@@ -68049,7 +68059,9 @@
       var altitudeAccessor = index$1(state.hexPolygonAltitude);
       var resolutionAccessor = index$1(state.hexPolygonResolution);
       var marginAccessor = index$1(state.hexPolygonMargin);
+      var useDotsAccessor = index$1(state.hexPolygonUseDots);
       var curvatureResolutionAccessor = index$1(state.hexPolygonCurvatureResolution);
+      var dotResolutionAccessor = index$1(state.hexPolygonDotResolution);
       threeDigest(state.hexPolygonsData, state.scene, {
         createObj: function createObj(d) {
           var obj = new THREE$9.Mesh(undefined, new THREE$9.MeshLambertMaterial({
@@ -68064,7 +68076,9 @@
           var h3Res = resolutionAccessor(d);
           var alt = altitudeAccessor(d);
           var margin = Math.max(0, Math.min(1, +marginAccessor(d)));
+          var useDots = useDotsAccessor(d);
           var curvatureResolution = curvatureResolutionAccessor(d);
+          var dotResolution = dotResolutionAccessor(d);
 
           // update material
           var color = colorAccessor(d);
@@ -68131,25 +68145,37 @@
                 curvatureResolution = _obj$__currentTargetD.curvatureResolution;
               obj.geometry && obj.geometry.dispose();
               obj.geometry = !hexBins.length ? new THREE$9.BufferGeometry() : (BufferGeometryUtils.mergeGeometries || BufferGeometryUtils.mergeBufferGeometries)(hexBins.map(function (h) {
-                // compute new geojson with relative margin
-                var relNum = function relNum(st, end, rat) {
-                  return st - (st - end) * rat;
-                };
                 var _h$hexCenter = _slicedToArray$1(h.hexCenter, 2),
                   clat = _h$hexCenter[0],
                   clng = _h$hexCenter[1];
-                var geoJson = margin === 0 ? h.hexGeoJson : h.hexGeoJson.map(function (_ref) {
-                  var _ref2 = _slicedToArray$1(_ref, 2),
-                    elng = _ref2[0],
-                    elat = _ref2[1];
-                  return [[elng, clng], [elat, clat]].map(function (_ref3) {
-                    var _ref4 = _slicedToArray$1(_ref3, 2),
-                      st = _ref4[0],
-                      end = _ref4[1];
-                    return relNum(st, end, margin);
+                if (useDots) {
+                  var centerPos = polar2Cartesian(clat, clng, alt);
+                  var edgePos = polar2Cartesian(h.hexGeoJson[0][1], h.hexGeoJson[0][0], alt);
+                  var r = 0.85 * (1 - margin) * new THREE$9.Vector3(centerPos.x, centerPos.y, centerPos.z).distanceTo(new THREE$9.Vector3(edgePos.x, edgePos.y, edgePos.z));
+                  var geometry = new CircleGeometry(r, dotResolution);
+                  geometry.rotateX(deg2Rad$1(-clat));
+                  geometry.rotateY(deg2Rad$1(clng));
+                  geometry.translate(centerPos.x, centerPos.y, centerPos.z);
+                  return geometry;
+                } else {
+                  var relNum = function relNum(st, end, rat) {
+                    return st - (st - end) * rat;
+                  };
+
+                  // compute new geojson with relative margin
+                  var _geoJson = margin === 0 ? h.hexGeoJson : h.hexGeoJson.map(function (_ref) {
+                    var _ref2 = _slicedToArray$1(_ref, 2),
+                      elng = _ref2[0],
+                      elat = _ref2[1];
+                    return [[elng, clng], [elat, clat]].map(function (_ref3) {
+                      var _ref4 = _slicedToArray$1(_ref3, 2),
+                        st = _ref4[0],
+                        end = _ref4[1];
+                      return relNum(st, end, margin);
+                    });
                   });
-                });
-                return new ConicPolygonBufferGeometry([geoJson], GLOBE_RADIUS, GLOBE_RADIUS * (1 + alt), false, true, false, curvatureResolution);
+                  return new ConicPolygonBufferGeometry([_geoJson], GLOBE_RADIUS, GLOBE_RADIUS * (1 + alt), false, true, false, curvatureResolution);
+                }
               }));
             };
             if (!state.hexPolygonsTransitionDuration || state.hexPolygonsTransitionDuration < 0) {
@@ -69418,7 +69444,7 @@
     return _defineProperty$2({}, p, bindHeatmapsLayer.linkProp(p));
   })));
   var bindHexedPolygonsLayer = linkKapsule$1('hexedPolygonsLayer', HexedPolygonsLayerKapsule);
-  var linkedHexedPolygonsLayerProps = Object.assign.apply(Object, _toConsumableArray$2(['hexPolygonsData', 'hexPolygonGeoJsonGeometry', 'hexPolygonColor', 'hexPolygonAltitude', 'hexPolygonResolution', 'hexPolygonMargin', 'hexPolygonCurvatureResolution', 'hexPolygonsTransitionDuration'].map(function (p) {
+  var linkedHexedPolygonsLayerProps = Object.assign.apply(Object, _toConsumableArray$2(['hexPolygonsData', 'hexPolygonGeoJsonGeometry', 'hexPolygonColor', 'hexPolygonAltitude', 'hexPolygonResolution', 'hexPolygonMargin', 'hexPolygonUseDots', 'hexPolygonCurvatureResolution', 'hexPolygonDotResolution', 'hexPolygonsTransitionDuration'].map(function (p) {
     return _defineProperty$2({}, p, bindHexedPolygonsLayer.linkProp(p));
   })));
   var bindPolygonsLayer = linkKapsule$1('polygonsLayer', PolygonsLayerKapsule);
@@ -72800,7 +72826,11 @@
   }
 
   function _isNativeFunction(fn) {
-    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+    try {
+      return Function.toString.call(fn).indexOf("[native code]") !== -1;
+    } catch (e) {
+      return typeof fn === "function";
+    }
   }
 
   function _isNativeReflectConstruct() {
@@ -73536,31 +73566,31 @@
   var css_248z$1 = ".scene-nav-info {\n  bottom: 5px;\n  width: 100%;\n  text-align: center;\n  color: slategrey;\n  opacity: 0.7;\n  font-size: 10px;\n}\n\n.scene-tooltip {\n  top: 0;\n  color: lavender;\n  font-size: 15px;\n}\n\n.scene-nav-info, .scene-tooltip {\n  position: absolute;\n  font-family: sans-serif;\n  pointer-events: none;\n  user-select: none;\n}\n\n.scene-container canvas:focus {\n  outline: none;\n}";
   styleInject$1(css_248z$1);
 
-  function _iterableToArrayLimit(arr, i) {
-    var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-    if (null != _i) {
-      var _s,
-        _e,
-        _x,
-        _r,
-        _arr = [],
-        _n = !0,
-        _d = !1;
+  function _iterableToArrayLimit(r, l) {
+    var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (null != t) {
+      var e,
+        n,
+        i,
+        u,
+        a = [],
+        f = !0,
+        o = !1;
       try {
-        if (_x = (_i = _i.call(arr)).next, 0 === i) {
-          if (Object(_i) !== _i) return;
-          _n = !1;
-        } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-      } catch (err) {
-        _d = !0, _e = err;
+        if (i = (t = t.call(r)).next, 0 === l) {
+          if (Object(t) !== t) return;
+          f = !1;
+        } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      } catch (r) {
+        o = !0, n = r;
       } finally {
         try {
-          if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+          if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
         } finally {
-          if (_d) throw _e;
+          if (o) throw n;
         }
       }
-      return _arr;
+      return a;
     }
   }
   function _defineProperty$1(obj, key, value) {
@@ -73676,6 +73706,9 @@
       objects: {
         "default": []
       },
+      lights: {
+        "default": []
+      },
       enablePointerInteraction: {
         "default": true,
         onChange: function onChange(_, state) {
@@ -74136,6 +74169,15 @@
         }
       }
       changedProps.hasOwnProperty('showNavInfo') && (state.navInfo.style.display = state.showNavInfo ? null : 'none');
+      if (changedProps.hasOwnProperty('lights')) {
+        (changedProps.lights || []).forEach(function (light) {
+          return state.scene.remove(light);
+        }); // Clear the place
+        state.lights.forEach(function (light) {
+          return state.scene.add(light);
+        }); // Add to scene
+      }
+
       if (changedProps.hasOwnProperty('objects')) {
         (changedProps.objects || []).forEach(function (obj) {
           return state.scene.remove(obj);
@@ -74326,7 +74368,7 @@
 
   // Expose config from ThreeGlobe
   var bindGlobe = linkKapsule('globe', threeGlobe);
-  var linkedGlobeProps = Object.assign.apply(Object, _toConsumableArray(['globeImageUrl', 'bumpImageUrl', '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', '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', 'objectRotation', 'objectFacesSurface', 'objectThreeObject', 'customLayerData', 'customThreeObject', 'customThreeObjectUpdate'].map(function (p) {
+  var linkedGlobeProps = Object.assign.apply(Object, _toConsumableArray(['globeImageUrl', 'bumpImageUrl', '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) {
     return _defineProperty({}, p, bindGlobe.linkProp(p));
   })));
   var linkedGlobeMethods = Object.assign.apply(Object, _toConsumableArray(['globeMaterial', 'getGlobeRadius', 'getCoords', 'toGeoCoords'].map(function (p) {
@@ -74338,7 +74380,7 @@
   var linkedRenderObjsProps = Object.assign.apply(Object, _toConsumableArray(['width', 'height', 'backgroundColor', 'backgroundImageUrl', 'enablePointerInteraction'].map(function (p) {
     return _defineProperty({}, p, bindRenderObjs.linkProp(p));
   })));
-  var linkedRenderObjsMethods = Object.assign.apply(Object, _toConsumableArray(['postProcessingComposer'].map(function (p) {
+  var linkedRenderObjsMethods = Object.assign.apply(Object, _toConsumableArray(['lights', 'postProcessingComposer'].map(function (p) {
     return _defineProperty({}, p, bindRenderObjs.linkMethod(p));
   })));
 
@@ -74642,7 +74684,8 @@
           rendererConfig: rendererConfig,
           waitForLoadComplete: waitForGlobeReady,
           extraRenderers: [new THREE.CSS2DRenderer()] // Used in HTML elements layer
-        }).skyRadius(globe.getGlobeRadius() * 500).showNavInfo(false)
+        }).skyRadius(globe.getGlobeRadius() * 500).showNavInfo(false).objects([globe]) // Populate scene
+        .lights([new THREE.AmbientLight(0xcccccc, Math.PI), new THREE.DirectionalLight(0xffffff, 0.6 * Math.PI)])
       };
     },
     init: function init(domNode, state) {
@@ -74733,9 +74776,7 @@
         }
       };
       state.renderObjs.renderer().useLegacyLights = false; // force behavior of three < 155
-      state.renderObjs.objects([
-      // Populate scene
-      new THREE.AmbientLight(0xcccccc, Math.PI), new THREE.DirectionalLight(0xffffff, 0.6 * Math.PI), state.globe]).hoverOrderComparator(function (a, b) {
+      state.renderObjs.hoverOrderComparator(function (a, b) {
         var aObj = getGlobeObj(a);
         var bObj = getGlobeObj(b);
 
@@ -76035,7 +76076,9 @@
     hexPolygonAltitude: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
     hexPolygonResolution: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
     hexPolygonMargin: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+    hexPolygonUseDots: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.func]),
     hexPolygonCurvatureResolution: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+    hexPolygonDotResolution: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
     hexPolygonsTransitionDuration: PropTypes.number,
     hexPolygonLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     onHexPolygonClick: PropTypes.func,
@@ -76119,7 +76162,7 @@
   var Globe = index$3(globe, {
     methodNames: [
     // bind methods
-    'pauseAnimation', 'resumeAnimation', 'pointOfView', 'scene', 'camera', 'renderer', 'postProcessingComposer', 'controls', 'getGlobeRadius', 'getCoords', 'getScreenCoords', 'toGeoCoords', 'toGlobeCoords'],
+    'pauseAnimation', 'resumeAnimation', 'pointOfView', 'lights', 'scene', 'camera', 'renderer', 'postProcessingComposer', 'controls', 'getGlobeRadius', 'getCoords', 'getScreenCoords', 'toGeoCoords', 'toGlobeCoords'],
     initPropNames: ['animateIn', 'waitForGlobeReady', 'rendererConfig']
   });
   Globe.displayName = 'Globe';