Geomap: Legend and scale overlapping (#47594)

Updated legend bottom left custom style when scale is shown

public/app/plugins/panel/geomap/GeomapOverlay.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { PureComponent } from 'react';
+import React, { CSSProperties, PureComponent } from 'react';
 
 import { GrafanaTheme } from '@grafana/data';
 import { config } from '@grafana/runtime';
@@ -8,6 +8,7 @@ import { stylesFactory } from '@grafana/ui';
 export interface OverlayProps {
   topRight?: React.ReactNode[];
   bottomLeft?: React.ReactNode[];
+  blStyle?: CSSProperties;
 }
 
 export class GeomapOverlay extends PureComponent<OverlayProps> {
@@ -22,7 +23,11 @@ export class GeomapOverlay extends PureComponent<OverlayProps> {
     return (
       <div className={this.style.overlay}>
         {Boolean(topRight?.length) && <div className={this.style.TR}>{topRight}</div>}
-        {Boolean(bottomLeft?.length) && <div className={this.style.BL}>{bottomLeft}</div>}
+        {Boolean(bottomLeft?.length) && (
+          <div className={this.style.BL} style={this.props.blStyle}>
+            {bottomLeft}
+          </div>
+        )}
       </div>
     );
   }

public/app/plugins/panel/geomap/GeomapPanel.tsx

@@ -17,14 +17,14 @@ import React, { Component, ReactNode } from 'react';
 import { Subject, Subscription } from 'rxjs';
 
 import {
-  PanelData,
+  DataFrame,
-  MapLayerOptions,
-  PanelProps,
-  GrafanaTheme,
   DataHoverClearEvent,
   DataHoverEvent,
-  DataFrame,
   FrameGeometrySourceMode,
+  GrafanaTheme,
+  MapLayerOptions,
+  PanelData,
+  PanelProps,
 } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { PanelContext, PanelContextRoot, stylesFactory } from '@grafana/ui';
@@ -645,13 +645,14 @@ export class GeomapPanel extends Component<Props, State> {
 
   render() {
     const { ttip, ttipOpen, topRight, legends } = this.state;
+    const showScale = this.props.options.controls.showScale;
 
     return (
       <>
         <Global styles={this.globalCSS} />
         <div className={this.style.wrap} onMouseLeave={this.clearTooltip}>
           <div className={this.style.map} ref={this.initMapRef}></div>
-          <GeomapOverlay bottomLeft={legends} topRight={topRight} />
+          <GeomapOverlay bottomLeft={legends} topRight={topRight} blStyle={{ bottom: showScale ? '35px' : '8px' }} />
         </div>
         <GeomapTooltip ttip={ttip} isOpen={ttipOpen} onClose={this.tooltipPopupClosed} />
       </>