@deck.gl-community/react 9.0.1

package/src/overlays/html-overlay.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+
+const styles = {
+  mainContainer: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    overflow: 'hidden'
+  }
+};
+
+interface Props {
+  viewport?: Record<string, any>;
+  zIndex?: number;
+  children?: React.ReactNode;
+  // Overlay items abruptly disappear when their anchor point passes the edge of the map, which is
+  // visible to the user. The overflowMargin prop is used to effectively create a hidden buffer
+  // zone that extends from all sides of the map while leaving the visible edge of the map
+  // unchanged. With this, overlay items can move into the buffer zone and disappear only when
+  // their anchor passes the edge of the buffer zone. This produces a perceived effect of overlay
+  // items being rendered as part of the map, instead of separate entities tacked on to the map.
+  overflowMargin?: number;
+}
+
+export class HtmlOverlay extends React.Component<Props> {
+  // This is needed for Deck.gl 8.0+
+  static deckGLViewProps = true;
+
+  // Override this to provide your items
+  getItems(): Array<any> {
+    const {children} = this.props;
+    if (children) {
+      return Array.isArray(children) ? children : [children];
+    }
+    return [];
+  }
+
+  getCoords(coordinates: number[]): [number, number] {
+    const pos = this.props.viewport.project(coordinates);
+    if (!pos) return [-1, -1];
+    return pos;
+  }
+
+  inView([x, y]: number[]): boolean {
+    const {viewport, overflowMargin = 0} = this.props;
+    const {width, height} = viewport;
+    return !(
+      x < -overflowMargin ||
+      y < -overflowMargin ||
+      x > width + overflowMargin ||
+      y > height + overflowMargin
+    );
+  }
+
+  scaleWithZoom(n: number) {
+    const {zoom} = this.props.viewport;
+    return n / Math.pow(2, 20 - zoom);
+  }
+
+  breakpointWithZoom(threshold: number, a: any, b: any): any {
+    const {zoom} = this.props.viewport;
+    return zoom > threshold ? a : b;
+  }
+
+  getViewport() {
+    return this.props.viewport;
+  }
+
+  getZoom() {
+    return this.props.viewport.zoom;
+  }
+
+  render() {
+    const {zIndex = 1} = this.props;
+    const style = Object.assign({zIndex} as any, styles.mainContainer);
+
+    const renderItems = [];
+    this.getItems()
+      .filter(Boolean)
+      .forEach((item, index) => {
+        const [x, y] = this.getCoords(item.props.coordinates);
+        if (this.inView([x, y])) {
+          const key = item.key === null || item.key === undefined ? index : item.key;
+          renderItems.push(React.cloneElement(item, {x, y, key}));
+        }
+      });
+
+    return <div style={style}>{renderItems}</div>;
+  }
+}

package/src/overlays/html-tooltip-overlay.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+
+import {HtmlOverlay} from './html-overlay';
+import {HtmlOverlayItem} from './html-overlay-item';
+
+type State = {
+  visible: boolean;
+  pickingInfo: Record<string, any> | null | undefined;
+};
+
+const styles = {
+  tooltip: {
+    transform: 'translate(-50%,-100%)',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    padding: '4px 8px',
+    borderRadius: 8,
+    color: 'white'
+  }
+};
+
+const SHOW_TOOLTIP_TIMEOUT = 250;
+
+export class HtmlTooltipOverlay extends HtmlOverlay {
+  constructor(props: any) {
+    super(props);
+    this.state = {visible: false, pickingInfo: null};
+  }
+
+  componentWillMount() {
+    (this.context as any).nebula.queryObjectEvents.on('pick', ({event, pickingInfo}) => {
+      if (this.timeoutID !== null) {
+        window.clearTimeout(this.timeoutID);
+      }
+      this.timeoutID = null;
+
+      if (pickingInfo && this._getTooltip(pickingInfo)) {
+        this.timeoutID = window.setTimeout(() => {
+          this.setState({visible: true, pickingInfo});
+        }, SHOW_TOOLTIP_TIMEOUT);
+      } else {
+        this.setState({visible: false});
+      }
+    });
+  }
+
+  timeoutID: number | null | undefined = null;
+  state: State = undefined!;
+
+  _getTooltip(pickingInfo: Record<string, any>): string {
+    return pickingInfo.object.style.tooltip;
+  }
+
+  _makeOverlay() {
+    const {pickingInfo} = this.state;
+
+    if (pickingInfo) {
+      return (
+        <HtmlOverlayItem key={0} coordinates={pickingInfo.lngLat} style={styles.tooltip}>
+          {this._getTooltip(pickingInfo)}
+        </HtmlOverlayItem>
+      );
+    }
+
+    return null;
+  }
+
+  getItems(): Array<Record<string, any> | null | undefined> {
+    if (this.state.visible) {
+      return [this._makeOverlay()];
+    }
+
+    return [];
+  }
+}