AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 20:13:49 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Add user location marker to brewery map, Add beer sec. for brewery posts

Browse Source
This commit is contained in:
Aaron William Po
2023-05-01 23:09:50 -04:00
parent f3d471be4c
commit d20ab0fd1f
10 changed files with 363 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/breweries/map.tsx
View File

@@ -13,6 +13,7 @@ import DBClient from '@/prisma/DBClient';
import LocationMarker from '@/components/ui/LocationMarker';
import Link from 'next/link';
import Head from 'next/head';
import useGeolocation from '@/hooks/useGeolocation';
type MapStyles = Record<'light' | 'dark', `mapbox://styles/mapbox/${string}`>;
@@ -61,7 +62,7 @@ const BreweryMapPage: NextPage<BreweryMapPageProps> = ({ breweries }) => {
setPopupInfo(brewery);
}}
>
<LocationMarker />
<LocationMarker size="md" color="blue" />
</Marker>
);
})}
@@ -69,6 +70,19 @@ const BreweryMapPage: NextPage<BreweryMapPageProps> = ({ breweries }) => {
),
[breweries],
);
const { coords, error } = useGeolocation();
const userLocationPin = useMemo(
() =>
coords && !error ? (
<Marker latitude={coords.latitude} longitude={coords.longitude}>
<LocationMarker size="lg" color="red" />
</Marker>
) : null,
[coords, error],
);
return (
<>
<Head>
@@ -90,6 +104,7 @@ const BreweryMapPage: NextPage<BreweryMapPageProps> = ({ breweries }) => {
<NavigationControl position="top-left" />
<ScaleControl />
{pins}
{userLocationPin}
{popupInfo && (
<Popup
anchor="bottom"