Add heatmaps layer

vasturiano · Sep 29, 2023 · 5ff23ca · 5ff23ca
1 parent 3f90f46
commit 5ff23ca
Show file tree

Hide file tree

Showing 11 changed files with 456 additions and 243 deletions.
diff --git a/README.md b/README.md
diff --git a/example/heatmap/index.html b/example/heatmap/index.html
@@ -0,0 +1,38 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/@babel/standalone"></script>
+
+  <script src="//unpkg.com/react-globe.gl"></script>
+  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+</head>
+
+<body>
+<div id="globeViz"></div>
+
+<script type="text/jsx">
+  // 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()
+  }));
+
+  ReactDOM.render(
+    <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>
diff --git a/example/heatmap/preview.png b/example/heatmap/preview.png
diff --git a/example/population-heatmap/index.html b/example/population-heatmap/index.html
@@ -0,0 +1,47 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/@babel/standalone"></script>
+
+  <script src="//unpkg.com/d3-dsv"></script>
+
+  <script src="//unpkg.com/react-globe.gl"></script>
+<!--  <script src="../../dist/react-globe.gl.js"></script>-->
+</head>
+
+<body>
+<div id="globeViz"></div>
+
+<script type="text/jsx">
+  const { useState, useEffect } = React;
+
+  const World = () => {
+    const [popData, setPopData] = useState([]);
+
+    useEffect(() => {
+      // load data
+      fetch('../datasets/world_population.csv').then(res => res.text())
+        .then(csv => d3.csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
+        .then(setPopData);
+    }, []);
+
+    return <Globe
+      globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
+      heatmapsData={[popData]}
+      heatmapPointLat="lat"
+      heatmapPointLng="lng"
+      heatmapPointWeight="pop"
+      heatmapBandwidth={0.9}
+      heatmapColorSaturation={2.8}
+      enablePointerInteraction={false}
+    />;
+  };
+
+  ReactDOM.render(
+    <World />,
+    document.getElementById('globeViz')
+  );
+</script>
+</body>
diff --git a/example/population-heatmap/preview.png b/example/population-heatmap/preview.png
diff --git a/example/volcanoes-heatmap/index.html b/example/volcanoes-heatmap/index.html
@@ -0,0 +1,45 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/@babel/standalone"></script>
+
+  <script src="//unpkg.com/react-globe.gl"></script>
+  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+</head>
+
+<body>
+<div id="globeViz"></div>
+
+<script type="text/jsx">
+  const { useState, useEffect } = React;
+
+  const World = () => {
+    const [volcanoes, setVolcanoes] = useState([]);
+
+    useEffect(() => {
+      // load data
+      fetch('../datasets/world_volcanoes.json').then(res => res.json())
+        .then(setVolcanoes);
+    }, []);
+
+    return <Globe
+      globeImageUrl="//unpkg.com/three-globe/example/img/earth-blue-marble.jpg"
+      heatmapsData={[volcanoes]}
+      heatmapPointLat="lat"
+      heatmapPointLng="lon"
+      heatmapPointWeight={d => d.elevation * 5e-5}
+      heatmapTopAltitude={0.2}
+      heatmapBandwidth={1.35}
+      heatmapColorSaturation={3.2}
+      enablePointerInteraction={false}
+    />;
+  };
+
+  ReactDOM.render(
+    <World />,
+    document.getElementById('globeViz')
+  );
+</script>
+</body>
diff --git a/example/volcanoes-heatmap/preview.png b/example/volcanoes-heatmap/preview.png
diff --git a/package.json b/package.json
@@ -45,27 +45,27 @@
     "dist/**/*"
   ],
   "dependencies": {
-    "globe.gl": "^2.29",
+    "globe.gl": "^2.30",
     "prop-types": "15",
     "react-kapsule": "2"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
-    "@babel/preset-react": "^7.22.5",
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
     "@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-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.3",
-    "@types/react": "^18.2.20",
-    "rimraf": "^5.0.1",
-    "rollup": "^3.28.0",
-    "rollup-plugin-dts": "^6.0.0",
-    "typescript": "^5.1.6"
+    "@types/react": "^18.2.23",
+    "rimraf": "^5.0.5",
+    "rollup": "^3.29.4",
+    "rollup-plugin-dts": "^6.0.2",
+    "typescript": "^5.2.2"
   },
   "engines": {
     "node": ">=12"

diff --git a/src/globe-proptypes.js b/src/globe-proptypes.js
@@ -86,6 +86,21 @@ export default {
   onPathRightClick: PropTypes.func,
   onPathHover: PropTypes.func,
 
+  heatmapsData: PropTypes.array,
+  heatmapPoints: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.func]),
+  heatmapPointLat: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  heatmapPointLng: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  heatmapPointWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  heatmapBandwidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  heatmapColorFn: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  heatmapColorSaturation: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  heatmapBaseAltitude: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  heatmapTopAltitude: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  heatmapsTransitionDuration: PropTypes.number,
+  onHeatmapClick: PropTypes.func,
+  onHeatmapRightClick: PropTypes.func,
+  onHeatmapHover: PropTypes.func,
+
   hexBinPointsData: PropTypes.arrayOf(PropTypes.object),
   hexBinPointLat: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
   hexBinPointLng: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -132,6 +132,22 @@ export interface GlobeProps extends ConfigOptions {
   onPathRightClick?: (path: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
   onPathHover?: (path: object | null, prevPath: object | null) => void;
 
+  // Heatmaps layer
+  heatmapsData?: object[];
+  heatmapPoints?: ObjAccessor<any[]>;
+  heatmapPointLat?: Accessor<any, number>;
+  heatmapPointLng?: Accessor<any, number>;
+  heatmapPointWeight?: Accessor<any, number>;
+  heatmapBandwidth?: ObjAccessor<number>;
+  heatmapColorFn?: ObjAccessor<(t: number) => string>;
+  heatmapColorSaturation?: ObjAccessor<number>;
+  heatmapBaseAltitude?: ObjAccessor<number>;
+  heatmapTopAltitude?: ObjAccessor<number>;
+  heatmapsTransitionDuration?: number;
+  onHeatmapClick?: (heatmap: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
+  onHeatmapRightClick?: (heatmap: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;
+  onHeatmapHover?: (heatmap: object | null, prevHeatmap: object | null) => void;
+
   // Hex Bin layer
   hexBinPointsData?: object[];
   hexBinPointLat?: ObjAccessor<number>;