From 0c31cb1cdfe0c75601a77a90cc06a404412307b3 Mon Sep 17 00:00:00 2001
From: Jon <git@jonstarkey.co.uk>
Date: Mon, 25 May 2026 22:57:54 +0100
Subject: [PATCH] Add Hybrid map style (satellite + road/label overlay)

---
 app.js     | 1 +
 index.html | 1 +
 style.css  | 4 ++--
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app.js b/app.js
index 92ddd43..88b9a59 100644
--- a/app.js
+++ b/app.js
@@ -6,6 +6,7 @@ const MAPTILER_KEY_STORAGE = 'droneMapUK_maptilerKey';
 const STYLES = {
   outdoor:   key => `https://api.maptiler.com/maps/outdoor-v2/style.json?key=${key}`,
   satellite: key => `https://api.maptiler.com/maps/satellite/style.json?key=${key}`,
+  hybrid:    key => `https://api.maptiler.com/maps/hybrid/style.json?key=${key}`,
   streets:   key => `https://api.maptiler.com/maps/streets-v2/style.json?key=${key}`,
 };
 
diff --git a/index.html b/index.html
index faee895..a4e8c9d 100644
--- a/index.html
+++ b/index.html
@@ -138,6 +138,7 @@
       <div class="style-row">
         <button class="style-btn active" data-style="outdoor">Terrain</button>
         <button class="style-btn" data-style="satellite">Satellite</button>
+        <button class="style-btn" data-style="hybrid">Hybrid</button>
         <button class="style-btn" data-style="streets">Streets</button>
       </div>
 
diff --git a/style.css b/style.css
index dbb1489..aafc625 100644
--- a/style.css
+++ b/style.css
@@ -113,8 +113,8 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
 /* ── Style row ── */
 .style-row { display: flex; gap: 6px; margin-top: 4px; }
 .style-btn {
-  flex: 1; padding: 6px 4px; border-radius: 6px; border: 1px solid #333;
-  background: #2a2d38; color: #aaa; font-size: .75rem; cursor: pointer;
+  flex: 1; padding: 6px 2px; border-radius: 6px; border: 1px solid #333;
+  background: #2a2d38; color: #aaa; font-size: .7rem; cursor: pointer;
   transition: all .15s;
 }
 .style-btn:hover { background: #34384a; color: #fff; }