feat(react-map-gl-draw): Support for tooltips for measure modes

uber · Jun 8, 2021 · 7cf5fc5 · 7cf5fc5
1 parent c79bb05
commit 7cf5fc5
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 1 deletion.
diff --git a/modules/react-map-gl-draw/README.md b/modules/react-map-gl-draw/README.md
@@ -15,6 +15,9 @@ Support the following modes from `@nebula.gl/edit-modes`. Note: Currently `react
 - `DrawPolygonMode`: Lets you draw a GeoJson `Polygon` feature.
 - `DrawRectangleMode`: Lets you draw a `Rectangle` (represented as GeoJson `Polygon` feature) with two clicks - start drawing on first click, and finish drawing on second click.
   - If you'd like to starting drawing by mouse down and end drawing by mouse up, you can use `modeConfig: {dragToDraw: true}`. See `modeConfig` for more details.
+- `MeasureDistanceMode`: Lets you measure distance over multiple points.
+- `MeasureAreaMode`: Lets you measure the area of a polygon.
+- `MeasureAngleMode`: Lets you measure an angle.
 
 And an advanced
 

diff --git a/modules/react-map-gl-draw/src/constants.ts b/modules/react-map-gl-draw/src/constants.ts
@@ -38,6 +38,7 @@ export enum ELEMENT_TYPE {
   FILL = 'fill',
   SEGMENT = 'segment',
   EDIT_HANDLE = 'editHandle',
+  TOOLTIP = 'tooltip',
 }
 
 export enum EDIT_TYPE {

diff --git a/modules/react-map-gl-draw/src/editor.tsx b/modules/react-map-gl-draw/src/editor.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Feature } from '@nebula.gl/edit-modes';
+import { Feature, Tooltip } from '@nebula.gl/edit-modes';
 import { GeoJsonType, RenderState, Id } from './types';
 
 import { RENDER_STATE, SHAPE, GEOJSON_TYPE, GUIDE_TYPE, ELEMENT_TYPE } from './constants';
@@ -10,6 +10,7 @@ import { getFeatureCoordinates } from './edit-modes/utils';
 import {
   editHandleStyle as defaultEditHandleStyle,
   featureStyle as defaultFeatureStyle,
+  tooltipStyle as defaultTooltipStyle,
 } from './style';
 
 const defaultProps = {
@@ -19,6 +20,7 @@ const defaultProps = {
   editHandleShape: 'rect',
   editHandleStyle: defaultEditHandleStyle,
   featureStyle: defaultFeatureStyle,
+  tooltipStyle: defaultTooltipStyle,
   featuresDraggable: true,
 };
 
@@ -369,6 +371,23 @@ export default class Editor extends ModeHandler {
     return [fill, committedPath, uncommittedPath, closingPath].filter(Boolean);
   };
 
+  _renderTooltips = (tooltips: Tooltip[]) => {
+    const style = this._getStyleProp(this.props.tooltipStyle, null);
+    return (
+      <g key="feature-tooltips">
+        {tooltips.map((tooltip, index) => {
+          const elemKey = `${ELEMENT_TYPE.TOOLTIP}.${index}`;
+          const screenCoords = this.project([tooltip.position[0], tooltip.position[1]]);
+          return (
+            <text key={elemKey} x={screenCoords[0]} y={screenCoords[1]} style={style}>
+              {tooltip.text}
+            </text>
+          );
+        })}
+      </g>
+    );
+  };
+
   _renderGuides = (guideFeatures: Feature[]) => {
     const features = this.getFeatures();
     const cursorEditHandle =
@@ -579,6 +598,7 @@ export default class Editor extends ModeHandler {
     const features = this.getFeatures();
     const guides = this._modeHandler && this._modeHandler.getGuides(this.getModeProps());
     const guideFeatures = guides && guides.features;
+    const tooltips = this._modeHandler && this._modeHandler.getTooltips(this.getModeProps());
 
     return (
       <svg key="draw-canvas" width="100%" height="100%">
@@ -588,6 +608,7 @@ export default class Editor extends ModeHandler {
         {guideFeatures && guideFeatures.length > 0 && (
           <g key="feature-guides">{this._renderGuides(guideFeatures)}</g>
         )}
+        {tooltips && this._renderTooltips(tooltips)}
       </svg>
     );
   };

diff --git a/modules/react-map-gl-draw/src/index.ts b/modules/react-map-gl-draw/src/index.ts
@@ -14,4 +14,7 @@ export {
   DrawPolygonMode,
   DrawRectangleMode,
   DrawPolygonByDraggingMode,
+  MeasureDistanceMode,
+  MeasureAreaMode,
+  MeasureAngleMode,
 } from '@nebula.gl/edit-modes';
diff --git a/modules/react-map-gl-draw/src/style.ts b/modules/react-map-gl-draw/src/style.ts
@@ -130,3 +130,8 @@ export function editHandleStyle({ feature, shape, index, state }) {
 
   return style;
 }
+
+export const tooltipStyle = {
+  fill: 'black',
+  fontSize: 14,
+};
diff --git a/modules/react-map-gl-draw/src/types.ts b/modules/react-map-gl-draw/src/types.ts
@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { WebMercatorViewport } from 'viewport-mercator-project';
 import {
   ModeProps as BaseModeProps,
@@ -44,6 +45,7 @@ export type EditorProps = {
   editHandleShape?: Function | string;
   editHandleStyle?: Function | any;
   featureStyle?: Function | any;
+  tooltipStyle?: Function | CSSProperties;
   featuresDraggable?: boolean | null | undefined;
   onUpdate?: Function;
   onSelect?: Function;