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

Add mobile and desktop geolocating

Browse source
This commit is contained in:
Vim USDS 2022-07-25 16:20:12 -07:00
parent afc399c80b
commit 2282620bc7
1 changed files with 6 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -57,11 +57,6 @@ export interface IDetailViewInterface {
properties: constants.J40Properties, properties: constants.J40Properties,
}; };
export const GEOLOCATION_STATES = {
OFF: 'OFF',
LOCATING: 'LOCATING',
LOCKED: 'LOCKED',
};
/** /**
* This function will determine the URL for the map tiles. It will read in a string that will designate either * This function will determine the URL for the map tiles. It will read in a string that will designate either
* high or low tiles. It will allow to overide the URL to the pipeline staging tile URL via feature flag. * high or low tiles. It will allow to overide the URL to the pipeline staging tile URL via feature flag.
@ -137,7 +132,7 @@ const J40Map = ({location}: IJ40Interface) => {
const [selectedFeature, setSelectedFeature] = useState<MapboxGeoJSONFeature>(); const [selectedFeature, setSelectedFeature] = useState<MapboxGeoJSONFeature>();
const [detailViewData, setDetailViewData] = useState<IDetailViewInterface>(); const [detailViewData, setDetailViewData] = useState<IDetailViewInterface>();
const [transitionInProgress, setTransitionInProgress] = useState<boolean>(false); const [transitionInProgress, setTransitionInProgress] = useState<boolean>(false);
const [geolocationState, setGeolocationState] = useState(GEOLOCATION_STATES.OFF); const [geolocationInProgress, setGeolocationInProgress] = useState<boolean>(false);
const [isMobileMapState, setIsMobileMapState] = useState<boolean>(false); const [isMobileMapState, setIsMobileMapState] = useState<boolean>(false);
const {width: windowWidth} = useWindowSize(); const {width: windowWidth} = useWindowSize();
@ -330,17 +325,11 @@ const J40Map = ({location}: IJ40Interface) => {
}; };
const onGeolocate = () => { const onGeolocate = () => {
setGeolocationState(GEOLOCATION_STATES.LOCKED); setGeolocationInProgress(false);
}; };
const onClickGeolocate = () => { const onClickGeolocate = () => {
if (geolocationState === GEOLOCATION_STATES.LOCKED) { setGeolocationInProgress(true);
setGeolocationState(GEOLOCATION_STATES.OFF);
}
if (geolocationState === GEOLOCATION_STATES.OFF) {
setGeolocationState(GEOLOCATION_STATES.LOCATING);
}
}; };
const mapBoxBaseLayer = 'tl' in flags ? `mapbox://styles/justice40/cl2qimpi2000014qeb1egpox8` : `mapbox://styles/mapbox/streets-v11`; const mapBoxBaseLayer = 'tl' in flags ? `mapbox://styles/justice40/cl2qimpi2000014qeb1egpox8` : `mapbox://styles/mapbox/streets-v11`;
@ -511,8 +500,7 @@ const J40Map = ({location}: IJ40Interface) => {
<div className={styles.geolocateBox}> <div className={styles.geolocateBox}>
<div <div
className={ className={
geolocationState === GEOLOCATION_STATES.LOCATING ? geolocationInProgress ? styles.geolocateMessage : styles.geolocateMessageHide}>
styles.geolocateMessage : styles.geolocateMessageHide}>
{intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_LOCATING)} {intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_LOCATING)}
</div> </div>
<div className={styles.geolocateIcon}> <div className={styles.geolocateIcon}>
@ -520,7 +508,8 @@ const J40Map = ({location}: IJ40Interface) => {
positionOptions={{enableHighAccuracy: true}} positionOptions={{enableHighAccuracy: true}}
onGeolocate={onGeolocate} onGeolocate={onGeolocate}
onClick={onClickGeolocate} onClick={onClickGeolocate}
trackUserLocation={true} trackUserLocation={windowWidth < constants.USWDS_BREAKPOINTS.MOBILE_LG}
showUserHeading={windowWidth < constants.USWDS_BREAKPOINTS.MOBILE_LG}
/> />
</div> </div>
</div> </div>