diff --git a/index.html b/index.html index 40ae446..b81e4be 100644 --- a/index.html +++ b/index.html @@ -4375,8 +4375,8 @@ // ===================== // FANTASY MAP STYLE // ===================== - // Default fantasy colors (can be customized via settings) - const mapColors = { + // Default fantasy colors (can be customized via Theme Editor) + const defaultMapColors = { land: '#1a1a2e', water: '#0f3460', roads: '#e94560', @@ -4384,6 +4384,19 @@ parks: '#1b4332' }; + // Load active theme from localStorage (set by Theme Editor) + let mapColors = { ...defaultMapColors }; + try { + const savedTheme = localStorage.getItem('hikemap_active_theme'); + if (savedTheme) { + const parsed = JSON.parse(savedTheme); + mapColors = { ...defaultMapColors, ...parsed }; + console.log('Loaded custom map theme:', mapColors); + } + } catch (e) { + console.log('Using default map colors'); + } + // Build the fantasy map style function buildFantasyStyle(colors, use3dBuildings = true) { return { diff --git a/maplibre-test.html b/maplibre-test.html index 7c64c7c..350b0ea 100644 --- a/maplibre-test.html +++ b/maplibre-test.html @@ -3,7 +3,7 @@ - MapLibre Test - HikeMap + Map Theme Editor - HikeMap @@ -170,173 +332,277 @@
-

MapLibre Style Test

+

Map Theme Editor

-
-
Pre-made Styles
- - - - - - - - - - -
+
-
-
Custom Colors
+
+
Color Palette
- + + #1a1a2e
+ #0f3460
+ #e94560
+ #16213e
- + + #1b4332
-
- +
+ + +
+
+ +
+
Presets
+
+ + + + + +
+
- +
+
Save Theme
+ +
-
3D Controls
+
Saved Themes
+
+
No saved themes yet
+
+
+
+
Apply to Game
+ +

This will save the current colors as the active theme used in HikeMap.

+
+ +
+
Camera Controls
- - 0° + + 45°
-
0°
- -
- What you're seeing: - Vector tiles rendered client-side. Every color, label, and feature can be customized via style JSON. -

- Controls: - • Drag to pan - • Scroll to zoom - • Right-drag to rotate/tilt - • Ctrl+drag to pitch -