globe.gl 2.29.2 → 2.30.0

package/dist/globe.gl.mjs

@@ -34,26 +34,26 @@ function styleInject(css, ref) {
 var css_248z = ".scene-container .clickable {\n  cursor: pointer;\n}";
 styleInject(css_248z);
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
-  return keys;
+  return t;
 }
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
 }
 function _defineProperty(obj, key, value) {
   key = _toPropertyKey(key);
@@ -179,10 +179,10 @@ 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', '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', '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', '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) {
   return _defineProperty({}, p, bindGlobe.linkProp(p));
 })));
-var linkedGlobeMethods = Object.assign.apply(Object, _toConsumableArray(['getGlobeRadius', 'getCoords', 'toGeoCoords'].map(function (p) {
+var linkedGlobeMethods = Object.assign.apply(Object, _toConsumableArray(['globeMaterial', 'getGlobeRadius', 'getCoords', 'toGeoCoords'].map(function (p) {
   return _defineProperty({}, p, bindGlobe.linkMethod(p));
 })));
 
@@ -260,6 +260,15 @@ var globe = Kapsule({
     onPathHover: {
       triggerUpdate: false
     },
+    onHeatmapClick: {
+      triggerUpdate: false
+    },
+    onHeatmapRightClick: {
+      triggerUpdate: false
+    },
+    onHeatmapHover: {
+      triggerUpdate: false
+    },
     hexLabel: {
       triggerUpdate: false
     },
@@ -361,7 +370,7 @@ var globe = Kapsule({
         cancelAnimationFrame(state.animationFrameRequestId);
         state.animationFrameRequestId = null;
       }
-      (_state$globe = state.globe) === null || _state$globe === void 0 ? void 0 : _state$globe.pauseAnimation();
+      (_state$globe = state.globe) === null || _state$globe === void 0 || _state$globe.pauseAnimation();
       return this;
     },
     resumeAnimation: function resumeAnimation(state) {
@@ -369,7 +378,7 @@ var globe = Kapsule({
       if (state.animationFrameRequestId === null) {
         this._animationCycle();
       }
-      (_state$globe2 = state.globe) === null || _state$globe2 === void 0 ? void 0 : _state$globe2.resumeAnimation();
+      (_state$globe2 = state.globe) === null || _state$globe2 === void 0 || _state$globe2.resumeAnimation();
       return this;
     },
     _animationCycle: function _animationCycle(state) {
@@ -461,6 +470,7 @@ var globe = Kapsule({
       this.arcsData([]);
       this.polygonsData([]);
       this.pathsData([]);
+      this.heatmapsData([]);
       this.hexBinPointsData([]);
       this.hexPolygonsData([]);
       this.tilesData([]);
@@ -553,6 +563,9 @@ var globe = Kapsule({
       path: function path(d) {
         return d;
       },
+      heatmap: function heatmap(d) {
+        return d;
+      },
       hexbin: function hexbin(d) {
         return d;
       },
@@ -607,6 +620,7 @@ var globe = Kapsule({
         arc: state.onArcHover,
         polygon: state.onPolygonHover,
         path: state.onPathHover,
+        heatmap: state.onHeatmapHover,
         hexbin: state.onHexHover,
         hexPolygon: state.onHexPolygonHover,
         tile: state.onTileHover,
@@ -620,6 +634,7 @@ var globe = Kapsule({
         arc: state.onArcClick,
         polygon: state.onPolygonClick,
         path: state.onPathClick,
+        heatmap: state.onHeatmapClick,
         hexbin: state.onHexClick,
         hexPolygon: state.onHexPolygonClick,
         tile: state.onTileClick,
@@ -659,6 +674,7 @@ var globe = Kapsule({
         arc: state.onArcClick,
         polygon: state.onPolygonClick,
         path: state.onPathClick,
+        heatmap: state.onHeatmapClick,
         hexbin: state.onHexClick,
         hexPolygon: state.onHexPolygonClick,
         tile: state.onTileClick,
@@ -696,6 +712,7 @@ var globe = Kapsule({
         arc: state.onArcRightClick,
         polygon: state.onPolygonRightClick,
         path: state.onPathRightClick,
+        heatmap: state.onHeatmapRightClick,
         hexbin: state.onHexRightClick,
         hexPolygon: state.onHexPolygonRightClick,
         tile: state.onTileRightClick,

package/example/heatmap/index.html

@@ -0,0 +1,31 @@
+<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>
+    // Gen random data
+    const N = 300;
+    const gData = [...Array(N).keys()].map(() => ({
+      lat: (Math.random() - 0.5) * 160,
+      lng: (Math.random() - 0.5) * 360,
+      weight: Math.random()
+    }));
+
+    const world = Globe()
+      .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
+      .heatmapsData([gData])
+      .heatmapPointLat('lat')
+      .heatmapPointLng('lng')
+      .heatmapPointWeight('weight')
+      .heatmapTopAltitude(0.7)
+      .heatmapsTransitionDuration(3000)
+      .enablePointerInteraction(false)
+      (document.getElementById('globeViz'));
+  </script>
+</body>

package/example/population-heatmap/index.html

@@ -0,0 +1,28 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/d3-dsv"></script>
+
+  <script src="//unpkg.com/globe.gl"></script>
+<!--  <script src="../../dist/globe.gl.js"></script>-->
+</head>
+
+<body>
+  <div id="globeViz"></div>
+
+  <script>
+    const world = Globe()
+      .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
+      .heatmapPointLat('lat')
+      .heatmapPointLng('lng')
+      .heatmapPointWeight('pop')
+      .heatmapBandwidth(0.9)
+      .heatmapColorSaturation(2.8)
+      .enablePointerInteraction(false)
+      (document.getElementById('globeViz'));
+
+    fetch('../datasets/world_population.csv').then(res => res.text())
+      .then(csv => d3.csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
+      .then(data => world.heatmapsData([data]));
+  </script>
+</body>

package/example/volcanoes-heatmap/index.html

@@ -0,0 +1,27 @@
+<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 world = Globe()
+      .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
+      .heatmapPointLat('lat')
+      .heatmapPointLng('lon')
+      .heatmapPointWeight(d => d.elevation * 5e-5)
+      .heatmapTopAltitude(0.2)
+      .heatmapBandwidth(1.35)
+      .heatmapColorSaturation(3.2)
+      .enablePointerInteraction(false)
+      (document.getElementById('globeViz'));
+
+    fetch('../datasets/world_volcanoes.json').then(res => res.json()).then(volcanoes => {
+      world.heatmapsData([volcanoes])
+    });
+  </script>
+</body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "globe.gl",
-  "version": "2.29.2",
+  "version": "2.30.0",
   "description": "UI component for Globe Data Visualization using ThreeJS/WebGL",
   "type": "module",
   "unpkg": "dist/globe.gl.min.js",
@@ -52,22 +52,22 @@
     "accessor-fn": "1",
     "kapsule": "1",
     "three": ">=0.118 <1",
-    "three-globe": "^2.28",
+    "three-globe": "^2.29",
     "three-render-objects": "^1.28"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.22.20",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.0",
+    "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-terser": "^0.4.3",
-    "postcss": "^8.4.28",
-    "rimraf": "^5.0.1",
-    "rollup": "^3.28.0",
-    "rollup-plugin-dts": "^6.0.0",
+    "postcss": "^8.4.30",
+    "rimraf": "^5.0.4",
+    "rollup": "^3.29.3",
+    "rollup-plugin-dts": "^6.0.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   },
   "engines": {
     "node": ">=12"