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>
|
||
|---|---|---|
| public | ||
| src | ||
| utils | ||
| .gitignore | ||
| README.md | ||
| deploy.sh | ||
| eslint.config.js | ||
| index.html | ||
| logo-master.png | ||
| package-lock.json | ||
| package.json | ||
| vite.config.js | ||
README.md
React + Vite
char ok tourbmarxhe y
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.