jon/DroneMapUK
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Hybrid map style (satellite + road/label overlay)

Browse Source
This commit is contained in:
Jon
2026-05-25 22:57:54 +01:00
parent 0a8c21a88b
commit 0c31cb1cdf
3 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app.js
View File

@@ -6,6 +6,7 @@ const MAPTILER_KEY_STORAGE = 'droneMapUK_maptilerKey';
const STYLES = { const STYLES = {
outdoor: key => `https://api.maptiler.com/maps/outdoor-v2/style.json?key=${key}`, 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}`, 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}`, streets: key => `https://api.maptiler.com/maps/streets-v2/style.json?key=${key}`,
}; };

1
index.html
View File

@@ -138,6 +138,7 @@
<div class="style-row"> <div class="style-row">
<button class="style-btn active" data-style="outdoor">Terrain</button> <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="satellite">Satellite</button>
<button class="style-btn" data-style="hybrid">Hybrid</button>
<button class="style-btn" data-style="streets">Streets</button> <button class="style-btn" data-style="streets">Streets</button>
</div> </div>

4
style.css
View File

@@ -113,8 +113,8 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
/* ── Style row ── */ /* ── Style row ── */
.style-row { display: flex; gap: 6px; margin-top: 4px; } .style-row { display: flex; gap: 6px; margin-top: 4px; }
.style-btn { .style-btn {
flex: 1; padding: 6px 4px; border-radius: 6px; border: 1px solid #333; flex: 1; padding: 6px 2px; border-radius: 6px; border: 1px solid #333;
background: #2a2d38; color: #aaa; font-size: .75rem; cursor: pointer; background: #2a2d38; color: #aaa; font-size: .7rem; cursor: pointer;
transition: all .15s; transition: all .15s;
} }
.style-btn:hover { background: #34384a; color: #fff; } .style-btn:hover { background: #34384a; color: #fff; }