mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 05:26:47 +00:00
Maurice
1a95157b3a
Asked for in the feedback: a wall of round photos, and no way to tell which is which. "Name and displaying any custom rating would be very beneficial to quickly seeing what is around you that is of interest." The collections map had hover switched off. The trip map has told you what a marker is all along, so it is the same card, now shared instead of written a third time — it already existed twice, once per renderer, and the two had drifted in how they resolved the category icon. The card gains a rating, and so does the marker itself: an amber disc on the corner where a trip's day numbers sit. The two never collide, because a numbered stop is one already planned into a day and this answers the question asked before that. Nothing is drawn for an unrated place, which is most of them. Also from this round: the place panel's labels move up beside the name, where a label belongs — read three rows down they looked like a property of the rating above them — and the rating gets a ground of its own so a line of stars stops reading as another row of text.
46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import React from 'react'
|
|
import { MapViewAuto } from '../Map/MapViewAuto'
|
|
import type { CollectionPlace } from '@trek/shared'
|
|
import { mappablePlaces } from '../../pages/collections/collectionsModel'
|
|
import { useTileUrl } from '../../hooks/useTileUrl'
|
|
import { OFM_DARK, OFM_POSITRON } from '../../constants/mapDefaults'
|
|
|
|
interface CollectionMapProps {
|
|
places: CollectionPlace[]
|
|
selectedPlaceId: number | null
|
|
onOpenPlace: (id: number) => void
|
|
/** Clicking the map background clears the selection. */
|
|
onDeselect?: () => void
|
|
dark: boolean
|
|
}
|
|
|
|
/**
|
|
* Map view — reuses the trip map stack (MapViewAuto → Leaflet / GL with marker
|
|
* clustering). One of the three list views; clicking a marker selects the place.
|
|
* The parent `.col-mapwrap` supplies the rounded, bordered box + height, so this
|
|
* just fills it.
|
|
*/
|
|
export default function CollectionMap({ places, selectedPlaceId, onOpenPlace, onDeselect, dark }: CollectionMapProps): React.ReactElement {
|
|
const pts = mappablePlaces(places)
|
|
const tileUrl = useTileUrl(dark ? OFM_DARK : OFM_POSITRON)
|
|
|
|
return (
|
|
<div style={{ width: '100%', height: '100%' }}>
|
|
<MapViewAuto
|
|
places={pts}
|
|
selectedPlaceId={selectedPlaceId}
|
|
// Hover was off here, so a wall of round photos gave no way to tell what any of
|
|
// them were without clicking. The trip map has said what a marker is all along;
|
|
// this one adds the rating, because "which of these did I like" is exactly the
|
|
// question a small picture cannot answer.
|
|
onMarkerClick={onOpenPlace}
|
|
onMapClick={onDeselect ? () => onDeselect() : undefined}
|
|
// No center/zoom: the map frames itself on the collection's places at mount, and
|
|
// falls back to the world view for a collection with none.
|
|
tileUrl={tileUrl}
|
|
fitKey={pts.length}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|