) => {
+ // Stop all propagation / bubbling / capturing
+ event.preventDefault();
+ event.stopPropagation();
+
+ getCurrentMapBoundingBox();
+
+ // Check if the click is for territories. Given the territories component's design, it can be
+ // guaranteed that each territory control will have an id. We use this ID to determine
+ // if the click is coming from a territory control
+ if (event.target && (event.target as HTMLElement).id) {
+ 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;
+ }
+ } else {
+ // This else clause will fire when the ID is null or empty. This is the case where the map is clicked
+ const feature = event.features && event.features[0];
+ console.log(feature);
+ if (feature) {
+ const [minLng, minLat, maxLng, maxLat] = bbox(feature);
+ const newViewPort = new WebMercatorViewport({height: viewport.height!, width: viewport.width!});
+ const {longitude, latitude, zoom} = newViewPort.fitBounds(
+ [
+ [minLng, minLat],
+ [maxLng, maxLat],
+ ],
+ {
+ padding: 40,
+ },
+ );
+ if (feature.id !== selectedFeatureId) {
+ setSelectedFeature(feature);
+ } else {
+ setSelectedFeature(undefined);
+ }
+ const popupInfo = {
+ longitude: longitude,
+ latitude: latitude,
+ zoom: zoom,
+ properties: feature.properties,
+ };
+ goToPlace([
+ [minLng, minLat],
+ [maxLng, maxLat],
+ ]);
+ setDetailViewData(popupInfo);
}
- const popupInfo = {
- longitude: longitude,
- latitude: latitude,
- zoom: zoom,
- properties: feature.properties,
- };
- goToPlace([
- [minLng, minLat],
- [maxLng, maxLat],
- ]);
- setDetailViewData(popupInfo);
}
};
@@ -251,7 +328,7 @@ const J40Map = ({location}: IJ40Interface) => {
onClick={onClickGeolocate}
/> : ''}
{geolocationInProgress ? Geolocation in progress...
: ''}
-
+
{'fs' in flags ? :'' }
diff --git a/client/src/components/territoryFocusControl.tsx b/client/src/components/territoryFocusControl.tsx
index fb7e21f1..67a842d7 100644
--- a/client/src/components/territoryFocusControl.tsx
+++ b/client/src/components/territoryFocusControl.tsx
@@ -1,54 +1,18 @@
import {useIntl} from 'gatsby-plugin-intl';
import React from 'react';
-import {LngLatBoundsLike} from 'mapbox-gl';
+import {MapEvent} from 'react-map-gl';
import * as styles from './territoryFocusControl.module.scss';
import * as EXPLORE_COPY from '../data/copy/explore';
-import * as constants from '../data/constants';
interface ITerritoryFocusControl {
- goToPlace(bounds: LngLatBoundsLike): void;
+ onClick(event: MapEvent | React.MouseEvent):void;
}
-const TerritoryFocusControl = ({goToPlace}: ITerritoryFocusControl) => {
+const TerritoryFocusControl = ({onClick}: ITerritoryFocusControl) => {
const intl = useIntl();
- const onClickTerritoryFocusButton = (event: React.MouseEvent) => {
- 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 = [
{
short: intl.formatMessage(EXPLORE_COPY.MAP.LOWER48_SHORT),
@@ -102,7 +66,8 @@ const TerritoryFocusControl = ({goToPlace}: ITerritoryFocusControl) => {