From 8a1eb1ab19c53ba0a481ace775f363b071b5dc60 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 15 Aug 2023 08:45:55 +0900 Subject: [PATCH 1/4] Add scalebar to explore page --- app/scripts/components/common/mapbox/index.tsx | 3 +++ app/scripts/components/common/mapbox/map.tsx | 12 ++++++++++-- app/scripts/components/datasets/s-explore/index.tsx | 1 + 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/app/scripts/components/common/mapbox/index.tsx b/app/scripts/components/common/mapbox/index.tsx index 23e692f5d..0113950ba 100644 --- a/app/scripts/components/common/mapbox/index.tsx +++ b/app/scripts/components/common/mapbox/index.tsx @@ -125,6 +125,7 @@ function MapboxMapComponent( onPositionChange, initialPosition, withGeocoder, + withScale, aoi, onAoiChange, projection, @@ -439,6 +440,7 @@ function MapboxMapComponent( cooperativeGestures }} withGeocoder={withGeocoder} + withScale={withScale} aoi={aoi} onAoiChange={onAoiChange} projection={projection} @@ -526,6 +528,7 @@ export interface MapboxMapProps { } ) => void; withGeocoder?: boolean; + withScale?: boolean; children?: ReactNode; aoi?: AoiState; onAoiChange?: AoiChangeListenerOverload; diff --git a/app/scripts/components/common/mapbox/map.tsx b/app/scripts/components/common/mapbox/map.tsx index f02946a36..5a986d8e1 100644 --- a/app/scripts/components/common/mapbox/map.tsx +++ b/app/scripts/components/common/mapbox/map.tsx @@ -10,7 +10,8 @@ import mapboxgl, { AttributionControl, EventData, MapboxOptions, - NavigationControl + NavigationControl, + ScaleControl } from 'mapbox-gl'; import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'; import 'mapbox-gl/dist/mapbox-gl.css'; @@ -48,6 +49,7 @@ interface SimpleMapProps { onUnmount?: () => void; mapOptions: Partial>; withGeocoder?: boolean; + withScale?: boolean; aoi?: AoiState; onAoiChange?: AoiChangeListenerOverload; projection?: ProjectionOptions; @@ -74,6 +76,7 @@ export function SimpleMap(props: SimpleMapProps): ReactElement { onUnmount, mapOptions, withGeocoder, + withScale, aoi, onAoiChange, projection, @@ -149,13 +152,18 @@ export function SimpleMap(props: SimpleMapProps): ReactElement { } // Add zoom controls without compass. - if (mapOptions?.interactive !== false) { + if (mapOptions.interactive !== false) { mbMap.addControl( new NavigationControl({ showCompass: false }), 'top-left' ); } + if (withScale) { + const scalecontrol = new ScaleControl(); + mbMap.addControl(scalecontrol, 'bottom-left'); + } + onLoad && mbMap.once('load', onLoad); // Trigger a resize to handle flex layout quirks. diff --git a/app/scripts/components/datasets/s-explore/index.tsx b/app/scripts/components/datasets/s-explore/index.tsx index 7f7450ae1..ac390c5eb 100644 --- a/app/scripts/components/datasets/s-explore/index.tsx +++ b/app/scripts/components/datasets/s-explore/index.tsx @@ -563,6 +563,7 @@ function DatasetsExplore() { Date: Tue, 15 Aug 2023 16:17:33 +0100 Subject: [PATCH 2/4] Re-style scale to match other controls --- .../components/common/mapbox/mapbox-style-override.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/scripts/components/common/mapbox/mapbox-style-override.js b/app/scripts/components/common/mapbox/mapbox-style-override.js index 4f571ce05..c2647ff7f 100644 --- a/app/scripts/components/common/mapbox/mapbox-style-override.js +++ b/app/scripts/components/common/mapbox/mapbox-style-override.js @@ -80,6 +80,7 @@ const MapboxStyleOverride = css` .mapboxgl-ctrl-bottom-left { flex-direction: row; align-items: flex-end; + align-items: center; } .mapboxgl-ctrl-group { @@ -167,6 +168,12 @@ const MapboxStyleOverride = css` cursor: pointer; } + .mapboxgl-ctrl-scale { + color: ${themeVal('color.surface')}; + border-color: ${themeVal('color.surface')}; + background-color: ${themeVal('color.base-400a')}; + } + /* GEOCODER styles */ .mapboxgl-ctrl.mapboxgl-ctrl-geocoder { background-color: ${themeVal('color.surface')}; From c0d972d2a07127ab599284b2ef90abe93f4ae75f Mon Sep 17 00:00:00 2001 From: Daniel da Silva Date: Tue, 15 Aug 2023 17:22:23 +0100 Subject: [PATCH 3/4] Include scale on mdx map block --- app/scripts/components/common/blocks/block-map.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/scripts/components/common/blocks/block-map.tsx b/app/scripts/components/common/blocks/block-map.tsx index 59d817f15..239b6bc80 100644 --- a/app/scripts/components/common/blocks/block-map.tsx +++ b/app/scripts/components/common/blocks/block-map.tsx @@ -168,6 +168,7 @@ function MapBlock(props: MapBlockProps) { cooperativeGestures projection={projection} onProjectionChange={allowProjectionChange ? setProjection : undefined} + withScale /> ); From cd0d0a98e6e5e5b49f2f2d9be993e79961f3112a Mon Sep 17 00:00:00 2001 From: Daniel da Silva Date: Tue, 15 Aug 2023 17:23:57 +0100 Subject: [PATCH 4/4] Include scale on compare map --- app/scripts/components/common/mapbox/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/scripts/components/common/mapbox/index.tsx b/app/scripts/components/common/mapbox/index.tsx index 0113950ba..6883dbb94 100644 --- a/app/scripts/components/common/mapbox/index.tsx +++ b/app/scripts/components/common/mapbox/index.tsx @@ -491,6 +491,7 @@ function MapboxMapComponent( zoom: mapRef.current?.getZoom() }} withGeocoder={withGeocoder} + withScale={withScale} aoi={aoi} onAoiChange={onAoiChange} projection={projection}