HeatmapLayer Demo: Conditionally add colorDomain controls (#3718)

visgl · Sep 27, 2019 · 9cc5501 · 9cc5501
1 parent 0779944
commit 9cc5501
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 19 deletions.
diff --git a/website/package.json b/website/package.json
@@ -40,7 +40,8 @@
     "styletron-engine-atomic": "^1.4.0",
     "styletron-react": "^5.2.0",
     "supercluster": "^6.0.1",
-    "tagmap.js": "^1.1.1"
+    "tagmap.js": "^1.1.1",
+    "bowser": "^2.6.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0",

diff --git a/website/src/components/demos/heatmap-demo.js b/website/src/components/demos/heatmap-demo.js
@@ -1,4 +1,6 @@
+/* global window */
 import React, {Component} from 'react';
+import Bowser from 'bowser';
 import {readableInteger} from '../../utils/format-utils';
 import {MAPBOX_STYLES, DATA_URI} from '../../constants/defaults';
 import {App} from 'website-examples/heatmap/app';
@@ -15,23 +17,7 @@ export default class HeatmapDemo extends Component {
     return {
       radius: {displayName: 'Radius', type: 'range', value: 5, step: 1, min: 1, max: 50},
       intensity: {displayName: 'Intensity', type: 'range', value: 1, step: 0.1, min: 0, max: 5},
-      threshold: {displayName: 'Threshold', type: 'range', value: 0.03, step: 0.01, min: 0, max: 1},
-      minWeight: {
-        displayName: 'Minimum Weight',
-        type: 'range',
-        value: 0,
-        step: 10,
-        min: 0,
-        max: 50000
-      },
-      maxWeight: {
-        displayName: 'Maximum Weight',
-        type: 'range',
-        value: 0,
-        step: 10,
-        min: 0,
-        max: 50000
-      }
+      threshold: {displayName: 'Threshold', type: 'range', value: 0.03, step: 0.01, min: 0, max: 1}
     };
   }
 
@@ -65,12 +51,23 @@ export default class HeatmapDemo extends Component {
     );
   }
 
+  constructor(props) {
+    super(props);
+    if (shouldEnableColorDomain()) {
+      this.maxDomain = 30000;
+    }
+  }
+
   render() {
     const {params, data} = this.props;
     const radiusPixels = params.radius.value;
     const intensity = params.intensity.value;
     const threshold = params.threshold.value;
-    const colorDomain = [params.minWeight.value, params.maxWeight.value];
+    const {maxDomain} = this;
+    let colorDomain;
+    if (maxDomain) {
+      colorDomain = [maxDomain * threshold, maxDomain];
+    }
 
     return (
       <App
@@ -84,3 +81,11 @@ export default class HeatmapDemo extends Component {
     );
   }
 }
+
+// HELPER
+function shouldEnableColorDomain() {
+  const OS_NAMES_TO_DETECT = ['windows', 'ios'];
+  const parser = Bowser.getParser(window.navigator.userAgent);
+  const currentOS = parser.getOSName(true);
+  return OS_NAMES_TO_DETECT.includes(currentOS);
+}