publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-06 09:04:19 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add 4 additional territory buttons (#956)

Browse source 
* Add 4 additional territory buttons

* Fix bug where territories fires multiple times

- move territory handler from J40Map to component

* Update SVGs for all territory buttons
This commit is contained in:
Vim 2021-12-06 22:58:04 -05:00 • committed by GitHub
commit df564658a5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 274 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

72
client/src/components/territoryFocusControl.tsx
View file

@ -1,21 +1,53 @@
import {useIntl} from 'gatsby-plugin-intl';
import React, {MouseEventHandler} from 'react';
import {_useMapControl as useMapControl} from 'react-map-gl';
import React from 'react';
import {LngLatBoundsLike} from 'mapbox-gl';
import * as styles from './territoryFocusControl.module.scss';
import * as EXPLORE_COPY from '../data/copy/explore';
import * as constants from '../data/constants';
interface ITerritoryFocusControl {
onClickTerritoryFocusButton: MouseEventHandler<HTMLButtonElement>;
goToPlace(bounds: LngLatBoundsLike): void;
}
const TerritoryFocusControl = ({onClickTerritoryFocusButton}: ITerritoryFocusControl) => {
const TerritoryFocusControl = ({goToPlace}: ITerritoryFocusControl) => {
const intl = useIntl();
const {containerRef} = useMapControl({
// @ts-ignore // Types have not caught up yet, see https://github.com/visgl/react-map-gl/issues/1492
onClick: onClickTerritoryFocusButton,
});
const onClickTerritoryFocusButton = (event: React.MouseEvent<HTMLButtonElement>) => {
event.stopPropagation();
const buttonID = event.target && (event.target as HTMLElement).id;
switch (buttonID) {
case '48':
goToPlace(constants.LOWER_48_BOUNDS);
break;
case 'AK':
goToPlace(constants.ALASKA_BOUNDS);
break;
case 'HI':
goToPlace(constants.HAWAII_BOUNDS);
break;
case 'PR':
goToPlace(constants.PUERTO_RICO_BOUNDS);
break;
case 'GU':
goToPlace(constants.GUAM_BOUNDS);
break;
case 'AS':
goToPlace(constants.AMERICAN_SAMOA_BOUNDS);
break;
case 'MP':
goToPlace(constants.MARIANA_ISLAND_BOUNDS);
break;
case 'VI':
goToPlace(constants.US_VIRGIN_ISLANDS_BOUNDS);
break;
default:
break;
}
};
const territories = [
{
@ -34,6 +66,22 @@ const TerritoryFocusControl = ({onClickTerritoryFocusButton}: ITerritoryFocusCon
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 = [
@ -41,16 +89,20 @@ const TerritoryFocusControl = ({onClickTerritoryFocusButton}: ITerritoryFocusCon
'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 ref={containerRef} className={styles.territoryFocusContainer}>
<div className={styles.territoryFocusContainer}>
<div className={'mapboxgl-ctrl mapboxgl-ctrl-group'}>
{territories.map((territory, index) =>
<button
id={territory.short}
key={territory.short}
onClick={onClickTerritoryFocusButton}
onClick={(e) => onClickTerritoryFocusButton(e)}
className={'mapboxgl-ctrl-icon ' + territoriesIconClassName[index]}
aria-label={intl.formatMessage(
{