Add ScaleControl to various map components (#2802)

* Add ScaleControl to various map components

- Integrated ScaleControl into ActivityMap, BoundsSelectorModal, InsetMap, SupplementalMap, TaskMap, TaskNearbyMap, and LeaderboardMap components for improved user navigation.
- Updated styles in MapPane.scss to ensure proper positioning of the ScaleControl.
- Removed redundant ScaleControl styles from TaskClusterMap.scss.

This enhancement provides users with a clearer understanding of the map scale across different views.

* Refactor imports in ActivityMap and TaskNearbyMap components

- Updated import statements for better readability by using multiline syntax for imports from 'react-leaflet'.
- This change enhances code clarity and maintains consistency across components.

Author: CollinBeczak

src/components/ActivityMap/ActivityMap.jsx

@@ -7,7 +7,14 @@ import _map from "lodash/map";
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
 import { FormattedMessage, injectIntl } from "react-intl";
-import { AttributionControl, CircleMarker, MapContainer, Popup, useMap } from "react-leaflet";
+import {
+  AttributionControl,
+  CircleMarker,
+  MapContainer,
+  Popup,
+  ScaleControl,
+  useMap,
+} from "react-leaflet";
 import { GLOBAL_MAPBOUNDS, toLatLngBounds } from "../../services/MapBounds/MapBounds";
 import { TaskStatusColors } from "../../services/Task/TaskStatus/TaskStatus";
 import { buildLayerSources } from "../../services/VisibleLayer/LayerSources";
@@ -120,6 +127,7 @@ export const ActivityMap = (props) => {
         />
         <ResizeMap />
         <AttributionControl position="bottomleft" prefix={false} />
+        <ScaleControl position="bottomleft" />
         <VisibleTileLayer {...props} zIndex={1} noWrap bounds={toLatLngBounds(GLOBAL_MAPBOUNDS)} />
         {overlayLayers}
         {coloredMarkers}

src/components/BoundsSelectorModal/BoundsSelectorModal.jsx

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import _split from "lodash/split";
 import { Component, Fragment } from "react";
 import { FormattedMessage } from "react-intl";
-import { AttributionControl, MapContainer } from "react-leaflet";
+import { AttributionControl, MapContainer, ScaleControl } from "react-leaflet";
 import { fromLatLngBounds, toLatLngBounds } from "../../services/MapBounds/MapBounds";
 import { DEFAULT_MAP_BOUNDS } from "../../services/MapBounds/MapBounds";
 import { defaultLayerSource } from "../../services/VisibleLayer/LayerSources";
@@ -103,6 +103,7 @@ export default class BoundsSelectorModal extends Component {
                           fitBoundsControl
                         />
                         <AttributionControl position="bottomleft" prefix={false} />
+                        <ScaleControl position="bottomleft" />
                         <SourcedTileLayer source={defaultLayerSource()} skipAttribution={true} />
                         <AreaSelect
                           bounds={boundingBox}

src/components/EnhancedMap/MapPane/MapPane.scss

@@ -106,6 +106,11 @@
             color: $grey;
           }
         }
+
+        .leaflet-control-scale.leaflet-control {
+          top: 0;
+          box-shadow: none;
+        }
       }
     }
 

src/components/EnhancedMap/SourcedTileLayer/SourcedTileLayer.jsx

@@ -22,7 +22,7 @@ import TileLayerErrorBoundary from "../../TaskClusterMap/TileLayerErrorBoundary"
  *
  * @author [Neil Rotstan](https://github.com/nrotstan)
  */
-const SourcedTileLayerInternal = (props) => {
+const SourcedTileLayerInternal = ({ className, ...props }) => {
   const [layerRenderFailed, setLayerRenderFailed] = useState(false);
 
   const attribution = (layer) => {

src/components/InsetMap/InsetMap.jsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import { Component, useEffect } from "react";
-import { AttributionControl, MapContainer, Marker, useMap } from "react-leaflet";
+import { AttributionControl, MapContainer, Marker, ScaleControl, useMap } from "react-leaflet";
 import { defaultLayerSource, layerSourceWithId } from "../../services/VisibleLayer/LayerSources";
 import SourcedTileLayer from "../EnhancedMap/SourcedTileLayer/SourcedTileLayer";
 import "./InsetMap.scss";
@@ -36,6 +36,7 @@ export default class InsetMap extends Component {
         >
           <ResizeMap />
           <AttributionControl position="bottomleft" prefix={false} />
+          <ScaleControl position="bottomleft" />
           <SourcedTileLayer source={layerSource} skipAttribution={true} />
           <Marker
             position={this.props.centerPoint}

src/components/SupplementalMap/SupplementalMap.jsx

@@ -4,7 +4,7 @@ import _map from "lodash/map";
 import _sortBy from "lodash/sortBy";
 import _uniqueId from "lodash/uniqueId";
 import { useEffect, useState } from "react";
-import { AttributionControl, MapContainer, Pane, useMap } from "react-leaflet";
+import { AttributionControl, MapContainer, Pane, ScaleControl, useMap } from "react-leaflet";
 import {
   DEFAULT_ZOOM,
   MAX_ZOOM,
@@ -131,6 +131,7 @@ const SupplementalMap = (props) => {
       >
         <ResizeMap />
         <AttributionControl position="bottomleft" prefix={false} />
+        <ScaleControl position="bottomleft" />
         <SupplementalMapContent {...props} />
       </MapContainer>
     </div>

src/components/TaskClusterMap/MapControlsDrawer.jsx

@@ -365,6 +365,10 @@ const MapControlsDrawer = (props) => {
           transition: transform 0.3s ease-in-out;
         }
 
+        .map-controls-drawer:not(.open) .map-drawer-content {
+          display: none;
+        }
+
         /* Add styles for lasso icons */
         .lasso-icon-container {
           position: relative;

src/components/TaskClusterMap/TaskClusterMap.scss

@@ -55,9 +55,6 @@
     height: 100%;
   }
 
-  .leaflet-control-scale {
-    top: 0px !important;
-  }
 }
 
 .greyscale-cluster {

src/components/TaskPane/TaskMap/TaskMap.jsx

@@ -21,6 +21,7 @@ import {
   LayerGroup,
   MapContainer,
   Pane,
+  ScaleControl,
   useMap,
   useMapEvents,
 } from "react-leaflet";
@@ -769,6 +770,7 @@ const TaskMap = (props) => {
       >
         <ResizeMap />
         <AttributionControl position="bottomleft" prefix={false} />
+        <ScaleControl position="bottomleft" />
         <TaskMapContent {...props} />
       </MapContainer>
     </div>

src/components/TaskPane/TaskNearbyList/TaskNearbyMap.jsx

@@ -6,7 +6,14 @@ import "leaflet-vectoricon";
 import "leaflet.markercluster/dist/MarkerCluster.css";
 import _cloneDeep from "lodash/cloneDeep";
 import _map from "lodash/map";
-import { AttributionControl, MapContainer, Marker, Tooltip, useMap } from "react-leaflet";
+import {
+  AttributionControl,
+  MapContainer,
+  Marker,
+  ScaleControl,
+  Tooltip,
+  useMap,
+} from "react-leaflet";
 import resolveConfig from "tailwindcss/resolveConfig";
 import AsMappableTask from "../../../interactions/Task/AsMappableTask";
 import {
@@ -271,6 +278,7 @@ export class TaskNearbyMap extends Component {
           />
           <ResizeMap />
           <AttributionControl position="bottomleft" prefix={false} />
+          <ScaleControl position="bottomleft" />
 
           <VisibleTileLayer {...this.props} zIndex={1} />
           {overlayLayers}