Skip to content

Commit 1d8da53

Browse files
BaalmartBaalmart
authored
Merge pull request #1890 from airqo-platform/ft-platform-map
Addressing QA Feedback on AirQo Map
2 parents f4202fe + cb56fd2 commit 1d8da53

File tree

8 files changed

+78
-52
lines changed

8 files changed

+78
-52
lines changed

‎platform/src/common/components/Map/AirQoMap.jsx

+35-9
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const mapStyles = [
3333
{ url: 'mapbox://styles/mapbox/satellite-v9', name: 'Satellite', image: SatelliteMode },
3434
];
3535

36-
const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant }) => {
36+
const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant, resizeMap }) => {
3737
const dispatch = useDispatch();
3838
const mapContainerRef = useRef(null);
3939
const mapRef = useRef(null);
@@ -48,6 +48,7 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
4848
const [toastMessage, setToastMessage] = useState({
4949
message: '',
5050
type: '',
51+
bgColor: '',
5152
});
5253
const [NodeType, setNodeType] = useState('Emoji');
5354
const [selectedSite, setSelectedSite] = useState(null);
@@ -60,10 +61,13 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
6061
/**
6162
* Clear data on unmount
6263
* @sideEffect
63-
* - Clear data
64+
* - Clear data on unmount when lat, lng and zm are not present
65+
* @returns {void}
6466
*/
6567
useEffect(() => {
66-
dispatch(clearData());
68+
if (!lat && !lng && !zm) {
69+
dispatch(clearData());
70+
}
6771
}, []);
6872

6973
/**
@@ -129,6 +133,13 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
129133

130134
/**
131135
* Initialize the map
136+
* @sideEffect
137+
* - Initialize the map
138+
* - Add map controls
139+
* - Load data
140+
* - Update clusters
141+
* - Fetch location boundaries
142+
* @returns {void}
132143
*/
133144
useEffect(() => {
134145
const initializeMap = async () => {
@@ -263,6 +274,12 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
263274
const marker = new mapboxgl.Marker(el)
264275
.setLngLat(feature.geometry.coordinates)
265276
.addTo(map);
277+
278+
// Add click event to zoom in when a user clicks on a cluster
279+
el.addEventListener('click', () => {
280+
map.flyTo({ center: feature.geometry.coordinates, zoom: zoom + 2 });
281+
});
282+
266283
markers.push(marker);
267284
}
268285
});
@@ -287,6 +304,17 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
287304
};
288305
}, [mapStyle, mapboxApiAccessToken, refresh, pollutant, NodeType]);
289306

