mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-30 07:31:17 -07:00
356e16950f* Refactor map click event architecture - combine territory map clickHandlers - centers AS on the map * Center US on the map - make the east and west coast both viewable - make clicking on the 48, show the same zoom/lat/long as initial map - centers Hawaii on map * Update link to map performance * Explicitly show links as the links return a 403 * Removes link and spells link out
91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
import {useIntl} from 'gatsby-plugin-intl';
|
|
import React from 'react';
|
|
import {MapEvent} from 'react-map-gl';
|
|
|
|
import * as styles from './territoryFocusControl.module.scss';
|
|
import * as EXPLORE_COPY from '../data/copy/explore';
|
|
|
|
interface ITerritoryFocusControl {
|
|
onClick(event: MapEvent | React.MouseEvent<HTMLButtonElement>):void;
|
|
}
|
|
|
|
|
|
const TerritoryFocusControl = ({onClick}: ITerritoryFocusControl) => {
|
|
const intl = useIntl();
|
|
|
|
const territories = [
|
|
{
|
|
short: intl.formatMessage(EXPLORE_COPY.MAP.LOWER48_SHORT),
|
|
long: intl.formatMessage(EXPLORE_COPY.MAP.LOWER48_LONG),
|
|
},
|
|
{
|
|
short: intl.formatMessage(EXPLORE_COPY.MAP.ALASKA_SHORT),
|
|
long: intl.formatMessage(EXPLORE_COPY.MAP.ALASKA_LONG),
|
|
},
|
|
{
|
|
short: intl.formatMessage(EXPLORE_COPY.MAP.HAWAII_SHORT),
|
|
long: intl.formatMessage(EXPLORE_COPY.MAP.HAWAII_LONG),
|
|
},
|
|
{
|
|
short: intl.formatMessage(EXPLORE_COPY.MAP.PR_SHORT),
|
|
long: intl.formatMessage(EXPLORE_COPY.MAP.PR_LONG),
|
|
},
|
|
// {
|
|
// short: intl.formatMessage(EXPLORE_COPY.MAP.GU_SHORT),
|
|
// long: intl.formatMessage(EXPLORE_COPY.MAP.GU_LONG),
|
|
// },
|
|
{
|
|
short: intl.formatMessage(EXPLORE_COPY.MAP.AS_SHORT),
|
|
long: intl.formatMessage(EXPLORE_COPY.MAP.AS_LONG),
|
|
},
|
|
{
|
|
short: intl.formatMessage(EXPLORE_COPY.MAP.MP_SHORT),
|
|
long: intl.formatMessage(EXPLORE_COPY.MAP.MP_LONG),
|
|
},
|
|
// {
|
|
// short: intl.formatMessage(EXPLORE_COPY.MAP.VI_SHORT),
|
|
// long: intl.formatMessage(EXPLORE_COPY.MAP.VI_LONG),
|
|
// },
|
|
];
|
|
// the offset for this array should map the territories variable
|
|
const territoriesIconClassName = [
|
|
'mapboxgl-ctrl-zoom-to-48',
|
|
'mapboxgl-ctrl-zoom-to-ak',
|
|
'mapboxgl-ctrl-zoom-to-hi',
|
|
'mapboxgl-ctrl-zoom-to-pr',
|
|
// 'mapboxgl-ctrl-zoom-to-gu',
|
|
'mapboxgl-ctrl-zoom-to-as',
|
|
'mapboxgl-ctrl-zoom-to-mp',
|
|
// 'mapboxgl-ctrl-zoom-to-vi',
|
|
];
|
|
|
|
return (
|
|
<div className={styles.territoryFocusContainer}>
|
|
<div className={'mapboxgl-ctrl mapboxgl-ctrl-group'}>
|
|
{territories.map((territory, index) =>
|
|
<button
|
|
id={territory.short}
|
|
key={territory.short}
|
|
// onClickCapture={(e) => onClickTerritoryFocusButton(e)}
|
|
onClickCapture={(e) => onClick(e)}
|
|
className={'mapboxgl-ctrl-icon ' + territoriesIconClassName[index]}
|
|
aria-label={intl.formatMessage(
|
|
{
|
|
id: 'map.territoryFocus.focusOn',
|
|
defaultMessage: 'Focus on {territory}',
|
|
description: 'Focus on the bounds of a specific territory',
|
|
},
|
|
{
|
|
territory: territory.long,
|
|
},
|
|
)}>
|
|
<span className={'mapboxgl-ctrl-icon'} aria-hidden={true}/>
|
|
</button>,
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TerritoryFocusControl;
|
|
|