# Maps Location & Club Colors - Complete Overview

## 🗺️ Where Maps Appear

### 1. ✅ Admin Panel - Map Preview
**Path:** `Admin → Kontakty → Nastavení polohy`

**What It Shows:**
- Live preview of your configured map
- Real-time style selection
- Club color preview
- Zoom level adjustment

**Club Colors:** ✅ **YES**
- Primary color → Marker
- Accent color → Secondary elements
- 15% color overlay on map

**How to Access:**
1. Log in as admin
2. Go to "Kontakty" in sidebar
3. Click "Nastavení polohy" tab
4. Scroll to "Styl mapy"

---

### 2. ✅ Homepage - Contact Section
**Path:** `/` (Homepage bottom)

**What It Shows:**
- Map with club location
- Contact information box
- Club name and address in popup

**Conditions to Display:**
- GPS coordinates must be set (latitude + longitude)
- `show_map_on_homepage` must be enabled in settings

**Club Colors:** ✅ **YES**
- Automatically uses primary and accent colors from settings
- Marker colored with club colors
- Consistent branding

**How to Enable:**
1. Go to Admin → Kontakty
2. Set GPS coordinates
3. Enable "Zobrazit mapu na titulní stránce"
4. Save

---

### 3. ✅ Contact Page
**Path:** `/kontakt`

**What It Shows:**
- Map with club location (left side)
- Contact form and information (right side)
- All contact persons by category

**Club Colors:** ✅ **YES** 
- Uses club primary color for marker
- Uses club accent color for secondary elements
- Matches site branding

**Visible When:**
- GPS coordinates are configured
- Always shows if coordinates exist

---

### 4. ✅ Event Location Maps (JUST FIXED!)
**Path:** Event detail pages (e.g., `/akce/123`)

**What It Shows:**
- Map of event location
- Automatically geocodes address
- Shows event venue name in popup

**Club Colors:** ✅ **YES** (newly added!)
- Now uses club colors for markers
- Matches your map style setting
- Consistent with rest of site

**Visible When:**
- Event has location field filled in
- Automatically geocodes using OpenStreetMap

---

### 5. ⚠️ Setup Page - Coordinate Input
**Path:** `/setup` (first-time installation)

**What It Shows:**
- MapLinkImporter tool
- Text fields for GPS coordinates
- Import from Google Maps/Mapy.cz links

**Map Preview:** ❌ NO (only input tool)
- No visual map during setup
- Just coordinate entry
- Can import from map URLs

**Note:** Setup is one-time only. After setup, use admin panel for map configuration.

---

## 🎨 Club Color Integration Summary

| Location | Map Shown | Primary Color | Accent Color | Style Setting |
|----------|-----------|---------------|--------------|---------------|
| Admin Preview | ✅ | ✅ Marker | ✅ Elements | ✅ |
| Homepage | ✅* | ✅ Marker | ✅ Elements | ✅ |
| Contact Page | ✅ | ✅ Marker | ✅ Elements | ✅ |
| Event Maps | ✅ | ✅ Marker | ✅ Elements | ✅ |
| Setup Page | ❌ | N/A | N/A | N/A |

\* Only if enabled in settings

**All maps now use club colors!** ✅

---

## 🎯 How Club Colors Are Applied

### What Happens Automatically:

1. **Marker Color**
   ```
   Primary Color → SVG Marker Fill
   ```
   Your club's primary color (e.g., red, blue) becomes the marker color

2. **Color Overlay**
   ```
   Primary Color at 15% opacity → Map overlay
   ```
   Subtle tint over entire map for brand consistency

3. **Secondary Elements**
   ```
   Accent Color → Water features (vector maps only)
   ```
   Accent color can tint water bodies in vector maps

### Example:
**Red Club:**
```
Primary: #e11d48 (red)
Accent: #ffffff (white)
Result: Red markers on any map style you choose
```

---

## 🛠️ How to Configure

### Step 1: Set Your Club Colors
1. Go to: `Admin → Nastavení → Vzhled`
2. Set **Primární barva** (primary color)
3. Set **Doplňková barva** (accent color)
4. Save

### Step 2: Configure Map Location
1. Go to: `Admin → Kontakty → Nastavení polohy`
2. **Option A:** Enter GPS manually:
   - Latitude: e.g., 50.0755
   - Longitude: e.g., 14.4378
   
