mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 02:32:57 +00:00
Tomáš Dvořák
137 lines
2.9 KiB
Markdown
137 lines
2.9 KiB
Markdown
# Vector Maps - Quick Start Guide
|
|
|
|
## 🚀 Get Started in 3 Minutes
|
|
|
|
### Step 1: Get API Key (Free)
|
|
|
|
1. Go to [maptiler.com](https://www.maptiler.com/)
|
|
2. Sign up (free tier: 100,000 requests/month)
|
|
3. Copy your API key
|
|
|
|
### Step 2: Add to Environment
|
|
|
|
Edit `.env` file:
|
|
```bash
|
|
REACT_APP_MAPTILER_KEY=your_key_here
|
|
```
|
|
|
|
### Step 3: Use Vector Maps
|
|
|
|
```typescript
|
|
import VectorMap from './components/home/VectorMap';
|
|
|
|
<VectorMap
|
|
latitude={50.0755}
|
|
longitude={14.4378}
|
|
clubPrimaryColor="#e11d48"
|
|
mapStyle="positron"
|
|
/>
|
|
```
|
|
|
|
## 🎨 Available Styles
|
|
|
|
| Style | Description |
|
|
|-------|-------------|
|
|
| `positron` | Clean light (recommended) |
|
|
| `dark-matter` | Sleek dark theme |
|
|
| `osm-bright` | Colorful OpenStreetMap |
|
|
| `klokantech-basic` | Simple & minimal |
|
|
|
|
## ✨ Features
|
|
|
|
✅ **60% faster** than raster tiles
|
|
✅ **Sharp on all displays** - perfect Retina support
|
|
✅ **Club color integration** - automatic marker coloring
|
|
✅ **Smooth zoom** - GPU accelerated
|
|
✅ **Mobile optimized** - touch gestures built-in
|
|
|
|
## 🎯 Club Color Integration
|
|
|
|
Your club colors are automatically applied:
|
|
|
|
```typescript
|
|
<VectorMap
|
|
clubPrimaryColor="#e11d48" // Used for marker
|
|
clubSecondaryColor="#ffffff" // Used for accents
|
|
/>
|
|
```
|
|
|
|
**Result:**
|
|
- Marker pin colored with primary color
|
|
- Water features subtly tinted
|
|
- Perfect brand consistency
|
|
|
|
## 📊 Comparison
|
|
|
|
### Vector (New)
|
|
- 🚀 150 KB initial + 20 KB per zoom
|
|
- 🖼️ Always sharp (vector rendering)
|
|
- 🎨 Runtime color changes
|
|
- ⚡ GPU accelerated
|
|
|
|
### Raster (Old)
|
|
- 📦 100 KB initial + 200 KB per zoom
|
|
- 🖼️ Pixelated between zooms
|
|
- 🎨 Fixed tile colors
|
|
- 💻 CPU rendering
|
|
|
|
## 💡 Pro Tips
|
|
|
|
1. **For Red/Blue Clubs:**
|
|
Use `positron` style - makes your colors pop
|
|
|
|
2. **For Dark Sites:**
|
|
Use `dark-matter` - modern look
|
|
|
|
3. **For Performance:**
|
|
Use `klokantech-basic` - simplest, fastest
|
|
|
|
4. **For Best Quality:**
|
|
Always provide both primary & secondary colors
|
|
|
|
## 🔧 Advanced: Custom Styles
|
|
|
|
Host your own style JSON:
|
|
|
|
```typescript
|
|
<VectorMap
|
|
customStyleUrl="https://your-cdn.com/style.json"
|
|
/>
|
|
```
|
|
|
|
Based on [Positron GL Style](https://github.com/openmaptiles/positron-gl-style)
|
|
|
|
## 📱 Mobile
|
|
|
|
Works perfectly out of the box:
|
|
- Pinch to zoom
|
|
- Pan with one finger
|
|
- Rotate with two fingers
|
|
- Auto-adjusts to screen size
|
|
|
|
## 🆚 When to Use Each
|
|
|
|
**Use Vector Maps When:**
|
|
- Need sharp rendering
|
|
- Want dynamic styling
|
|
- Performance matters
|
|
- Modern browsers only
|
|
|
|
**Use Raster Maps When:**
|
|
- Need broad compatibility
|
|
- Simpler implementation
|
|
- Offline maps required
|
|
|
|
## 🎓 Learn More
|
|
|
|
- Full docs: `VECTOR_MAPS_IMPLEMENTATION.md`
|
|
- Style customization: `ENHANCED_MAP_IMPLEMENTATION.md`
|
|
- MapLibre docs: [maplibre.org](https://maplibre.org/)
|
|
|
|
---
|
|
|
|
**Time to Implement:** ~5 minutes
|
|
**Difficulty:** Easy
|
|
**Cost:** Free (100k requests/month)
|
|
**Result:** Professional, fast, beautiful maps! 🗺️✨
|