# 🚌 Complete Guide: Adding/Modifying Stops and Maps

## 📍 How to Add New Stops

### 1. **Add a New Date to the Schedule**

Edit `schedule-data.js` and add a new entry to the `schedule` array:

```javascript
// Add this anywhere in the schedule array:
{date: "2025-10-13", heading: "Måndagskarta - Ny Plats", url: "https://www.google.com/maps?hl=en&q=Ny%20Plats%2C%20Sweden&output=embed"}
```

### 2. **Add Address Mapping for New Location**

Edit `schedule-carousel-module.js` and add to the `addressMap` object:

```javascript
// In the getAddressForLocation function, add:
'Ny Plats': 'Full Address, City, Sweden'
```

## 🗺️ How to Get Google Maps Embed URLs

### **Method 1: Google Maps Website (Recommended)**

1. Go to [Google Maps](https://maps.google.com)
2. Search for your location (e.g., "ICA Maxi Lund")
3. Click the **"Share"** button
4. Click **"Embed a map"**
5. Copy the **iframe src URL** (the part after `src="` and before `"`)
6. Use that URL in your schedule

### **Method 2: Direct URL Construction**

For consistent results, use this format:
```
https://www.google.com/maps?hl=en&q=StoreName%2C%20City%2C%20Sweden&output=embed
```

**Example:**
```
https://www.google.com/maps?hl=en&q=ICA%20Maxi%20Lund%2C%20Lund%2C%20Sweden&output=embed
```

## 📝 Common Update Scenarios

### **Scenario 1: Change an Existing Location**

**Before:**
```javascript
{date: "2025-09-01", heading: "Måndagskarta - Bjärred Coop", url: "https://www.google.com/maps?hl=en&q=Coop%20Bjarred%2C%20Bjarred%2C%20Sweden&output=embed"}
```

**After:**
```javascript
{date: "2025-09-01", heading: "Måndagskarta - Ny Butik", url: "https://www.google.com/maps?hl=en&q=Ny%20Butik%2C%20Bjarred%2C%20Sweden&output=embed"}
```

**Also update the address mapping:**
```javascript
// Change this line in schedule-carousel-module.js:
'Bjärred Coop': 'Bjärred, Sverige'
// To:
'Ny Butik': 'Ny Adress, Bjärred, Sverige'
```

### **Scenario 2: Add a New Stop**

**Step 1: Add to schedule-data.js**
```javascript
{date: "2025-10-13", heading: "Måndagskarta - Ny Vaccination Plats", url: "https://www.google.com/maps?hl=en&q=Ny%20Vaccination%20Plats%2C%20City%2C%20Sweden&output=embed"}
```

**Step 2: Add address mapping**
```javascript
// In schedule-carousel-module.js, add:
'Ny Vaccination Plats': 'Full Address, City, Sweden'
```

### **Scenario 3: Change a No-Service Day to Service Day**

**Before:**
```javascript
{date: "2025-09-02", heading: "Tisdagskarta - Ingen vaccination", url: "N/A"}
```

**After:**
```javascript
{date: "2025-09-02", heading: "Tisdagskarta - Ny Plats", url: "https://www.google.com/maps?hl=en&q=Ny%20Plats%2C%20Sweden&output=embed"}
```

### **Scenario 4: Change a Service Day to No-Service**

**Before:**
```javascript
{date: "2025-09-01", heading: "Måndagskarta - Bjärred Coop", url: "https://www.google.com/maps?hl=en&q=Coop%20Bjarred%2C%20Bjarred%2C%20Sweden&output=embed"}
```

**After:**
```javascript
{date: "2025-09-01", heading: "Måndagskarta - Ingen vaccination", url: "N/A"}
```

## 🎯 Step-by-Step Examples

### **Example 1: Adding "ICA Maxi Malmö" for October 15th**

**Step 1: Get the Google Maps URL**
1. Go to Google Maps
2. Search "ICA Maxi Malmö"
3. Click Share → Embed a map
4. Copy the iframe src URL

**Step 2: Add to schedule-data.js**
```javascript
{date: "2025-10-15", heading: "Onsdagskarta - ICA Maxi Malmö", url: "https://www.google.com/maps?hl=en&q=ICA%20Maxi%20Malm%C3%B6%2C%20Malm%C3%B6%2C%20Sweden&output=embed"}
```

**Step 3: Add address mapping**
```javascript
// In schedule-carousel-module.js, add to addressMap:
'ICA Maxi Malmö': 'Malmö, Sverige'
```

### **Example 2: Changing "Båstad Willys" to "Båstad ICA"**

**Step 1: Update schedule-data.js**
```javascript
// Find this line:
{date: "2025-09-08", heading: "Måndagskarta - Båstad Willys", url: "https://www.google.com/maps?hl=en&q=Willys%20B%C3%A5stad%2C%20Stenhusv%C3%A4gen%207E%2C%20269%2036%20B%C3%A5stad%2C%20Sweden&output=embed"}

// Change to:
{date: "2025-09-08", heading: "Måndagskarta - Båstad ICA", url: "https://www.google.com/maps?hl=en&q=ICA%20B%C3%A5stad%2C%20B%C3%A5stad%2C%20Sweden&output=embed"}
```

**Step 2: Update address mapping**
```javascript
// In schedule-carousel-module.js, change:
'Båstad Willys': 'Stenhusvägen 7E, 269 36 Båstad, Sverige'
// To:
'Båstad ICA': 'ICA Båstad, Båstad, Sverige'
```

## 🔧 Technical Details

### **How Maps Work in the System**

1. **Daily Map**: Shows the map for today's vaccination location
2. **Schedule Carousel**: Shows maps for the next 7 days
3. **Next Service Logic**: When no service today, shows next available service map

### **File Locations**

- **Schedule Data**: `schedule-data.js` (main schedule)
- **Address Mappings**: `schedule-carousel-module.js` (for carousel cards)
- **Map Display**: `map-updater-module.js` (handles map updates)

### **URL Format Requirements**

- Must use `output=embed` parameter
- Must be properly URL-encoded
- Should include `hl=en` for English interface
- Use `q=` parameter for location search

## ⚠️ Important Notes

### **Date Format**
- Always use `YYYY-MM-DD` format
- Example: `"2025-10-15"` (not `"15/10/2025"`)

### **Heading Format**
- Follow pattern: `"Daykarta - Location"`
- Examples: `"Måndagskarta - ICA Maxi"`, `"Lördagskarta - Ingen vaccination"`

### **URL Encoding**
- Spaces become `%20`
- Swedish characters: `å` = `%C3%A5`, `ä` = `%C3%A4`, `ö` = `%C3%B6`
- Commas become `%2C`

### **No Service Days**
- Use `"url": "N/A"`
- Use `"heading": "... - Ingen vaccination"`

## 🚀 Quick Reference

### **Common Store Types**
- ICA Maxi: `ICA%20Maxi%20City`
- Willys: `Willys%20City`
- City Gross: `City%20Gross%20City`
- Coop: `Coop%20City`

### **Common Cities**
- Lund: `Lund`
- Malmö: `Malm%C3%B6`
- Båstad: `B%C3%A5stad`
- Höllviken: `H%C3%B6llviken`

### **Template for New Entry**
```javascript
{date: "YYYY-MM-DD", heading: "Daykarta - Store Name", url: "https://www.google.com/maps?hl=en&q=Store%20Name%2C%20City%2C%20Sweden&output=embed"}
```

## 🎉 Testing Your Changes

1. **Save** both files (`schedule-data.js` and `schedule-carousel-module.js`)
2. **Refresh** the webpage
3. **Check** that the daily map shows the correct location
4. **Check** that the carousel shows the correct address
5. **Test** on different days to ensure the rotation works

---

**Need Help?** Check the browser console for any error messages, or contact the system administrator.