Add circle drawing button

Aaron Caldwell · Aaron Caldwell · commit 37258594b3dc · 2021-04-08T07:20:55.000-06:00
diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/feature_draw_control/feature_draw_control.tsx b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/feature_draw_control/feature_draw_control.tsx
@@ -21,6 +21,7 @@ export interface Props {
 export function FeatureDrawControl(props: Props) {
   const drawLineSelected = props.drawType === DRAW_TYPE.LINE;
   const drawPolygonSelected = props.drawType === DRAW_TYPE.POLYGON;
+  const drawCircleSelected = props.drawType === DRAW_TYPE.DISTANCE;
   const drawBBoxSelected = props.drawType === DRAW_TYPE.BOUNDS;
   const drawPointSelected = props.drawType === DRAW_TYPE.POINT;
 
@@ -46,7 +47,7 @@ export function FeatureDrawControl(props: Props) {
           <EuiButtonIcon
             className={`mapToolbarOverlay__button${drawPolygonSelected ? '__selected' : ''}`}
             onClick={() => props.initiateDraw(DRAW_TYPE.POLYGON)}
-            iconType="home"
+            iconType="node"
             aria-label={i18n.translate('xpack.maps.toolbarOverlay.featureDraw.drawPolygonLabel', {
               defaultMessage: 'Draw polygon',
             })}
@@ -57,6 +58,21 @@ export function FeatureDrawControl(props: Props) {
             isSelected={drawPolygonSelected}
           />
         </EuiFlexItem>
+        <EuiFlexItem key={'circle'} grow={false}>
+          <EuiButtonIcon
+            className={`mapToolbarOverlay__button${drawCircleSelected ? '__selected' : ''}`}
+            onClick={() => props.initiateDraw(DRAW_TYPE.DISTANCE)}
+            iconType="plusInCircle"
+            aria-label={i18n.translate('xpack.maps.toolbarOverlay.featureDraw.drawCircleLabel', {
+              defaultMessage: 'Draw circle',
+            })}
+            title={i18n.translate('xpack.maps.toolbarOverlay.featureDraw.drawCircleTitle', {
+              defaultMessage: 'Draw circle',
+            })}
+            aria-pressed={drawCircleSelected}
+            isSelected={drawCircleSelected}
+          />
+        </EuiFlexItem>
         <EuiFlexItem key={'boundingBox'} grow={false}>
           <EuiButtonIcon
             className={`mapToolbarOverlay__button${drawBBoxSelected ? '__selected' : ''}`}
