{/* Topo decoration */}

{/* Top meta strip */}

EDITION 02 · 2026

61.21°N 149.90°W

{/* Hero */}

A Field Atlas

The map of the
places that matter
to you.

Drop pins, tag them with anything, and discover the quiet places shared by people who care about the ground under their feet.

{/* CTAs */}

); } // ─── Map screen ──────────────────────────────────────────────────────────── function AtlasMap({ onPin, onSearch, onMenu, onLayers, onAdd, onGps, focusedPinId, mapId }) { const ref = useRef(null); const mapRef = useRef(null); useEffect(() => { if (!ref.current || mapRef.current) return; const map = pmMakeMap(ref.current); mapRef.current = map; PM_MOCK_PINS.forEach(p => { const m = pmPinMarker(p, atlasMarkerHTML(p), { w: 28, h: 36, x: 14, y: 36 }); m.on('click', () => onPin && onPin(p)); m.addTo(map); }); return () => { try { map.remove(); } catch {} mapRef.current = null; }; }, []); return (

{/* Top: search + menu */}

{/* Right column: layers + visibility + gps */}

{[ { glyph: , onClick: onLayers, label: 'Layers' }, { glyph: , label: 'View' }, { glyph: , onClick: onGps, label: 'GPS' }, ].map((b,i) => ( ))}

{/* Coordinate strip — bottom left */}

{pmFmtCoordShort(61.21, -149.90)} · Z 11

{/* FAB */}

); } // ─── Pin detail bottom sheet ─────────────────────────────────────────────── function AtlasPinDetail({ pin, onClose, onViewUser }) { if (!pin) return null; const comments = PM_MOCK_COMMENTS[pin.id] || []; const profile = PM_PROFILES[pin.owner] || { name: pin.owner, avatar: pmInitial(pin.owner) }; return (

{/* Handle */}

{/* Hero strip */}

{pmFmtCoord(pin.lat, pin.lng)}

{pin.name}

· {pin.privacy} · {pin.distKm.toFixed(1)} km

{/* Tags */}

{pin.tags.map(t => ( #{t} ))}

{/* Description */}

{pin.description}

{/* Stat row */}

{[ { v: pin.upvotes, l: 'upvotes', icon: '↑' }, { v: pin.saved, l: 'saved', icon: '✦' }, { v: pin.comments, l: 'comments', icon: '·' }, ].map(s => (

{s.v}

{s.l}

))}

{/* Action row */}

{/* Comments */}

Comments · {comments.length}

{comments.map(c => (

@{c.owner} {c.ts} ago

{c.body}

))}

); } // ─── Search panel ────────────────────────────────────────────────────────── function AtlasSearch({ onClose, onPickTag, onPickPin }) { const [q, setQ] = useState(''); return (

{/* Search input */}

setQ(e.target.value)} autoFocus placeholder="hashtag or place name" style={{ flex: 1, border: 'none', background: 'transparent', outline: 'none', fontSize: 14, color: T.ink }}/>

{/* Tabs */}

{['# Tags', '📍 Places'].map((t,i) => ( ))}

{/* Body */}

Trending · Last 7 days

{PM_TRENDING_TAGS.slice(0,6).map((t,i) => ( ))}

Nearby

{PM_NEARBY_PINS.slice(0,4).map(p => ( ))}

); } // ─── Profile screen ──────────────────────────────────────────────────────── function AtlasProfile({ onClose }) { const me = PM_ME; return (

{/* Header bar */}

Profile

{/* Identity */}

{pmInitial(me.name)}

{me.name}

@{me.handle}

{me.location} · Member since {me.joined}

{me.bio}

{/* Stats */}

{[ { v: me.stats.pins, l: 'pins' }, { v: me.stats.public, l: 'public' }, { v: me.stats.saved, l: 'saved' }, { v: me.stats.upvotes, l: 'upvotes' }, ].map((s, i) => (

{s.v}

{s.l}

))}

{/* Following */}

Following · {me.following.length}

{me.following.map(h => { const p = PM_PROFILES[h]; return (

{p.avatar}

{p.name}

@{p.handle} · {p.pinCount} pins

); })}

{/* Settings rows */}

Settings

{[ ['Push notifications', 'On'], ['Map layer', 'Standard'], ['Export data', 'GeoJSON · GPX'], ['Tutorial', 'Replay'], ['About', 'v 175'], ].map(([l,r]) => ( ))}

); } // ─── Mine list — logbook style (Direction B applied to Atlas palette) ───── function AtlasMine({ onPick }) { const myPins = PM_MOCK_PINS.filter(p => p.owner === 'me'); const totalUpvotes = myPins.reduce((a,p) => a + (p.upvotes||0), 0); return (

{/* Logbook header */}

VOL. II · YOUR FIELD LOG

Mine

{myPins.length} entries · {totalUpvotes} upvotes received

{/* Contour-style divider */} {/* Entry list */}

{myPins.map((p, i) => ( ))}

{/* Footer mark */}

── END OF LOG ──

); } // ─── Add pin sheet ───────────────────────────────────────────────────────── function AtlasAdd({ onClose }) { const [name, setName] = useState(''); const [tagsRaw, setTagsRaw] = useState(''); return (

New pin

Drop a pin

{pmFmtCoord(61.2181, -149.9003)}

Name setName(e.target.value)} placeholder="What is this place?" style={{ width: '100%', padding: '12px 14px', borderRadius: 10, border: `1px solid ${T.border}`, background: T.paper2, fontSize: 14, color: T.ink, marginBottom: 14, outline: 'none' }}/> Tags setTagsRaw(e.target.value)} placeholder="hiking viewpoint wildflower" style={{ width: '100%', padding: '12px 14px', borderRadius: 10, border: `1px solid ${T.border}`, background: T.paper2, fontSize: 14, color: T.ink, marginBottom: 14, outline: 'none' }}/> Color

{['#2a5d3c','#b85c2a','#1565c0','#ad1457','#6a1599','#00695c','#c62828','#3a4540'].map((c,i) => (

))}

); } // ─── Tab bar ─────────────────────────────────────────────────────────────── function AtlasTabBar({ tab, setTab }) { const tabs = [ { id: 'map', label: 'Map', icon: }, { id: 'search', label: 'Search', icon: }, { id: 'mine', label: 'Mine', icon: }, { id: 'profile', label: 'Profile', icon: }, ]; return (

{tabs.map(t => ( ))}

); } // ─── Root ────────────────────────────────────────────────────────────────── function AtlasApp() { const [phase, setPhase] = useState('splash'); // splash | app const [tab, setTab] = useState('map'); const [pin, setPin] = useState(null); const [add, setAdd] = useState(false); const [search, setSearch] = useState(false); return (

{phase === 'splash' && setPhase('app')} onGuest={() => setPhase('app')}/>} {phase === 'app' && ( <> {tab === 'map' && ( setPin(p)} onSearch={() => setSearch(true)} onMenu={() => setTab('profile')} onAdd={() => setAdd(true)} /> )} {tab === 'search' && setTab('map')} onPickPin={p => { setTab('map'); setTimeout(() => setPin(p), 200); }}/>} {tab === 'mine' && { setTab('map'); setTimeout(() => setPin(p), 200); }}/>} {tab === 'profile' && setTab('map')}/>} {pin && setPin(null)}/>} {add && setAdd(false)}/>} )}

); } window.AtlasApp = AtlasApp; })();