Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

hotfix map page autozoom on preselection and site height #312

Merged
merged 1 commit into from
Nov 28, 2024
Merged

hotfix map page autozoom on preselection and site height #312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion canopeum_frontend/src/components/MainLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
const NavbarLayout = () => (
<div className='d-flex flex-column vh-100'>
<Navbar />
{/* TODO: Can we do better than hardcode a number relating to the expected header size here? */}

Check warning on line 22 in canopeum_frontend/src/components/MainLayout.tsx

View workflow job for this annotation

GitHub Actions / Lint-Autofixes 

Unexpected 'TODO' comment: 'TODO: Can we do better than hardcode a...'
<div className='' style={{ height: 'calc(100vh - 48px)' }}>
<div className='' style={{ height: 'calc(100vh - 62px)' }}>
<Outlet />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion canopeum_frontend/src/pages/MapPage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
@media screen and (max-width: $large-width) {
#map-sites-list-container,
#map-container {
padding: 0 3rem;
padding: 0 2rem;
}
}

Expand Down
27 changes: 19 additions & 8 deletions canopeum_frontend/src/pages/MapPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ const PIN_FOCUS_ZOOM_LEVEL = 15
const MAP_DISTANCE_ZOOM_MULTIPLIER = 20

/**
* The initial map location if the user doesn't provide location
* The default initial map location if the user doesn't provide location
*/
const initialMapLocation = (sites: SiteMap[]) => {
const defaultMapLocation = (sites: SiteMap[]) => {
// eslint-disable-next-line unicorn/no-array-reduce -- Find the middle point between all sites
const { minLat, maxLat, minLong, maxLong } = sites.reduce(
(previous, current) => {
Expand Down Expand Up @@ -115,21 +115,32 @@ const MapPage = () => {
navigator.geolocation.getCurrentPosition(resolve, resolve)
},
),
]).then(([fetchedSites, position]) =>
'code' in position
]).then(([fetchedSites, position]) => {
// If there's a pre-selected site-id (from URL), zoom on it
const preSelectedSiteId = Number(searchParams.get('site')) || null
const preSelectedSite = fetchedSites.find(site => site.id === preSelectedSiteId)
if (preSelectedSite?.coordinate.ddLatitude && preSelectedSite.coordinate.ddLongitude) {
setMapViewState({
latitude: preSelectedSite.coordinate.ddLatitude,
longitude: preSelectedSite.coordinate.ddLongitude,
zoom: PIN_FOCUS_ZOOM_LEVEL,
})
} else if ('code' in position) {
// If there's an error obtaining the user position, use our default position instead
// Note that getCurrentPosition always error code 2 in http
? setMapViewState(mvs => ({
setMapViewState(mvs => ({
...mvs,
...initialMapLocation(fetchedSites),
...defaultMapLocation(fetchedSites),
}))
} else {
// Otherwise focus on the user's position
: setMapViewState(mvs => ({
setMapViewState(mvs => ({
...mvs,
latitude: position.coords.latitude,
longitude: position.coords.longitude,
}))
), [fetchData])
}
}), [fetchData, searchParams])

return (
<div className='container-fluid p-0 h-100'>
Expand Down
Loading