fix(plugin-gis-viewer): CB-1805 map controls

webapp/packages/plugin-gis-viewer/src/LeafletMap.tsx

@@ -9,8 +9,6 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="./react-leaflet.d.ts" />
 
-import 'leaflet/dist/leaflet.css';
-
 import type geojson from 'geojson';
 import leaflet from 'leaflet';
 import { useCallback, useEffect, useState } from 'react';
@@ -22,6 +20,8 @@ import { useSplit } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import type { IResultSetElementKey, IResultSetValue } from '@cloudbeaver/plugin-data-viewer';
 
+import baseStyles from './styles/base.scss';
+
 export interface IAssociatedValue {
   key: string;
   value: IResultSetValue;
@@ -180,7 +180,7 @@ export const LeafletMap: React.FC<Props> = function LeafletMap({ geoJSON, getAss
     }
   }, [splitContext.isResizing, splitContext.mode, crs, mapRef]);
 
-  return styled(styles)(
+  return styled(styles, baseStyles)(
     <MapContainer crs={crs} whenCreated={setMapRef} zoom={12}>
       <GeoJSON
         // data is not optional property, see react-leaflet.d.ts
@@ -218,5 +218,4 @@ export const LeafletMap: React.FC<Props> = function LeafletMap({ geoJSON, getAss
       )}
     </MapContainer>
   );
-}
-;
+};

webapp/packages/plugin-gis-viewer/src/styles/base.scss

@@ -0,0 +1,23 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2022 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+@import "leaflet/dist/leaflet.css";
+
+/* TODO remove when the global 'input' and 'a' styles are not applied anymore */
+.leaflet-control-layers-selector {
+  width: unset !important;
+  min-height: unset !important;
+}
+
+.leaflet-control-zoom-out,
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out:hover,
+.leaflet-control-zoom-out:hover {
+  color: black !important;
+  text-decoration: none !important;
+}