WIP

src/components/MapPopup/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "common",
+    "strings": {
+        "messagePopupClose": "Close"
+    }
+}

src/components/MapPopup/index.tsx

@@ -0,0 +1,77 @@
+import { CloseLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    ContainerProps,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { _cs } from '@togglecorp/fujs';
+import { MapPopup as BasicMapPopup } from '@togglecorp/re-map';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+const popupOptions: mapboxgl.PopupOptions = {
+    closeButton: false,
+    closeOnClick: false,
+    closeOnMove: false,
+    offset: 8,
+    className: styles.mapPopup,
+    maxWidth: 'unset',
+};
+
+interface Props extends ContainerProps {
+    coordinates: mapboxgl.LngLatLike;
+    children: React.ReactNode;
+    onCloseButtonClick: () => void;
+}
+
+function MapPopup(props: Props) {
+    const {
+        children,
+        coordinates,
+        onCloseButtonClick,
+        actions,
+        childrenContainerClassName,
+        ...containerProps
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    return (
+        <BasicMapPopup
+            coordinates={coordinates}
+            popupOptions={popupOptions}
+            hidden={false}
+            trackPointer={false}
+        >
+            <Container
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...containerProps}
+                className={styles.container}
+                withoutWrapInHeading
+                childrenContainerClassName={_cs(styles.content, childrenContainerClassName)}
+                withHeaderBorder
+                withInternalPadding
+                actions={(
+                    <>
+                        {actions}
+                        <Button
+                            className={styles.closeButton}
+                            name={undefined}
+                            variant="tertiary"
+                            onClick={onCloseButtonClick}
+                            title={strings.messagePopupClose}
+                        >
+                            <CloseLineIcon />
+                        </Button>
+                    </>
+                )}
+            >
+                {children}
+            </Container>
+        </BasicMapPopup>
+    );
+}
+
+export default MapPopup;

src/components/MapPopup/styles.module.css

@@ -0,0 +1,49 @@
+.map-popup {
+    display: flex;
+    padding: 0;
+    width: 20rem;
+    min-height: 10rem;
+    max-height: 20rem;
+    overflow: auto;
+    font-family: var(--go-ui-font-family-sans-serif);
+    font-size: var(--go-ui-font-size-md);
+
+    :global {
+        .mapboxgl-tip {
+            flex-shrink: 0;
+        }
+
+        .mapboxgl-popup-content {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            padding: 0;
+            overflow: auto;
+
+            >div {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                padding: 0;
+                overflow: auto;
+            }
+        }
+    }
+
+    .container {
+        flex-grow: 1;
+        border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+
+        .close-button {
+            font-size: var(--go-ui-height-icon-multiplier);
+        }
+
+        .content {
+            overflow: auto;
+        }
+    }
+}
+

src/views/AlertMap/utils.ts

@@ -0,0 +1,83 @@
+import type {
+    CircleLayer,
+    CirclePaint,
+} from 'mapbox-gl';
+
+// FIXME: these must be a constant defined somewhere else
+export const APPEAL_TYPE_DREF = 0;
+export const APPEAL_TYPE_EMERGENCY = 1;
+// const APPEAL_TYPE_INTERNATIONAL = 2; // TODO: we are not showing this?
+export const APPEAL_TYPE_EAP = 3;
+export const APPEAL_TYPE_MULTIPLE = -1;
+
+
+const basePointPaint: CirclePaint = {
+    'circle-radius': 5,
+    'circle-opacity': 0.8,
+};
+
+export const basePointLayerOptions: Omit<CircleLayer, 'id'> = {
+    type: 'circle',
+    paint: basePointPaint,
+};
+
+const baseOuterCirclePaint: CirclePaint = {
+    'circle-opacity': 0.4,
+};
+
+const outerCirclePaintForFinancialRequirements: CirclePaint = {
+    ...baseOuterCirclePaint,
+    'circle-radius': [
+        'interpolate',
+        ['linear', 1],
+        ['get', 'financialRequirements'],
+        1000,
+        7,
+        10000,
+        9,
+        100000,
+        11,
+        1000000,
+        15,
+    ],
+};
+
+const outerCirclePaintForPeopleTargeted: CirclePaint = {
+    ...baseOuterCirclePaint,
+    'circle-radius': [
+        'interpolate',
+        ['linear', 1],
+        ['get', 'peopleTargeted'],
+        1000,
+        7,
+        10000,
+        9,
+        100000,
+        11,
+        1000000,
+        15,
+    ],
+};
+
+export const outerCircleLayerOptionsForFinancialRequirements: Omit<CircleLayer, 'id'> = {
+    type: 'circle',
+    paint: outerCirclePaintForFinancialRequirements,
+};
+
+export const outerCircleLayerOptionsForPeopleTargeted: Omit<CircleLayer, 'id'> = {
+    type: 'circle',
+    paint: outerCirclePaintForPeopleTargeted,
+};
+
+export interface ScaleOption {
+    label: string;
+    value: 'financialRequirements' | 'peopleTargeted';
+}
+
+export function optionKeySelector(option: ScaleOption) {
+    return option.value;
+}
+
+export function optionLabelSelector(option: ScaleOption) {
+    return option.label;
+}