Skip to content

Commit bb9a501

Browse files
frozenheliumfrozenhelium
authored
Merge pull request #1605 from IFRCGo/fix/map-filtering-base-map
Use GlobalMap in-place of BaseMap
2 parents 9f63f03 + cbb58f5 commit bb9a501

File tree

17 files changed

+174
-409
lines changed

17 files changed

+174
-409
lines changed

‎app/src/components/domain/ActiveOperationMap/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -432,7 +432,7 @@ function ActiveOperationMap(props: Props) {
432432
)}
433433
>
434434
<GlobalMap
435-
onClick={handleCountryClick}
435+
onAdminZeroFillClick={handleCountryClick}
436436
>
437437
<MapContainerWithDisclaimer
438438
className={styles.mapContainer}

‎app/src/components/domain/BaseMap/index.tsx‎

Lines changed: 39 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import { useMemo } from 'react';
2-
import { ErrorBoundary } from '@sentry/react';
31
import {
4-
isDefined,
5-
isFalsyString,
6-
isNotDefined,
7-
} from '@togglecorp/fujs';
2+
useContext,
3+
useMemo,
4+
} from 'react';
5+
import { LanguageContext } from '@ifrc-go/ui/contexts';
6+
import { ErrorBoundary } from '@sentry/react';
87
import Map, {
98
MapLayer,
109
MapSource,
1110
} from '@togglecorp/re-map';
1211
import { type SymbolLayer } from 'mapbox-gl';
1312

