generated from taylorbryant/gatsby-starter-tailwind
-
-
Notifications
You must be signed in to change notification settings - Fork 131
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(maps): switch to self-hosted tiles (#1105)
* refactor(map): migrate to our self-hosted map tiles * feat(maps): use our own self-hosted tiles * refactor(map): improve map popup and drawer
- Loading branch information
Showing
15 changed files
with
361 additions
and
203 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| 'use client' | ||
| import { useEffect, useState } from 'react' | ||
| import { GlobalMap } from '@/components/maps/GlobalMap' | ||
|
|
||
| export const FullScreenMap: React.FC = () => { | ||
| const [initialCenter, setInitialCenter] = useState<[number, number] | undefined>(undefined) | ||
|
|
||
| useEffect(() => { | ||
| getVisitorLocation().then((visitorLocation) => { | ||
| if (visitorLocation != null) { | ||
| setInitialCenter([visitorLocation.longitude, visitorLocation.latitude]) | ||
| } | ||
| }).catch(() => { | ||
| console.log('Unable to determine user\'s location') | ||
| }) | ||
| }, []) | ||
|
|
||
| return ( | ||
| <GlobalMap | ||
| showFullscreenControl={false} | ||
| initialCenter={initialCenter} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| const getVisitorLocation = async (): Promise<{ longitude: number, latitude: number } | undefined> => { | ||
| try { | ||
| const res = await fetch('/api/geo') | ||
| return await res.json() | ||
| } catch (err) { | ||
| console.log('ERROR', err) | ||
| return undefined | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,13 @@ | ||
| import { GlobalMap } from '@/components/maps/GlobalMap' | ||
| import { ProfileMenu } from '../components/ProfileMenu' | ||
| import { FullScreenMap } from '../components/FullScreenMap' | ||
|
|
||
| export const dynamic = 'force-dynamic' | ||
|
|
||
| export default async function MapPage (): Promise<any> { | ||
| return ( | ||
| <div className='w-full h-full'> | ||
| <ProfileMenu /> | ||
| <GlobalMap | ||
| showFullscreenControl={false} | ||
| /> | ||
| <FullScreenMap /> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,72 @@ | ||
| import * as Popover from '@radix-ui/react-popover' | ||
|
|
||
| import { MapAreaFeatureProperties } from './AreaMap' | ||
| import { MapAreaFeatureProperties, SimpleClimbType } from './GlobalMap' | ||
| import { getAreaPageFriendlyUrl } from '@/js/utils' | ||
| import { Card } from '../core/Card' | ||
| import { EntityIcon } from '@/app/(default)/editArea/[slug]/general/components/AreaItem' | ||
| import { ArrowRight } from '@phosphor-icons/react/dist/ssr' | ||
|
|
||
| /** | ||
| * Area info panel | ||
| */ | ||
| export const AreaInfoDrawer: React.FC<{ data: MapAreaFeatureProperties | null, onClose?: () => void }> = ({ data, onClose }) => { | ||
| const parent = data?.parent == null ? null : JSON.parse(data.parent) | ||
| const parentName = parent?.name ?? '' | ||
| const parentId = parent?.id ?? null | ||
| return ( | ||
| <Popover.Root open={data != null}> | ||
| <Popover.Anchor className='absolute top-3 left-3 z-50' /> | ||
| <Popover.Content align='start'> | ||
| {data != null && <Content {...data} parentName={parentName} parentId={parentId} />} | ||
| {data != null && <Content {...data} />} | ||
| </Popover.Content> | ||
| </Popover.Root> | ||
| ) | ||
| } | ||
|
|
||
| export const Content: React.FC<MapAreaFeatureProperties & { parentName: string, parentId: string | null }> = ({ id, name, parentName, parentId, content }) => { | ||
| const url = parentId == null | ||
| ? ( | ||
| <div className='inline-flex items-center gap-1.5'> | ||
| <EntityIcon type='area' size={16} /> | ||
| <span className='text-secondary font-medium'>{parentName}</span> | ||
| </div> | ||
| ) | ||
| : ( | ||
| <a | ||
| href={getAreaPageFriendlyUrl(parentId, name)} | ||
| className='inline-flex items-center gap-1.5' | ||
| > | ||
| <EntityIcon type='area' size={16} /><span className='text-secondary font-medium hover:underline '>{parentName}</span> | ||
| </a> | ||
| ) | ||
|
|
||
| const friendlyUrl = getAreaPageFriendlyUrl(id, name) | ||
| export const Content: React.FC<MapAreaFeatureProperties> = ({ id, areaName, climbs, content: { description } }) => { | ||
| const friendlyUrl = getAreaPageFriendlyUrl(id, areaName) | ||
| const editUrl = `/editArea/${id}/general` | ||
| return ( | ||
| <Card> | ||
| <div className='flex flex-col gap-y-1 text-xs'> | ||
| <div>{url}</div> | ||
| <div className='ml-2'> | ||
| <span className='text-secondary'>∟</span><a href={getAreaPageFriendlyUrl(id, name)} className='text-sm font-medium hover:underline'>{name}</a> | ||
| </div> | ||
| </div> | ||
| <hr className='mt-6' /> | ||
| <div className='flex items-center justify-end gap-2'> | ||
| <a className='btn btn-link btn-sm no-underline' href={`/editArea/${id}`}>Edit</a> | ||
| <a className='btn btn-primary btn-sm' href={friendlyUrl}>Visit area <ArrowRight /></a> | ||
| <div className='flex flex-col gap-4'> | ||
| <section className='flex flex-col gap-y-2'> | ||
| <div className='text-lg font-medium leading-snug tracking-tight'>{areaName}</div> | ||
| <div className='font-sm text-secondary flex items-center gap-1'> | ||
| <EntityIcon type='crag' size={16} /> | ||
| · | ||
| <span className='text-xs font-medium'>{climbs.length} climbs</span> | ||
| <a href={friendlyUrl} className='text-info text-xs font-semibold ml-auto hover:underline'>Visit page</a> | ||
| </div> | ||
| </section> | ||
|
|
||
| <a className='btn btn-primary btn-outline btn-sm' href={editUrl}>Edit area</a> | ||
|
|
||
| <hr /> | ||
|
|
||
| <section className='text-xs'> | ||
| {description == null || description.trim() === '' | ||
| ? <p>No description available. <a className='text-info hover:underline' href={editUrl}>[Add]</a></p> | ||
| : <p>{description}</p>} | ||
| </section> | ||
|
|
||
| <hr /> | ||
|
|
||
| <MicroClimbList climbs={climbs} /> | ||
| </div> | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| const MicroClimbList: React.FC<{ climbs: SimpleClimbType[] }> = ({ climbs }) => { | ||
| return ( | ||
| <section> | ||
| <h3 className='text-base font-semibold text-secondary'>Climbs</h3> | ||
| <ol> | ||
| {climbs.map((climb) => { | ||
| const url = `/climb/${climb.id}` | ||
| return ( | ||
| <li key={climb.id} className='text-xs'> | ||
| <a href={url} className='hover:underline'>{climb.name}</a> | ||
| </li> | ||
| ) | ||
| })} | ||
| </ol> | ||
| </section> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.