react-globe.gl 2.25.0 → 2.26.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 })`. |

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

@@ -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;

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.26.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() {
@@ -74326,7 +74356,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) {
@@ -76035,7 +76065,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,