14-
import useCountry from '#hooks/domain/useCountry';
1513
import {
1614
defaultMapOptions,
1715
defaultMapStyle,
@@ -28,39 +26,8 @@ type overrides = 'mapStyle' | 'mapOptions' | 'navControlShown' | 'navControlPosi
2826
export type Props = Omit<MapProps, overrides> & {
2927
baseLayers?: React.ReactNode;
3028
withDisclaimer?: boolean;
31-
// NOTE: Labels with be added from the country information instead of the
32-
// mapbox layers
33-
withoutLabel?: boolean;
3429
} & Partial<Pick<MapProps, overrides>>;
3530

36-
const sourceOptions: mapboxgl.GeoJSONSourceRaw = {
37-
type: 'geojson',
38-
};
39-
40-
const adminLabelOverrideOptions: Omit<SymbolLayer, 'id'> = {
41-
type: 'symbol',
42-
layout: {
43-
'text-field': ['get', 'name'],
44-
'text-font': ['Poppins Regular', 'Arial Unicode MS Regular'],
45-
'text-letter-spacing': 0.15,
46-
'text-line-height': 1.2,
47-
'text-max-width': 8,
48-
'text-justify': 'center',
49-
'text-anchor': 'top',
50-
'text-padding': 2,
51-
'text-size': [
52-
'interpolate', ['linear', 1], ['zoom'],
53-
0, 6,
54-
6, 16,
55-
],
56-
},
57-
paint: {
58-
'text-color': '#000000',
59-
'text-halo-color': '#555555',
60-
'text-halo-width': 0.2,
61-
},
62-
};
63-
6431
function BaseMap(props: Props) {
6532
const {
6633
baseLayers,
@@ -71,36 +38,33 @@ function BaseMap(props: Props) {
7138
navControlOptions,
7239
scaleControlShown,
7340
children,
74-
withoutLabel = false,
7541
...otherProps
7642
} = props;
7743

78-
const countries = useCountry();
44+
const { currentLanguage } = useContext(LanguageContext);
7945

80-
// FIXME: We should check for special cases like ICRC, IFRC, etc.
81-
const countryCentroidGeoJson = useMemo(
82-
(): GeoJSON.FeatureCollection<GeoJSON.Geometry> => ({
83-
type: 'FeatureCollection' as const,
84-
features: countries
85-
?.map((country) => {
86-
if (isFalsyString(country.name) || isNotDefined(country.centroid)) {
87-
return undefined;
88-
}
46+
const adminLabelLayerOptions : Omit<SymbolLayer, 'id'> = useMemo(
47+
() => {
48+
// ar, es, fr
49+
let label: string;
50+
if (currentLanguage === 'es') {
51+
label = 'name_es';
52+
} else if (currentLanguage === 'ar') {
53+
label = 'name_ar';
54+
} else if (currentLanguage === 'fr') {
55+
label = 'name_fr';
56+
} else {
57+
label = 'name';
58+
}
8959

90-
return {
91-
type: 'Feature' as const,
92-
geometry: country.centroid as {
93-
type: 'Point',
94-
coordinates: [number, number],
95-
},
96-
properties: {
97-
id: country.id,
98-
name: country.name,
99-
},
100-
};
101-
}).filter(isDefined) ?? [],
102-
}),
103-
[countries],
60+
return {
61+
type: 'symbol',
62+
layout: {
63+
'text-field': ['get', label],
64+
},
65+
};
66+
},
67+
[currentLanguage],
10468
);
10569

10670
return (
@@ -118,20 +82,20 @@ function BaseMap(props: Props) {
11882
sourceKey="composite"
11983
managed={false}
12084
>
85+
<MapLayer
86+
layerKey="admin-0-label"
87+
layerOptions={adminLabelLayerOptions}
88+
/>
89+
<MapLayer
90+
layerKey="admin-0-label-non-independent"
91+
layerOptions={adminLabelLayerOptions}
92+
/>
93+
<MapLayer
94+
layerKey="admin-0-label-priority"
95+
layerOptions={adminLabelLayerOptions}
96+
/>
12197
{baseLayers}
12298
</MapSource>
123-
{!withoutLabel && (
124-
<MapSource
125-
sourceKey="override-labels"
126-
sourceOptions={sourceOptions}
127-
geoJson={countryCentroidGeoJson}
128-
>
129-
<MapLayer
130-
layerKey="symbol-label"
131-
layerOptions={adminLabelOverrideOptions}
132-
/>
133-
</MapSource>
134-
)}
13599
{children}
136100
</Map>
137101
);

‎app/src/components/domain/GlobalMap/index.tsx‎

Lines changed: 13 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
import {
2-
useContext,
32
useMemo,
43
useState,
54
} from 'react';
6-
import { LanguageContext } from '@ifrc-go/ui/contexts';
75
import { MapLayer } from '@togglecorp/re-map';
86
import {
97
type Expression,
108
type FillLayer,
119
type FillPaint,
12-
type LineLayer,
1310
type LngLatLike,
1411
type MapboxGeoJSONFeature,
15-
type SymbolLayer,
1612
} from 'mapbox-gl';
1713

1814
import BaseMap, { type Props as BaseMapProps } from '#components/domain/BaseMap';
@@ -62,19 +58,23 @@ const adminZeroHighlightPaint: FillPaint = {
6258
],
6359
};
6460

65-
interface Props extends Omit<BaseMapProps, 'baseLayers'> {
66-
onHover?: (hoveredFeatureProperties: AdminZeroFeatureProperties | undefined) => void;
67-
onClick?: (
61+
interface Props extends BaseMapProps {
62+
adminZeroFillPaint?: mapboxgl.FillPaint,
63+
onAdminZeroFillHover?: (
64+
hoveredFeatureProperties: AdminZeroFeatureProperties | undefined
65+
) => void;
66+
onAdminZeroFillClick?: (
6867
clickedFeatureProperties: AdminZeroFeatureProperties,
6968
lngLat: LngLatLike,
7069
) => void;
71-
activeCountryIso3?: string | undefined | null;
7270
}
7371

7472
function GlobalMap(props: Props) {
7573
const {
76-
onHover,
77-
onClick,
74+
onAdminZeroFillHover: onHover,
75+
onAdminZeroFillClick: onClick,
76+
adminZeroFillPaint,
77+
baseLayers,
7878
...baseMapProps
7979
} = props;
8080

@@ -146,52 +146,15 @@ function GlobalMap(props: Props) {
146146
visibility: 'visible',
147147
'fill-sort-key': fillSortKey,
148148
},
149+
paint: adminZeroFillPaint,
149150
}),
150-
[fillSortKey],
151-
);
152-
153-
const adminZeroLineLayerOptions = useMemo<Omit<LineLayer, 'id'>>(
154-
() => ({
155-
type: 'line',
156-
layout: {
157-
visibility: 'visible',
158-
},
159-
}),
160-
[],
161-
);
162-
163-
const { currentLanguage } = useContext(LanguageContext);
164-
165-
const adminLabelLayerOptions : Omit<SymbolLayer, 'id'> = useMemo(
166-
() => {
167-
// ar, es, fr
168-
let label: string;
169-
if (currentLanguage === 'es') {
170-
label = 'name_es';
171-
} else if (currentLanguage === 'ar') {
172-
label = 'name_ar';
173-
} else if (currentLanguage === 'fr') {
174-
label = 'name_fr';
175-
} else {
176-
label = 'name';
177-
}
178-
179-
return {
180-
type: 'symbol',
181-
layout: {
182-
'text-field': ['get', label],
183-
visibility: 'visible',
184-
},
185-
};
186-
},
187-
[currentLanguage],
151+
[fillSortKey, adminZeroFillPaint],
188152
);
189153

190154
return (
191155
<BaseMap
192156
// eslint-disable-next-line react/jsx-props-no-spreading
193157
{...baseMapProps}
194-
withoutLabel
195158
baseLayers={(
196159
<>
197160
<MapLayer
@@ -200,35 +163,14 @@ function GlobalMap(props: Props) {
200163
onMouseEnter={handleFeatureMouseEnter}
201164
onMouseLeave={handleFeatureMouseLeave}
202165
/>
203-
<MapLayer
204-
layerKey="admin-0-label"
205-
layerOptions={adminLabelLayerOptions}
206-
/>
207-
<MapLayer
208-
layerKey="admin-0-label-non-independent"
209-
layerOptions={adminLabelLayerOptions}
210-
/>
211-
<MapLayer
212-
layerKey="admin-0-label-priority"
213-
layerOptions={adminLabelLayerOptions}
214-
/>
215-
{/*
216-
<MapLayer
217-
layerKey="admin-0-boundary"
218-
layerOptions={adminZeroLineLayerOptions}
219-
/>
220-
*/}
221-
<MapLayer
222-
layerKey="admin-0-boundary-disputed"
223-
layerOptions={adminZeroLineLayerOptions}
224-
/>
225166
{(onHover || onClick) && (
226167
<MapLayer
227168
layerKey="admin-0-highlight"
228169
layerOptions={adminZeroHighlightLayerOptions}
229170
onClick={onClick ? handleClick : undefined}
230171
/>
231172
)}
173+
{baseLayers}
232174
</>
233175
)}
234176
/>

‎app/src/components/domain/RiskImminentEventMap/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import type {
2929
SymbolLayer,
3030
} from 'mapbox-gl';
3131

32-
import BaseMap from '#components/domain/BaseMap';
32+
import GlobalMap from '#components/domain/GlobalMap';
3333
import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
3434
import { type components } from '#generated/riskTypes';
3535
import useDebouncedValue from '#hooks/useDebouncedValue';
@@ -347,7 +347,7 @@ function RiskImminentEventMap<
347347

348348
return (
349349
<div className={styles.riskImminentEventMap}>
350-
<BaseMap
350+
<GlobalMap
351351
mapOptions={{ bounds }}
352352
>
353353
<MapContainerWithDisclaimer
@@ -469,7 +469,7 @@ function RiskImminentEventMap<
469469
padding={DEFAULT_MAP_PADDING}
470470
/>
471471
)}
472-
</BaseMap>
472+
</GlobalMap>
473473
<Container
474474
heading={sidePanelHeading}
475475
className={styles.sidePanel}

0 commit comments

Comments
 (0)