publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-07-28 11:51:16 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixes #280 - adds territory focus buttons for Alaska, Hawaii, Lower 48, and Puerto Rico to enable easy zoom to these locations (#315)

Browse source
This commit is contained in:
Nat Hillard 2021-07-09 09:56:18 -04:00 • committed by GitHub
commit 5bade764c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 166 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

85
client/src/components/J40Map.tsx
View file

@ -6,12 +6,12 @@ import maplibregl, {LngLatBoundsLike,
PopupOptions,
Popup,
LngLatLike} from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import mapStyle from '../data/mapStyle';
import ZoomWarning from './zoomWarning';
import PopupContent from './popupContent';
import * as constants from '../data/constants';
import ReactDOM from 'react-dom';
import 'maplibre-gl/dist/maplibre-gl.css';
import * as styles from './J40Map.module.scss';
declare global {
@ -24,13 +24,10 @@ type ClickEvent = maplibregl.MapMouseEvent & maplibregl.EventData;
const J40Map = () => {
const mapContainer = React.useRef<HTMLDivElement>(null);
const map = useRef<Map>() as React.MutableRefObject<Map>;
const mapRef = useRef<Map>() as React.MutableRefObject<Map>;
const [zoom, setZoom] = useState(constants.GLOBAL_MIN_ZOOM);
useEffect(() => {
// Only initialize once
if (map.current && mapContainer.current) return;
const initialMap = new Map({
container: mapContainer.current!,
style: mapStyle,
@ -56,8 +53,8 @@ const J40Map = () => {
initialMap.on('click', handleClick);
initialMap.addControl(new NavigationControl({showCompass: false}), 'top-left');
map.current = initialMap;
});
mapRef.current = initialMap;
}, []);
const handleClick = (e: ClickEvent) => {
const map = e.target;
@ -82,20 +79,78 @@ const J40Map = () => {
};
useEffect(() => {
if (!map.current) return; // wait for map to initialize
map.current.on('move', () => {
setZoom(map.current.getZoom());
mapRef.current.on('move', () => {
setZoom(mapRef.current.getZoom());
});
map.current.on('mouseenter', 'score', () => {
map.current.getCanvas().style.cursor = 'pointer';
mapRef.current.on('mouseenter', 'score', () => {
mapRef.current.getCanvas().style.cursor = 'pointer';
});
map.current.on('mouseleave', 'score', () => {
map.current.getCanvas().style.cursor = '';
mapRef.current.on('mouseleave', 'score', () => {
mapRef.current.getCanvas().style.cursor = '';
});
});
}, [mapRef]);
const goToPlace = (bounds:number[][]) => {
mapRef.current.fitBounds(bounds as LngLatBoundsLike);
};
const onClickTerritoryFocusButton = (event: React.MouseEvent<HTMLButtonElement>) => {
// currentTarget always refers to the element to which the event handler
// has been attached, as opposed to Event.target, which identifies
// the element on which the event occurred and which may be its descendant.
const buttonID = event.target && event.currentTarget.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;
default:
break;
}
};
return (
<div>
<div className={styles.territoryFocusContainer}>
<button
id={'48'}
onClick={onClickTerritoryFocusButton}
className={styles.territoryFocusButton}
aria-label="Zoom to Lower 48" >
48
</button>
<button
id={'AK'}
onClick={onClickTerritoryFocusButton}
className={styles.territoryFocusButton}
aria-label="Zoom to Alaska" >
AK
</button>
<button
id={'HI'}
onClick={onClickTerritoryFocusButton}
className={styles.territoryFocusButton}
aria-label="Zoom to Hawaii" >
HI
</button>
<button
id={'PR'}
onClick={onClickTerritoryFocusButton}
className={styles.territoryFocusButton}
aria-label="Zoom to Puerto Rico" >
PR
</button>
</div>
<div ref={mapContainer} className={styles.mapContainer}/>
<ZoomWarning zoomLevel={zoom} />
</div>