🎅 Santa Sleigh Tracker – Complete Setup Guide

1. Go to https://console.firebase.google.com
2. Click Add project.
3. Name it something like santa-sleigh-tracker-yourtown.
4. Disable Google Analytics when asked.
5. Click Create project and wait for Firebase to finish.

1. In the left-hand menu, go to Build → Realtime Database.
2. Click Create Database.
3. Select region europe-west1 (Belgium) (the example HTML assumes this region).
4. Choose Start in test mode for now (we’ll lock writes in the rules).

Your database URL will look like:

https://YOUR-PROJECT-ID-default-rtdb.europe-west1.firebasedatabase.app/

You’ll use this base URL in the tracker HTML and in the GPS Logger app.

In the Realtime Database data view:

1. At the root /, click the + button.
2. Create a node called location.
3. Inside location, create a child called current.
4. Inside current, create a child with a secret key name — any random string, e.g. abc123xyz789.
5. Inside that secret key node, add the following three fields:

location
 └── current
      └── YOUR_SECRET_KEY
           ├── lat: 66.5436
           ├── lng: 25.8473
           └── ts: "2025-11-01T00:00:00Z"
  

✅ The tracker HTML reads location/current.json and then takes the first child (your secret key). So this exact structure is required.

Open the Rules tab and replace everything with:

Copy rules

{
  "rules": {
    ".read": true,

    "location": {
      "current": {
        ".write": false,

        "$secret": {
          ".write": "$secret === 'YOUR_SECRET_KEY'"
        }
      }
    }
  }
}
  

Now click Publish.

🔐 This means:
• Anyone can read the sleigh’s location (needed for the public map). • Only a client writing to /location/current/YOUR_SECRET_KEY can update it. • All other write paths under location/current are blocked.

Install GPS Logger on the device that will be on the sleigh.

• Android: https://gpslogger.app
• Direct APK (if needed): Google Drive link
• iOS alternative: OwnTracks (you’d configure it similarly with HTTP PUT → Firebase)

⚙ 5.1 Enable logging to custom URL

1. Open the app.
2. Go to Settings → Logging details → Log to custom URL.
3. Enable:
   • ✅ Log to custom URL
   • ✅ Validate SSL certificate
   • Optional: ✅ Discard offline locations

⚙ 5.2 Enter your Firebase write URL

In the URL field, enter:

https://YOUR-PROJECT-ID-default-rtdb.europe-west1.firebasedatabase.app/location/current/YOUR_SECRET_KEY.json

Example:

https://santa-sleigh-tracker-4dccd-default-rtdb.europe-west1.firebasedatabase.app/location/current/abcdefg12345.json

✅ Use the same YOUR_SECRET_KEY you created in step 3. ✅ Do not quote it. ❌ Don’t send to /location/current.json – that would break permissions.

⚙ 5.3 Method, headers & body

• HTTP method: PUT
• HTTP headers: Content-Type: application/json

JSON body:

Copy JSON body

{
  "lat": %LAT,
  "lng": %LON,
  "ts": "%TIME"
}
  

GPS Logger substitutes: • %LAT → latitude • %LON → longitude • %TIME → timestamp in ISO format

⚙ Recommended settings

• Auto-send interval: 10 seconds
• Logging interval: 10 seconds
• Accuracy filter: 20–40 metres
• GPS priority: High accuracy
• Keep GPS on between fixes: Enabled

Once you hit Start Logging, you should see live updates under: location → current → YOUR_SECRET_KEY in Firebase. The lat, lng and ts values will keep changing.

1. Create an account at https://github.com if you don’t have one.
2. Create a new public repository, e.g. SantaSleighTracker.
3. Click Add file → Create new file.
4. Name it something like: santa_sleigh_tracker_final.html.

Now open one of Ben’s templates and copy the entire file:

• With donation panel: BRT repo (use highest _final_X version)
• No donation version: santa_sleigh_tracker_no_donation.html.html

Paste the HTML into your new GitHub file.

✏️ Only change one line in that file: the firebaseURL (or similar) variable. Set it to your own Firebase base URL, for example:

const firebaseURL = "https://YOUR-PROJECT-ID-default-rtdb.europe-west1.firebasedatabase.app";

🔒 Do not put your YOUR_SECRET_KEY inside this HTML file – it only ever lives in Firebase rules + the GPS logger app.

1. In your repo, go to Settings → Pages.
2. Under Build and deployment:
   • Source: Deploy from a branch
   • Branch: main / root
3. Click Save.

After a minute or two, your tracker will be live at a URL like:

https://YOUR-GITHUB-NAME.github.io/SantaSleighTracker/santa_sleigh_tracker_final.html

🌍 That URL is your public live map – we’ll embed it next.

Paste this snippet wherever your site allows custom HTML (Carrd, WordPress, Squarespace, etc.):

Copy embed

<!-- 🎅 Santa Sleigh Tracker Embed -->
<div style="width:90vw;max-width:1000px;margin:0 auto;padding:0 8px;">
  <iframe
    src="https://YOUR-GITHUB-NAME.github.io/SantaSleighTracker/santa_sleigh_tracker_final.html"
    style="
      width:100%;
      height:80vh;
      min-height:480px;
      border:none;
      border-radius:15px;
      box-shadow:0 4px 18px #0002;
      display:block;
      margin:0 auto;
      overflow:hidden;
    "
    allowfullscreen
    loading="lazy"
  ></iframe>
</div>
  

✅ Replace the src value with your own GitHub Pages URL. The iframe is fully responsive and looks good on mobile and desktop.

To use a custom marker on the map:

1. Upload your PNG to https://imgbb.com.
2. Copy the direct image URL.
3. In your tracker HTML, find the Leaflet marker config line that looks like:

iconUrl: "https://i.ibb.co/0jP05w6J/Santa-Marker.png",

Replace the URL with your own.

Generic Santa roundel marker you can use:

https://i.ibb.co/Z1BzZS2T/Santa-Marker-7.png

🎨 Canva template if you want to customise your own icon: Santa marker Canva design

• Start GPS logging on the sleigh phone using GPS Logger.
• Watch Realtime Database update under location/current/YOUR_SECRET_KEY.
• Open your GitHub Pages tracker URL – the sleigh should move live.
• Share the embedded page link on your website, socials and posters.

If the map doesn’t move, check:
• GPS Logger URL exactly matches your Firebase path (including .json).
• Rules include your YOUR_SECRET_KEY and are published.
• firebaseURL in your HTML uses the correct project ID + region.