307+
/**
308+
* Resize the map
309+
* @sideEffect
310+
* - Resizes the map when the window is resized and side bar is closed
311+
*/
312+
useEffect(() => {
313+
if (!resizeMap) {
314+
mapRef.current.resize();
315+
}
316+
}, [!resizeMap]);
317+
290318
/**
291319
* Fetch location boundaries
292320
*/
@@ -399,6 +427,7 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
399427
setToastMessage({
400428
message: 'Location URL copied to clipboard',
401429
type: 'success',
430+
bgColor: 'bg-blue-600',
402431
});
403432
} catch (error) {
404433
setToastMessage({
@@ -409,17 +438,14 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
409438
};
410439

411440
return (
412-
<div className='relative w-auto h-auto'>
441+
<div className='relative w-full h-full'>
413442
{/* Map */}
414443
<div ref={mapContainerRef} className={customStyle} />
415444

416445
{/* Loader */}
417446
{refresh ||
418447
(loading && (
419-
<div
420-
className={`absolute inset-0 flex items-center justify-center z-40 ${
421-
showSideBar ? 'ml-96' : ''
422-
}`}>
448+
<div className={`absolute inset-0 flex items-center justify-center z-40`}>
423449
<div className='bg-white w-[70px] h-[70px] flex justify-center items-center rounded-md shadow-md'>
424450
<span className='ml-2'>
425451
<Loader width={32} height={32} />
@@ -478,7 +504,7 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
478504
timeout={3000}
479505
dataTestId='map-toast'
480506
size='lg'
481-
bgColor='bg-blue-600'
507+
bgColor={toastMessage.bgColor}
482508
position='bottom'
483509
/>
484510
)}

‎platform/src/common/components/Map/components/LayerModal.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,14 @@ const Option = ({ isSelected, children, onSelect, image, disabled }) => (
3535
className={`w-14 h-14 relative rounded-lg ${
3636
isSelected ? 'border-2 border-blue-500 ring-4 ring-light-blue-100' : ''
3737
} border-2`}>
38-
<Image src={image} alt={children} layout='fill' objectFit='cover' className='rounded-lg' />
38+
<Image
39+
src={image}
40+
alt={children}
41+
layout='fill'
42+
objectFit='cover'
43+
className='rounded-lg'
44+
loading='eager'
45+
/>
3946
</div>
4047
<span>{children}</span>
4148
</button>
@@ -84,7 +91,7 @@ const LayerModal = ({
8491
if (!isOpen) return null;
8592

8693
return (
87-
<div className='fixed inset-0 overflow-y-auto z-50' style={{ zIndex: 777 }}>
94+
<div className='fixed inset-0 overflow-y-auto z-30'>
8895
<div className='flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0'>
8996
<div className='fixed inset-0 transition-opacity' aria-hidden='true'>
9097
<div className='absolute inset-0 bg-[#4e4e4e3b]'></div>

‎platform/src/common/components/Map/components/MapControls.js

+1
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@ export class CustomGeolocateControl {
145145
this.setToastMessage({
146146
message: 'Location tracked successfully.',
147147
type: 'success',
148+
bgColor: 'bg-blue-600',
148149
});
149150

150151
this.map.flyTo({

‎platform/src/common/components/Map/components/Sidebar.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -180,10 +180,9 @@ const Sidebar = ({ siteDetails, selectedSites, isAdmin, showSideBar, setShowSide
180180

181181
return (
182182
<div
183-
className='absolute left-0 top-0 w-full h-full md:max-w-[400px] bg-white shadow-lg shadow-right space-y-4 z-50 overflow-y-auto map-scrollbar'
184-
style={{
185-
zIndex: 1000,
186-
}}>
183+
className={`w-auto h-full md:max-w-[400px] bg-white shadow-lg shadow-right space-y-4 z-50 overflow-y-auto map-scrollbar z-50 ${
184+
window.innerWidth < 768 ? 'absolute left-0 top-0' : ''
185+
}`}>
187186
<div className={!isFocused ? 'space-y-4' : 'hidden'}>
188187
<div className='px-4 pt-4'>
189188
<div className='w-full flex justify-between items-center'>

‎platform/src/common/components/Toast/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Toast = ({ message, type, timeout, dataTestId, size, clearData, bgColor, p
2727
return visible ? (
2828
<div
2929
className={`absolute ${
30-
position === 'top' ? 'top-5' : 'bottom-5'
30+
!position ? 'top-5' : 'bottom-5'
3131
} left-0 right-0 z-50 flex justify-center items-center mx-4`}
3232
data-testid={dataTestId}>
3333
<div className={containerStyles}>

‎platform/src/lib/store/services/map/MapSlice.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ const initialState = {
66
city: '',
77
},
88
center: {
9-
latitude: 2.4672,
10-
longitude: 9.8977,
9+
latitude: 2.5768,
10+
longitude: 25.1601,
1111
},
12-
zoom: 3.0141218806815315,
12+
zoom: 3.01,
1313
};
1414

1515
export const mapSlice = createSlice({

‎platform/src/pages/Home/index.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ const Home = () => {
188188
</Button>
189189
<a
190190
onClick={handleModel}
191-
className='text-blue-600 text-sm font-normal mt-2 cursor-pointer'>
191+
className='text-blue-600 text-sm font-normal mt-2 cursor-pointer hidden'>
192192
Show me how
193193
</a>
194194
</div>
@@ -200,7 +200,7 @@ const Home = () => {
200200
}}>
201201
<div
202202
onClick={handleModel}
203-
className='absolute z-50 inset-0 flex items-center justify-center cursor-pointer'>
203+
className='absolute z-50 inset-0 flex items-center justify-center cursor-pointer hidden'>
204204
<PlayIcon />
205205
</div>
206206
<Image src={AnalyticsImage} alt='Analytics Image' width={600} height={350} />

‎platform/src/pages/map/index.jsx

+24-31
Original file line numberDiff line numberDiff line change
@@ -61,44 +61,37 @@ const index = () => {
6161

6262
return (
6363
<MapLayout noTopNav={false}>
64-
<div className='relative'>
65-
<>
66-
{showSideBar && (
67-
<Sidebar
68-
siteDetails={siteDetails}
69-
selectedSites={selectedSites}
70-
isAdmin={isAdmin}
71-
showSideBar={showSideBar}
72-
setShowSideBar={setShowSideBar}
73-
/>
74-
)}
75-
<div className={`${showSideBar ? 'hidden' : ''} md:block`}>
76-
<div
77-
className={`absolute bottom-2 ${
78-
showSideBar ? 'left-[calc(280px+15px)] md:left-[calc(400px+15px)]' : 'left-[15px]'
79-
} `}
80-
style={{ zIndex: 900 }}>
81-
<AirQualityLegend pollutant={pollutant} />
82-
</div>
83-
<div
84-
className={`absolute top-4 ${
85-
showSideBar ? 'left-[calc(280px+15px)] md:left-[calc(400px+15px)]' : 'left-[15px]'
86-
} z-50`}>
87-
<div className='flex flex-col space-y-4'>
88-
<button
89-
className='inline-flex items-center justify-center w-[50px] h-[50px] mr-2 text-white rounded-full bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-md'
90-
onClick={() => setShowSideBar(!showSideBar)}>
91-
<MenuIcon />
92-
</button>
93-
</div>
64+
<div className='relative flex w-full h-full'>
65+
{showSideBar && (
66+
<Sidebar
67+
siteDetails={siteDetails}
68+
selectedSites={selectedSites}
69+
isAdmin={isAdmin}
70+
showSideBar={showSideBar}
71+
setShowSideBar={setShowSideBar}
72+
/>
73+
)}
74+
<div className={`${showSideBar ? 'hidden' : ''} relative left-4 z-50 md:block`}>
75+
<div className={`absolute bottom-2`} style={{ zIndex: 900 }}>
76+
<AirQualityLegend pollutant={pollutant} />
77+
</div>
78+
<div className={`absolute top-4`}>
79+
<div className='flex flex-col space-y-4'>
80+
<button
81+
className={`inline-flex items-center justify-center w-[50px] h-[50px] mr-2 text-white rounded-full bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-md lg:hidden`}
82+
onClick={() => setShowSideBar(!showSideBar)}>
83+
<MenuIcon />
84+
</button>
9485
</div>
9586
</div>
96-
</>
87+
</div>
88+
9789
<AirQoMap
9890
showSideBar={showSideBar}
9991
mapboxApiAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
10092
customStyle='flex-grow h-screen w-full relative bg-[#e6e4e0]'
10193
pollutant={pollutant}
94+
resizeMap={showSideBar}
10295
/>
10396
</div>
10497
</MapLayout>

0 commit comments

Comments
 (0)