Skip to content

Commit

Permalink
feature/deseng693: Updated map widget. (#2594)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jareth-whitney
jareth-whitney authored Sep 26, 2024
1 parent b95a8c7 commit e594f0d
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 70 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.MD
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## September 25, 2024

- **Feature** New Map Widget front end [🎟️ DESENG-693](https://citz-gdx.atlassian.net/browse/DESENG-693)
- Implemented Figma design
- Fixed issue with map labels that were making them inaccessible

## September 23, 2024

- **Feature** New Hero Banner page in authoring section [🎟️ DESENG-670](https://citz-gdx.atlassian.net/browse/DESENG-670)
Expand Down
17 changes: 13 additions & 4 deletions met-web/src/components/engagement/form/EngagementWidgets/Map/Form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { WidgetLocation } from 'models/widget';

const schema = yup
.object({
markerLabel: yup.string().max(30, 'Markel label cannot exceed 30 characters'),
markerLabel: yup.string().max(30, 'Marker label cannot exceed 30 characters'),
shapefile: yup.mixed(),
geojson: yup.mixed(),
latitude: yup
Expand Down Expand Up @@ -191,8 +191,10 @@ const Form = () => {
handleAddFile={handleAddFile}
savedFileName={uploadName}
savedFile={methods.getValues('shapefile')}
aria-label={'Upload a shape file.'}
/>
</Grid>

<When condition={Boolean(filename)}>
<Grid item xs={12}>
<MetLabel sx={{ marginBottom: '2px' }}>File Uploaded </MetLabel>
Expand Down Expand Up @@ -228,7 +230,7 @@ const Form = () => {
</Grid>
</When>
<Grid item xs={12}>
<MetLabel sx={{ marginBottom: '2px' }}>Latitude</MetLabel>
<MetLabel sx={{ marginBottom: '2px' }}>Latitude (Required)</MetLabel>
<MetDescription>Latitude in British Columbia is between 48.30 and 60.00</MetDescription>
<ControlledTextField
name="latitude"
Expand All @@ -239,10 +241,13 @@ const Form = () => {
}}
fullWidth
size="small"
aria-label={
'Latitude: Latitude in British Columbia is between 48.30 and 60.00. Required field, numeric value with up to two decimal places.'
}
/>
</Grid>
<Grid item xs={12}>
<MetLabel sx={{ marginBottom: '2px' }}>Longitude</MetLabel>
<MetLabel sx={{ marginBottom: '2px' }}>Longitude (Required)</MetLabel>
<MetDescription>
Longitude in British Columbia is between  -139.06 and -114.03
</MetDescription>
Expand All @@ -255,10 +260,13 @@ const Form = () => {
}}
fullWidth
size="small"
aria-label={
'Longitude: Longitude in British Columbia is between -139.06 and -114.03. Required field, numeric value with up to two decimal places.'
}
/>
</Grid>
<Grid item xs={12}>
<MetLabel sx={{ marginBottom: '2px' }}>Marker Label</MetLabel>
<MetLabel sx={{ marginBottom: '2px' }}>Marker Label (Optional)</MetLabel>
<MetDescription>This text will appear next to your marker on the map</MetDescription>
<ControlledTextField
name="markerLabel"
Expand All @@ -269,6 +277,7 @@ const Form = () => {
}}
fullWidth
size="small"
aria-label="Marker label: This text will appear next to your marker on the map. Optional field, maximum 30 characters."
/>
</Grid>
<Grid item xs={12} container direction="row" justifyContent={'flex-end'}>
Expand Down
7 changes: 6 additions & 1 deletion met-web/src/components/engagement/old-view/widgets/Map/ExpandModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,12 @@ export const ExpandModal = ({ open, setOpen, map }: ExpandModalProps) => {
}}
keepMounted={false}
>
<Paper>
<Paper
style={{
borderRadius: '16px',
overflow: 'hidden',
}}
>
<Grid
container
direction="row"
Expand Down
146 changes: 83 additions & 63 deletions met-web/src/components/engagement/old-view/widgets/Map/MapWidget.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect, useState, useRef } from 'react';
import { MetPaper } from 'components/common';
import { Grid, Skeleton, Divider, Box, useMediaQuery, Theme } from '@mui/material';
import { MetHeader3 } from 'components/common';
import { Grid, Skeleton, Box, useMediaQuery, Theme, useTheme } from '@mui/material';
import { Widget } from 'models/widget';
import { useAppDispatch } from 'hooks';
import { openNotification } from 'services/notificationService/notificationSlice';
Expand All @@ -10,10 +10,11 @@ import { WidgetMap } from 'models/widgetMap';
import { ExpandModal } from './ExpandModal';
import { When } from 'react-if';
import { geoJSONDecode, calculateZoomLevel } from 'components/engagement/form/EngagementWidgets/Map/utils';
import { IconButton } from 'components/common/Input';
import { Link } from 'components/common/Navigation';
import { faExpand } from '@fortawesome/pro-solid-svg-icons/faExpand';
import { Header2 } from 'components/common/Typography';
import { colors, Palette } from 'styles/Theme';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

interface MapWidgetProps {
widget: Widget;
Expand All @@ -29,6 +30,9 @@ const MapWidget = ({ widget }: MapWidgetProps) => {
const [mapWidth, setMapWidth] = useState(250);
const [mapHeight, setMapHeight] = useState(250);

const theme = useTheme();
const isDarkMode = 'dark' === theme.palette.mode;

const fetchMap = async () => {
try {
const map = await fetchMaps(widget.id);
Expand Down Expand Up @@ -56,76 +60,92 @@ const MapWidget = ({ widget }: MapWidgetProps) => {

if (isLoading) {
return (
<MetPaper elevation={1} sx={{ padding: '1em' }}>
<Grid container justifyContent="flex-start" spacing={3}>
<Grid item xs={12}>
<Header2>
<Skeleton variant="rectangular" />
</Header2>
</Grid>
<Grid item xs={12}>
<Skeleton variant="rectangular" height="10em" />
</Grid>
<Grid item xs={12}>
<Skeleton variant="rectangular" height="10em" />
</Grid>
<Grid container justifyContent="flex-start" spacing={3}>
<Grid item xs={12}>
<Header2>
<Skeleton variant="rectangular" />
</Header2>
</Grid>
<Grid item xs={12}>
<Skeleton variant="rectangular" height="10em" />
</Grid>
</MetPaper>
<Grid item xs={12}>
<Skeleton variant="rectangular" height="10em" />
</Grid>
</Grid>
);
}

if (!map) {
return null;
}

// Define the styles
const metHeader3Styles = {
fontWeight: 'lighter',
fontSize: '1.5rem',
marginBottom: '2.5rem',
marginTop: '4rem',
color: isDarkMode ? colors.surface.white : Palette.text.primary,
};
const outerContainerStyles = {
position: 'relative',
width: '100%',
paddingTop: '66.67%' /* 3:2 aspect ratio (height / width * 100) */,
};
const innerContainerStyles = {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
borderRadius: '16px',
overflow: 'hidden',
};
const linkStyles = {
color: isDarkMode ? colors.surface.white : Palette.text.primary,
textDecorationColor: isDarkMode ? colors.surface.white : Palette.text.primary,
cursor: 'pointer',
};

return (
<>
<MetPaper elevation={1} sx={{ paddingTop: '0.5em', padding: '1em', minHeight: '12em' }}>
<Grid container justifyContent={{ xs: 'center' }} alignItems="center" rowSpacing={2}>
<Grid
item
container
justifyContent={{ xs: 'center', md: 'flex-start' }}
flexDirection={'column'}
xs={12}
paddingBottom={0}
>
<Header2>{widget.title}</Header2>
<Divider sx={{ borderWidth: 1, marginTop: 0.5 }} />
</Grid>
<Grid item xs={12}>
<Box
ref={mapContainerRef}
sx={{
width: '100%',
height: '370px',
}}
>
<MetMap
geojson={geoJSONDecode(map.geojson)}
longitude={map.longitude}
latitude={map.latitude}
markerLabel={map.marker_label}
zoom={calculateZoomLevel(mapWidth, mapHeight, geoJSONDecode(map.geojson))}
/>
</Box>
</Grid>
<When condition={isLargeScreen}>
<Grid container item xs={12} alignItems={'center'} justifyContent={'flex-start'}>
<Grid item paddingRight={'5px'}>
<IconButton icon={faExpand} onClick={() => setOpen(true)} backgroundColor="none" />
</Grid>
<Grid item>
<Link onClick={() => setOpen(true)} tabIndex={0} onKeyPress={() => setOpen(true)}>
View Expanded Map
</Link>
</Grid>
</Grid>
<ExpandModal map={map} open={open} setOpen={setOpen} />
</When>
<Grid container justifyContent={{ xs: 'center' }} alignItems="center" rowSpacing={2}>
<Grid
item
container
justifyContent={{ xs: 'center', md: 'flex-start' }}
flexDirection={'column'}
xs={12}
paddingBottom={0}
>
<MetHeader3 style={metHeader3Styles}>{widget.title}</MetHeader3>
</Grid>
<Grid item xs={12}>
<Box sx={outerContainerStyles}>
<Box sx={innerContainerStyles}>
<MetMap
geojson={geoJSONDecode(map.geojson)}
longitude={map.longitude}
latitude={map.latitude}
markerLabel={map.marker_label}
zoom={calculateZoomLevel(mapWidth, mapHeight, geoJSONDecode(map.geojson))}
/>
</Box>
</Box>
</Grid>
<When condition={isLargeScreen}>
<Grid container item xs={12} alignItems={'center'} justifyContent={'flex-start'}>
<Link onClick={() => setOpen(true)} sx={linkStyles} tabIndex={0} onKeyDown={() => setOpen(true)}>
<FontAwesomeIcon
icon={faExpand}
style={{ color: isDarkMode ? colors.surface.white : Palette.text.primary }}
/>
<span style={{ paddingLeft: '0.5rem' }}>View Expanded Map</span>
</Link>
</Grid>
</MetPaper>
</>
<ExpandModal map={map} open={open} setOpen={setOpen} />
</When>
</Grid>
);
};

Expand Down
6 changes: 4 additions & 2 deletions met-web/src/components/map/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import { MetSmallTextOld } from 'components/common';
import { Stack } from '@mui/material';
import { When } from 'react-if';
import { AnyLayer } from 'mapbox-gl';
import { Palette } from 'styles/Theme';
import { colors, Palette } from 'styles/Theme';

interface MapProps {
latitude: number;
longitude: number;
Expand Down Expand Up @@ -74,7 +75,8 @@ const MetMap = ({ geojson, latitude, longitude, markerLabel, zoom }: MapProps) =
<When condition={Boolean(markerLabel)}>
<MetSmallTextOld
bold
bgcolor={'var(--bcds-surface-background-white)'}
bgcolor={'#12508F'}
style={{ color: colors.surface.white, padding: '1px 4px' }}
borderRadius="10px"
padding="0 2px 0 2px"
>
Expand Down

0 comments on commit e594f0d

Please sign in to comment.