3. **Option B:** Import from map link:
   - Copy link from Google Maps or Mapy.cz
   - Paste in MapLinkImporter
   - Click "Importovat"

4. Set zoom level (recommended: 15)

### Step 3: Choose Map Style
1. In same page, scroll to "Styl mapy"
2. Choose from 11 styles:
   - **Positron** - light, clean
   - **Toner Lite** - subtle B&W
   - **Dark Matter** - dark theme
   - etc.
3. See live preview with your club colors
4. Save

### Step 4: Enable on Homepage (Optional)
1. Check "Zobrazit mapu na titulní stránce"
2. Save
3. Visit homepage to see result

---

## 📊 Map Style Recommendations by Club Colors

### Red Clubs (e.g., #e11d48)
✅ **Best:** Positron, Toner Lite, Default  
💡 **Why:** Light maps make red markers pop  
❌ **Avoid:** Dark styles (red gets lost)

### Blue Clubs (e.g., #3b82f6)
✅ **Best:** Dark Matter, Positron, Voyager  
💡 **Why:** Contrasts well with most backgrounds  
✅ **Works everywhere**

### Green Clubs (e.g., #16a34a)
✅ **Best:** Toner (B&W), Positron, Terrain  
💡 **Why:** Green stands out on neutral maps  
⚠️ **Careful:** Can blend with park areas

### Dark Colors (Black, Navy)
✅ **Best:** Positron, Toner Lite  
💡 **Why:** Need light background for visibility  
❌ **Avoid:** Dark Matter

---

## 🎨 Visual Examples

### Example 1: Red Club on Light Map
```
Primary Color: #e11d48 (red)
Map Style: Positron (light)
Result: ⭐ Excellent - red marker stands out clearly
```

### Example 2: Blue Club on Dark Map
```
Primary Color: #3b82f6 (blue)
Map Style: Dark Matter
Result: ⭐ Excellent - modern, professional look
```

### Example 3: Traditional B&W
```
Primary Color: #e11d48 (red)
Map Style: Toner (B&W)
Result: ⭐ Excellent - classic, elegant, timeless
```

---

## ✅ Current Status (After Fixes)

All map locations now properly use club colors:

- ✅ Admin panel preview - WORKING
- ✅ Homepage contact section - WORKING
- ✅ Contact page - WORKING
- ✅ Event location maps - **FIXED!**
- ⚠️ Setup page - Not applicable (no map shown)

**Result:** Complete consistency across your entire site! 🎉

---

## 🔍 Testing Your Maps

### Quick Test Checklist:

1. **Set Club Colors**
   - [ ] Go to Admin → Nastavení → Vzhled
   - [ ] Set primary color (your main club color)
   - [ ] Set accent color
   - [ ] Save

2. **Configure Location**
   - [ ] Go to Admin → Kontakty → Nastavení polohy
   - [ ] Set GPS coordinates
   - [ ] Choose map style
   - [ ] Verify preview shows your colors
   - [ ] Save

3. **Test Frontend**
   - [ ] Visit homepage (if enabled)
   - [ ] Visit /kontakt page
   - [ ] Check marker is your club color
   - [ ] Check map style matches selection

4. **Test Event Maps**
   - [ ] Create test event with location
   - [ ] Visit event detail page
   - [ ] Verify map shows with club colors

---

## 💡 Pro Tips

1. **Choose Contrasting Colors**
   - Marker should contrast with map background
   - Light markers need dark maps, vice versa

2. **Test on Mobile**
   - Maps are responsive
   - Check marker visibility on small screens

3. **Use Preview**
   - Admin panel shows real-time preview
   - Try different styles before saving

4. **Consistency**
   - All maps automatically use same style
   - Change once in admin, affects all maps

---

## 🆘 Troubleshooting

**Map not showing on homepage?**
- Check GPS coordinates are set
- Enable "Zobrazit mapu na titulní stránce"
- Clear browser cache

**Wrong marker color?**
- Verify primary color is set in Settings → Vzhled
- Save settings
- Refresh page (Ctrl+F5)

**Map style not applying?**
- Save in Admin → Kontakty
- Clear browser cache
- Check browser console for errors

**Event map not showing colors?**
- This was just fixed!
- Clear browser cache
- Rebuild: `npm run build`

---

## 📅 Implementation Date
**2025-10-10**

## ✅ Status
**All maps now use club colors consistently!**

**Last Update:** Event location maps fixed to include club colors
