adds map scale

Vizzuality · Jan 26, 2024 · ac69bfb · ac69bfb
1 parent 913a7d8
commit ac69bfb
Show file tree

Hide file tree

Showing 16 changed files with 118 additions and 52 deletions.
diff --git a/app/components/map/scale/index.tsx b/app/components/map/scale/index.tsx
@@ -0,0 +1,17 @@
+import { ComponentProps } from 'react';
+
+import { ScaleControl } from 'react-map-gl';
+
+import { cn } from 'utils/cn';
+
+const MapScale = ({ className, ...props }: ComponentProps<typeof ScaleControl>): JSX.Element => (
+  <ScaleControl
+    {...props}
+    className={cn({
+      'absolute bottom-6 right-[305px]': true,
+      [className]: !!className,
+    })}
+  />
+);
+
+export default MapScale;
diff --git a/app/layout/project/reports/comparison/map/index.tsx b/app/layout/project/reports/comparison/map/index.tsx
@@ -14,6 +14,7 @@ import { useProject } from 'hooks/projects';
 import { useScenarios } from 'hooks/scenarios';
 
 import Map from 'components/map';
+import MapScale from 'components/map/scale';
 
 export const ScreenshotComparisionMap = ({ id }: { id: string }): JSX.Element => {
   const [cache] = useState<number>(Date.now());
@@ -145,11 +146,15 @@ export const ScreenshotComparisionMap = ({ id }: { id: string }): JSX.Element =>
         >
           {(map) => {
             return (
-              <LayerManager map={map} plugin={PluginMapboxGl}>
-                {LAYERS.map((l) => (
-                  <Layer key={l.id} {...l} />
-                ))}
-              </LayerManager>
+              <>
+                <LayerManager map={map} plugin={PluginMapboxGl}>
+                  {LAYERS.map((l) => (
+                    <Layer key={l.id} {...l} />
+                  ))}
+                </LayerManager>
+
+                <MapScale />
+              </>
             );
           }}
         </Map>

diff --git a/app/layout/projects/new/map/component.tsx b/app/layout/projects/new/map/component.tsx
@@ -21,6 +21,7 @@ import Controls from 'components/map/controls';
 import FitBoundsControl from 'components/map/controls/fit-bounds';
 import LoadingControl from 'components/map/controls/loading';
 import ZoomControl from 'components/map/controls/zoom';
+import MapScale from 'components/map/scale';
 import type { NewProjectFields } from 'layout/projects/new/form';
 import { MapProps } from 'types/map';
 import { centerMap } from 'utils/map';
@@ -167,11 +168,14 @@ export const ProjectNewMap = ({
       >
         {(map) => {
           return (
-            <LayerManager map={map} plugin={PluginMapboxGl}>
-              {LAYERS.map((l) => (
-                <Layer key={l.id} {...l} />
-              ))}
-            </LayerManager>
+            <>
+              <LayerManager map={map} plugin={PluginMapboxGl}>
+                {LAYERS.map((l) => (
+                  <Layer key={l.id} {...l} />
+                ))}
+              </LayerManager>
+              <MapScale />
+            </>
           );
         }}
       </Map>

diff --git a/app/layout/projects/show/map/index.tsx b/app/layout/projects/show/map/index.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps, useCallback, useEffect, useMemo, useState, useRef } from 'react';
 
-import { useQueryClient } from 'react-query';
+import { ScaleControl } from 'react-map-gl';
 
 import { useRouter } from 'next/router';
 
@@ -50,6 +50,7 @@ import LegendTypeBasic from 'components/map/legend/types/basic';
 import LegendTypeChoropleth from 'components/map/legend/types/choropleth';
 import LegendTypeGradient from 'components/map/legend/types/gradient';
 import LegendTypeMatrix from 'components/map/legend/types/matrix';
+import MapScale from 'components/map/scale';
 import HelpBeacon from 'layout/help/beacon';
 import { Scenario } from 'types/api/scenario';
 import { MapProps } from 'types/map';
@@ -525,11 +526,14 @@ export const ProjectMap = (): JSX.Element => {
               >
                 {(map) => {
                   return (
-                    <LayerManager map={map} plugin={PluginMapboxGl}>
-                      {LAYERS.map((l) => (
-                        <Layer key={l.id} {...l} />
-                      ))}
-                    </LayerManager>
+                    <>
+                      <LayerManager map={map} plugin={PluginMapboxGl}>
+                        {LAYERS.map((l) => (
+                          <Layer key={l.id} {...l} />
+                        ))}
+                      </LayerManager>
+                      <MapScale />
+                    </>
                   );
                 }}
               </Map>
@@ -639,6 +643,8 @@ export const ProjectMap = (): JSX.Element => {
             </Legend>
           </div>
 
+          <ScaleControl className="absolute right-0 z-30" />
+
           {!!SCENARIOS_RUNNED.sid1Options.length && !tab && (
             <div
               className={cn({

diff --git a/app/layout/scenarios/edit/map/component.tsx b/app/layout/scenarios/edit/map/component.tsx
@@ -49,6 +49,7 @@ import LegendTypeBasic from 'components/map/legend/types/basic';
 import LegendTypeChoropleth from 'components/map/legend/types/choropleth';
 import LegendTypeGradient from 'components/map/legend/types/gradient';
 import LegendTypeMatrix from 'components/map/legend/types/matrix';
+import MapScale from 'components/map/scale';
 import { TABS } from 'layout/project/navigation/constants';
 import ScenariosDrawingManager from 'layout/scenarios/edit/map/drawing-manager';
 import { MapProps } from 'types/map';
@@ -69,7 +70,6 @@ export const ScenariosEditMap = (): JSX.Element => {
   const { isSidebarOpen } = useAppSelector((state) => state['/projects/[id]']);
 
   const accessToken = useAccessToken();
-  // const queryClient = useQueryClient();
 
   const { query } = useRouter();
 
@@ -581,6 +581,7 @@ export const ScenariosEditMap = (): JSX.Element => {
 
               {/* Drawing editor */}
               <ScenariosDrawingManager />
+              <MapScale />
             </>
           );
         }}

diff --git a/app/layout/scenarios/new/map/component.tsx b/app/layout/scenarios/new/map/component.tsx
@@ -23,6 +23,7 @@ import LegendTypeBasic from 'components/map/legend/types/basic';
 import LegendTypeChoropleth from 'components/map/legend/types/choropleth';
 import LegendTypeGradient from 'components/map/legend/types/gradient';
 import LegendTypeMatrix from 'components/map/legend/types/matrix';
+import MapScale from 'components/map/scale';
 import ScenariosDrawingManager from 'layout/scenarios/edit/map/drawing-manager';
 import { MapProps } from 'types/map';
 import { centerMap } from 'utils/map';
@@ -150,6 +151,7 @@ export const ScenarioNewMap = (): JSX.Element => {
 
               {/* Drawing editor */}
               <ScenariosDrawingManager />
+              <MapScale />
             </>
           );
         }}

diff --git a/app/layout/scenarios/reports/blm/map/component.tsx b/app/layout/scenarios/reports/blm/map/component.tsx
@@ -14,6 +14,7 @@ import { useBBOX, useScenarioBlmLayer } from 'hooks/map';
 import { useProject } from 'hooks/projects';
 
 import Map from 'components/map';
+import MapScale from 'components/map/scale';
 
 export interface ScreenshotBLMMapProps {
   id: string;
@@ -117,9 +118,12 @@ export const ScreenshotBLMMap: React.FC<ScreenshotBLMMapProps> = ({
         >
           {(map) => {
             return (
-              <LayerManager map={map} plugin={PluginMapboxGl}>
-                <Layer key={BLMLayer.id} {...BLMLayer} />
-              </LayerManager>
+              <>
+                <LayerManager map={map} plugin={PluginMapboxGl}>
+                  <Layer key={BLMLayer.id} {...BLMLayer} />
+                </LayerManager>
+                <MapScale />
+              </>
             );
           }}
         </Map>

diff --git a/app/layout/scenarios/reports/frequency/map/component.tsx b/app/layout/scenarios/reports/frequency/map/component.tsx
@@ -14,6 +14,7 @@ import { useBBOX, usePUGridLayer } from 'hooks/map';
 import { useProject } from 'hooks/projects';
 
 import Map from 'components/map';
+import MapScale from 'components/map/scale';
 
 export interface ScreenshotBLMMapProps {
   id: string;
@@ -118,9 +119,12 @@ export const ScreenshotBLMMap: React.FC<ScreenshotBLMMapProps> = ({
         >
           {(map) => {
             return (
-              <LayerManager map={map} plugin={PluginMapboxGl}>
-                <Layer key={PUGridLayer.id} {...PUGridLayer} />
-              </LayerManager>
+              <>
+                <LayerManager map={map} plugin={PluginMapboxGl}>
+                  <Layer key={PUGridLayer.id} {...PUGridLayer} />
+                </LayerManager>
+                <MapScale />
+              </>
             );
           }}
         </Map>

diff --git a/app/layout/scenarios/reports/solutions/best-solution/map/index.tsx b/app/layout/scenarios/reports/solutions/best-solution/map/index.tsx
@@ -14,6 +14,7 @@ import { useProject } from 'hooks/projects';
 import { useBestSolution } from 'hooks/solutions';
 
 import Map from 'components/map';
+import MapScale from 'components/map/scale';
 
 export const ReportMap = ({ id }: { id: string }): JSX.Element => {
   const accessToken = useAccessToken();
@@ -111,9 +112,12 @@ export const ReportMap = ({ id }: { id: string }): JSX.Element => {
         >
           {(map) => {
             return (
-              <LayerManager map={map} plugin={PluginMapboxGl}>
-                <Layer key={PUGridLayer.id} {...PUGridLayer} />
-              </LayerManager>
+              <>
+                <LayerManager map={map} plugin={PluginMapboxGl}>
+                  <Layer key={PUGridLayer.id} {...PUGridLayer} />
+                </LayerManager>
+                <MapScale />
+              </>
             );
           }}
         </Map>

diff --git a/app/layout/scenarios/reports/solutions/cost-surface/map/index.tsx b/app/layout/scenarios/reports/solutions/cost-surface/map/index.tsx
@@ -14,6 +14,7 @@ import { useBBOX, useCostSurfaceLayer } from 'hooks/map';
 import { useProject } from 'hooks/projects';
 
 import Map from 'components/map';
+import MapScale from 'components/map/scale';
 
 const minZoom = 2;
 const maxZoom = 20;
@@ -119,9 +120,12 @@ export const CostSurfaceReportMap = ({ id }: { id: string }): JSX.Element => {
         >
           {(map) => {
             return (
-              <LayerManager map={map} plugin={PluginMapboxGl}>
-                <Layer key={PUGridLayer.id} {...PUGridLayer} />
-              </LayerManager>
+              <>
+                <LayerManager map={map} plugin={PluginMapboxGl}>
+                  <Layer key={PUGridLayer.id} {...PUGridLayer} />
+                </LayerManager>
+                <MapScale />
+              </>
             );
           }}
         </Map>

diff --git a/app/layout/scenarios/reports/solutions/different-solutions/map/index.tsx b/app/layout/scenarios/reports/solutions/different-solutions/map/index.tsx
@@ -13,6 +13,7 @@ import { useBBOX, usePUGridLayer } from 'hooks/map';
 import { useProject } from 'hooks/projects';
 
 import Map from 'components/map';
+import MapScale from 'components/map/scale';
 
 export const ReportMap = ({ id, runId }: { id: string; runId: number }): JSX.Element => {
   const accessToken = useAccessToken();
@@ -108,9 +109,12 @@ export const ReportMap = ({ id, runId }: { id: string; runId: number }): JSX.Ele
         >
           {(map) => {
             return (
-              <LayerManager map={map} plugin={PluginMapboxGl}>
-                <Layer key={PUGridLayer.id} {...PUGridLayer} />
-              </LayerManager>
+              <>
+                <LayerManager map={map} plugin={PluginMapboxGl}>
+                  <Layer key={PUGridLayer.id} {...PUGridLayer} />
+                </LayerManager>
+                <MapScale />
+              </>
             );
           }}
         </Map>

diff --git a/app/layout/scenarios/reports/solutions/frequency/map/index.tsx b/app/layout/scenarios/reports/solutions/frequency/map/index.tsx
@@ -14,6 +14,7 @@ import { useProject } from 'hooks/projects';
 import { useScenario } from 'hooks/scenarios';
 
 import Map from 'components/map';
+import MapScale from 'components/map/scale';
 
 export const ReportMap = ({ id }: { id: string }): JSX.Element => {
   const [cache] = useState<number>(Date.now());
@@ -112,9 +113,12 @@ export const ReportMap = ({ id }: { id: string }): JSX.Element => {
         >
           {(map) => {
             return (
-              <LayerManager map={map} plugin={PluginMapboxGl}>
-                <Layer key={PUGridLayer.id} {...PUGridLayer} />
-              </LayerManager>
+              <>
+                <LayerManager map={map} plugin={PluginMapboxGl}>
+                  <Layer key={PUGridLayer.id} {...PUGridLayer} />
+                </LayerManager>
+                <MapScale />
+              </>
             );
           }}
         </Map>

diff --git a/app/layout/scenarios/reports/solutions/grid/map/index.tsx b/app/layout/scenarios/reports/solutions/grid/map/index.tsx
@@ -13,6 +13,7 @@ import { useBBOX, usePUGridLayer } from 'hooks/map';
 import { useProject } from 'hooks/projects';
 
 import Map from 'components/map';
+import MapScale from 'components/map/scale';
 
 export const ReportMap = ({ id }: { id: string }): JSX.Element => {
   const accessToken = useAccessToken();
@@ -108,9 +109,12 @@ export const ReportMap = ({ id }: { id: string }): JSX.Element => {
         >
           {(map) => {
             return (
-              <LayerManager map={map} plugin={PluginMapboxGl}>
-                <Layer key={PUGridLayer.id} {...PUGridLayer} />
-              </LayerManager>
+              <>
+                <LayerManager map={map} plugin={PluginMapboxGl}>
+                  <Layer key={PUGridLayer.id} {...PUGridLayer} />
+                </LayerManager>
+                <MapScale />
+              </>
             );
           }}
         </Map>

diff --git a/app/layout/scenarios/reports/solutions/pu-status/map/index.tsx b/app/layout/scenarios/reports/solutions/pu-status/map/index.tsx
@@ -15,6 +15,7 @@ import { useScenario, useScenarioPU } from 'hooks/scenarios';
 import { useWDPACategories } from 'hooks/wdpa';
 
 import Map from 'components/map';
+import MapScale from 'components/map/scale';
 
 export const ReportMap = ({ id }: { id: string }): JSX.Element => {
   const accessToken = useAccessToken();
@@ -128,9 +129,12 @@ export const ReportMap = ({ id }: { id: string }): JSX.Element => {
         >
           {(map) => {
             return (
-              <LayerManager map={map} plugin={PluginMapboxGl}>
-                <Layer key={PUGridLayer.id} {...PUGridLayer} />
-              </LayerManager>
+              <>
+                <LayerManager map={map} plugin={PluginMapboxGl}>
+                  <Layer key={PUGridLayer.id} {...PUGridLayer} />
+                </LayerManager>
+                <MapScale />
+              </>
             );
           }}
         </Map>

diff --git a/app/layout/scenarios/reports/solutions/selected-solution-page/map/index.tsx b/app/layout/scenarios/reports/solutions/selected-solution-page/map/index.tsx
@@ -16,6 +16,7 @@ import { useScenario } from 'hooks/scenarios';
 import { useBestSolution, useSolution } from 'hooks/solutions';
 
 import Map from 'components/map';
+import MapScale from 'components/map/scale';
 
 export const ScenariosReportMap = ({ id }: { id: string }): JSX.Element => {
   const accessToken = useAccessToken();
@@ -124,9 +125,12 @@ export const ScenariosReportMap = ({ id }: { id: string }): JSX.Element => {
         >
           {(map) => {
             return (
-              <LayerManager map={map} plugin={PluginMapboxGl}>
-                <Layer key={PUGridLayer.id} {...PUGridLayer} />
-              </LayerManager>
+              <>
+                <LayerManager map={map} plugin={PluginMapboxGl}>
+                  <Layer key={PUGridLayer.id} {...PUGridLayer} />
+                </LayerManager>
+                <MapScale />
+              </>
             );
           }}
         </Map>

diff --git a/app/styles/globals.css b/app/styles/globals.css
@@ -596,13 +596,8 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   display: none;
 }
 .mapboxgl-ctrl-scale {
-  background-color: hsla(0, 0%, 100%, 0.75);
-  font-size: 10px;
-  border: 2px solid #333;
-  border-top: #333;
-  padding: 0 5px;
-  color: #333;
-  box-sizing: border-box;
+  background-color: hsla(0, 0%, 100%, 0.50);
+  @apply text-xs text-center text-gray-900 uppercase !w-20;
 }
 .mapboxgl-popup {
   position: absolute;
@@ -812,4 +807,4 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 .modal-checkbox-list {
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
-}
+}