1. Remove Duplicate Buttons (MapView.jsx):
- Removed "My spot" and "New wire" buttons from map-top-actions
- These functions already available in SmartSearchBar icons
- Cleaner UI, less clutter
2. Fix Pin Anchoring - Pins Stay Fixed Now! (markerManager.js):
- Root element now has fixed dimensions: width:40px, height:52px
- Pin container positioned absolute bottom:0 (ensures correct anchor point)
- Hover card uses bottom:100% instead of fixed pixel value
- Transform includes translateY(-6px) for proper spacing
- Result: Pins remain perfectly fixed at geographic position during zoom/pan
Pin DOM structure now:
```
<div root style="width:40px;height:52px"> (anchor bottom here)
<div container style="position:absolute;bottom:0">
<circle>image</circle>
<triangle>point</triangle>
</div>
<div hover-card style="bottom:100%">preview</div>
</div>
```
The key: Root has explicit height, pin container at bottom,
so MapLibre anchor:"bottom" aligns triangle point with lat/lon
Tested: Pins now stay locked to position on zoom/pan ✅🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1. Smart Search Integration (MapView.jsx, SmartSearchBar.jsx):
- Replace simple search bar with SmartSearchBar component
- Suggestions appear on focus (popular cities/regions)
- Suggestions update as user types (debounced 150ms)
- Click suggestion → fly to location with appropriate zoom
- Search triggers even with empty query for popular results
2. Navigation to Cities (MapView.jsx):
- New handlePickSuggestion() function
- Extracts coords from suggestion (supports coords array or lat/lon)
- Uses map.flyTo() with smart zoom levels per type:
* Cities: zoom 11
* Regions: zoom 7
* Posts: zoom 16
* Profiles: zoom 14
- Clears search after navigation
3. Fixed Marker Anchoring (markerManager.js):
- Changed anchor: "center" → "bottom"
- Markers now stay fixed at geographic position
- Pin design: circle image + triangular point (52px height)
- Point positioned at exact lat/lon location
- No more drifting when map moves!
4. Improved Pin Design:
- Circle (32px) with category color background
- White border + shadow for visibility
- Triangular point (16px) below circle
- Image inside circle if available
- Hover card positioned above pin (bottom: 58px)
- Smooth transitions on hover/click
Mobile-friendly: Works on cellphone without console, visual feedback
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement smart prioritization system to reduce map clutter:
- Create priority scoring based on reco score, category, freshness, distance, engagement
- Cluster nearby posts and show best post as full card, others as simple markers
- Simple markers: circular icons with category colors, hover preview, click to expand
- Max 15 full cards displayed, rest shown as compact markers
- Optimize search debounce: 220ms → 150ms for faster suggestions
New files:
- postPriority.js: Scoring and clustering algorithm
Updated:
- markerManager.js: Add createSimpleMarkerForPost() with hover cards
- usePostsEngine.js: Use prioritizePosts() to separate full cards vs simple markers
- SmartSearchBar.jsx: Faster debounce (150ms), increased limit to 12 suggestions
Result: Less visual clutter, better UX with prioritized content
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Use deterministic hash-based offset calculation for stable marker positions
- Markers now stay in same position across zoom/pan operations
- Check geographic distance instead of pixel distance for clustering
- Reduce image preview from 60px to 40px for compact modal
- Reduce button font size to save space
Fixes: Markers no longer jump around when zooming
Fixes: Modal stays compact with image preview
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Your Name