From e1f4df8e510f1531c41f1bc48c27fe8757fd47ac Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Wed, 13 Jul 2022 23:04:48 -0700 Subject: [PATCH] Add Geolocation from behind feature flag --- .../src/components/AreaDetail/AreaDetail.tsx | 2 +- client/src/components/J40Map.module.scss | 85 ++++++++++++++----- client/src/components/J40Map.module.scss.d.ts | 25 ++++-- client/src/components/J40Map.tsx | 57 ++++++++----- .../MapSearch/MapSearch.module.scss | 22 ++--- 5 files changed, 124 insertions(+), 67 deletions(-) diff --git a/client/src/components/AreaDetail/AreaDetail.tsx b/client/src/components/AreaDetail/AreaDetail.tsx index 82bacb05..6230de48 100644 --- a/client/src/components/AreaDetail/AreaDetail.tsx +++ b/client/src/components/AreaDetail/AreaDetail.tsx @@ -267,7 +267,7 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => { // description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.MED_HOME_VAL), // value: properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] ? // properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] : null, - // isDisadvagtaged: false, // TODO + // isDisadvagtaged: false, // }; const proxHaz: indicatorInfo = { diff --git a/client/src/components/J40Map.module.scss b/client/src/components/J40Map.module.scss index 926f2f58..0cc4e3cb 100644 --- a/client/src/components/J40Map.module.scss +++ b/client/src/components/J40Map.module.scss @@ -1,24 +1,71 @@ @use '../styles/design-system.scss' as *; @import "./utils.scss"; -.j40Popup { - width: 375px; -} -.navigationControl { - left: .75em; - top: units(15); - // width: 2.5em; -} +.j40Map { + @include at-media-max("desktop") { + // < 1024 + height: 55vh; + } -.fullscreenControl { - right: 1.25em; - top: 2.5em; -} + .mapHeaderRow{ + @include u-display("flex"); + @include u-padding-left(1.5); + + justify-content: space-between; + + /* + This width is set to prevent this row from + overflowing. Using justify-content: space-between + will allow the geolocation button to be right + ajusted. Without the width property constraint + of 98%, the space-between property forces the + geolocation icon out of the parent container. + + Since the geolocation control is absolutely + positioned, attempts were made to set the + parent to be relative to avoid this, however + it seems that we haven't found a cleaner + solution (yet). + */ + width: 98%; + + + .geolocateBox { + @include u-margin-top(3); + + .geolocateIcon{ + align-self: flex-end; + @include u-margin-right(4); + @include u-margin-top(.5); + + @include at-media-max("tablet") { + // < 640 + @include u-margin-top(3); + } + + @media (max-width: 362px){ + @include u-margin-top(5); + + } + } + } + } + + .navigationControl { + left: .75em; + top: units(15); + } + + //These classes are behind feature flags: + .fullscreenControl { + right: 1.25em; + top: 2.5em; + } + .j40Popup { + width: 375px; + } -.geolocateControl { - right: 1.25em; - top: 5em; } .mapInfoPanel { @@ -26,11 +73,3 @@ overflow-y: auto; height: 90vh; } - -// This will control the height of the map when the device -// width is less than desktop (1024px) -.j40Map { - @include at-media-max("desktop") { - height: 55vh; - } -} \ No newline at end of file diff --git a/client/src/components/J40Map.module.scss.d.ts b/client/src/components/J40Map.module.scss.d.ts index 502b1205..60fea2cc 100644 --- a/client/src/components/J40Map.module.scss.d.ts +++ b/client/src/components/J40Map.module.scss.d.ts @@ -1,14 +1,23 @@ declare namespace J40MapModuleScssNamespace { export interface IJ40MapModuleScss { - j40Popup: string; - territoryFocusButton: string; - territoryFocusContainer: string; - navigationControl: string; - fullscreenControl: string; - geolocateControl: string; - detailView: string; - mapInfoPanel: string; + // main J40 map style j40Map: string; + + // map header row + mapHeaderRow: string; + geolocateBox: string; + geolocateMessage: string; + geolocateMessageHide: string; + geolocateIcon: string; + + // nav control + navigationControl: string; + + // feature flags + fullscreenControl: string; + j40Popup: string; + + mapInfoPanel: string; } } diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index c0f10ba3..e4fba0dd 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -98,7 +98,12 @@ export const featureURLForTilesetName = (tilesetName: string): string => { } }; - +/** + * This the main map component + * + * @param {IJ40Interface} location + * @returns {ReactElement} + */ const J40Map = ({location}: IJ40Interface) => { /** * Initializes the zoom, and the map's center point (lat, lng) via the URL hash #{z}/{lat}/{long} @@ -329,12 +334,12 @@ const J40Map = ({location}: IJ40Interface) => { return ( <> - {/** - * This will render the MapSearch component - * * Note: - * The MapSearch component is no longer wrapped in a div in order to allow this feature + * The MapSearch component is no longer used in this location. It has been moved inside the + * component itself. + * + * It was originally wrapped in a div in order to allow this feature * to be behind a feature flag. This was causing a bug for MapSearch to render * correctly in a production build. Leaving this comment here in case future flags are * needed in this component. @@ -346,9 +351,10 @@ const J40Map = ({location}: IJ40Interface) => { * - npm run clean && npm run build && npm run serve * * to ensure the production build works and that MapSearch and the map (ReactMapGL) render correctly. + * + * Any component declrations outside the component may be susceptible to this bug. */} - - + {/* */} {/** * The ReactMapGL component's props are grouped by the API's documentation. The component also has @@ -393,7 +399,9 @@ const J40Map = ({location}: IJ40Interface) => { data-cy={'reactMapGL'} > {/** - * The low zoom source + * Load all data sources and layers + * + * First the low zoom: */} { /> - {/* This will add the navigation controls of the zoom in and zoom out buttons */} + {/* This is the first overlayed row on the map: Search and Geolocation */} +
+ + +
+
+ +
+
+ +
+ + {/* This is the second row overlayed on the map, it will add the navigation controls + of the zoom in and zoom out buttons */} { windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG && } - {/* This will show shortcut buttons to pan/zoom to US territories */} + {/* This is the third row overlayed on the map, it will show shortcut buttons to + pan/zoom to US territories */} - {/* This places Geolocation behind a feature flag */} - {'gl' in flags ? : ''} - {geolocationInProgress ?
Geolocation in progress...
: ''} - {/* Enable fullscreen pop-up behind a feature flag */} {('fs' in flags && detailViewData && !transitionInProgress) && (