maplibre-preview 1.4.2 → 1.6.0

data/lib/maplibre-preview/version.rb

@@ -1,3 +1,3 @@
 module MapLibrePreview
-  VERSION = '1.4.2'
+  VERSION = '1.6.0'
 end

data/lib/maplibre-preview/views/maplibre_layout.slim

@@ -175,37 +175,80 @@ html
       | .controls a:hover { text-decoration: underline; }
       | .layer-controls-wrapper {
       |   position: absolute; top: 50%; left: 10px; transform: translateY(-50%); z-index: 1000;
-      |   display: flex; align-items: center; gap: 0;
+      |   display: flex; align-items: flex-start; gap: 0;
       | }
       | .layer-controls {
-      |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555; border-right: none; padding: 15px;
-      |   border-radius: 4px; color: #a9b7c6; display: flex; flex-direction: column; gap: 6px;
-      |   max-width: 300px; max-height: 80vh; transition: max-width 0.2s;
-      |   overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); order: 1;
+      |   background: transparent; border: none; padding: 0;
+      |   border-radius: 4px; color: #a9b7c6; display: flex; flex-direction: column; gap: 12px;
+      |   width: fit-content; max-width: min(90vw, 420px); max-height: 80vh; transition: max-width 0.2s;
+      |   overflow: hidden; order: 1;
       | }
-      | .layer-controls.collapsed {
-      |   max-width: 0; padding: 15px 0; border: none; opacity: 0; pointer-events: none;
+      | .control-section-wrapper {
+      |   display: flex; align-items: center; width: max-content; max-width: min(90vw, 420px);
       | }
-      | .layer-controls-toggle {
+      | .control-section-wrapper + .control-section-wrapper {
+      |   margin-top: 4px;
+      | }
+      | .control-section {
+      |   display: flex; flex-direction: column; gap: 8px; min-height: 0; width: max-content;
+      |   max-width: min(90vw, 420px);
+      |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555; padding: 12px;
+      |   border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      | }
+      | .control-section-wrapper:not(.collapsed) .control-section {
+      |   border-right: none; border-radius: 4px 0 0 4px;
+      | }
+      | .control-section.collapsed {
+      |   gap: 0;
+      | }
+      | .control-section-header {
+      |   display: flex; align-items: center; justify-content: space-between; gap: 8px;
+      | }
+      | .control-section-title {
+      |   color: #ffc66d; font-size: 11px; font-weight: bold; line-height: 1.2;
+      |   text-transform: uppercase;
+      | }
+      | .control-section-toggle-external {
       |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555;
       |   border-left: none; border-radius: 0 4px 4px 0; padding: 8px 4px;
       |   color: #a9b7c6; cursor: pointer; display: flex; align-items: center; justify-content: center;
-      |   width: 18px; height: auto; min-height: 60px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); order: 2;
+      |   width: 18px; height: auto; min-height: 60px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); flex-shrink: 0;
       | }
-      | .layer-controls-toggle:hover {
+      | .control-section-toggle-external:hover {
       |   background: rgba(75, 77, 79, 0.95); color: #ffc66d; border-color: #666666;
       | }
-      | .layer-controls-wrapper.collapsed .layer-controls-toggle {
-      |   order: 0; border-left: 1px solid #555555; border-right: 1px solid #555555; border-radius: 4px;
+      | .control-section-wrapper.collapsed .control-section-toggle-external {
+      |   display: none;
       | }
-      | .layer-controls-wrapper.collapsed .toggle-icon {
-      |   transform: rotate(180deg);
+      | .control-section-toggle-inline {
+      |   background: #4b4d4f; color: #a9b7c6; border: 1px solid #555555;
+      |   border-radius: 3px; cursor: pointer; font-size: 10px; line-height: 1;
+      |   padding: 0; width: 22px; height: 22px; transition: all 0.2s ease; flex-shrink: 0;
+      |   display: none; align-items: center; justify-content: center;
+      | }
+      | .control-section-toggle-inline:hover {
+      |   background: #5a5d5f; border-color: #666666;
+      | }
+      | .control-section.collapsed .control-section-toggle-inline {
+      |   display: flex;
       | }
       | .toggle-icon {
       |   font-size: 12px; font-weight: bold; transition: transform 0.2s;
       | }
+      | .control-section-body {
+      |   display: flex; flex-direction: column; gap: 8px; min-height: 0;
+      | }
+      | .control-section.collapsed .control-section-body {
+      |   display: none;
+      | }
+      | .map-settings-section {
+      |   flex-shrink: 0;
+      | }
+      | .style-controls-section {
+      |   overflow: hidden; min-width: 160px; max-height: calc(80vh - 120px);
+      | }
       | .mode-switcher {
-      |   display: flex; gap: 2px; margin-bottom: 10px; background: #3c3f41;
+      |   display: flex; gap: 2px; margin-bottom: 10px; background: #3c3f41; width: 100%;
       |   border-radius: 3px; padding: 2px; flex-shrink: 0;
       | }
       | .mode-button {
@@ -218,6 +261,27 @@ html
       |   display: none; flex-direction: column; gap: 6px; 
       |   max-height: calc(80vh - 200px); overflow-y: auto;
       | }
+      | .settings-panel {
+      |   max-height: none; overflow: visible; width: 220px;
+      | }
+      | .setting-group {
+      |   display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px;
+      |   border-bottom: 1px solid #464749;
+      | }
+      | .setting-label {
+      |   display: flex; align-items: center; justify-content: space-between; gap: 8px;
+      |   color: #a9b7c6; font-size: 11px; font-weight: bold;
+      | }
+      | .setting-value {
+      |   color: #6897bb; font-family: 'Courier New', monospace; font-weight: bold;
+      | }
+      | .setting-range {
+      |   width: 100%; accent-color: #6897bb; cursor: pointer;
+      | }
+      | .style-panel {
+      |   flex: 1; min-height: 0; max-height: calc(80vh - 245px); width: max-content; max-width: 100%;
+      |   overflow: hidden;
+      | }
       | .control-panel::-webkit-scrollbar { width: 8px; }
       | .control-panel::-webkit-scrollbar-track { background: #3c3f41; border-radius: 4px; }
       | .control-panel::-webkit-scrollbar-thumb { 
@@ -231,16 +295,26 @@ html
       |   display: flex; flex-direction: column; gap: 6px;
       | }
       | .control-panel-content {
-      |   flex: 1; overflow-y: auto;
+      |   flex: 1; min-height: 0; max-height: calc(80vh - 325px); overflow-y: auto;
+      |   width: max-content; max-width: 100%;
+      | }
+      | #filter-buttons, #layer-buttons {
+      |   display: inline-grid; grid-template-columns: max-content; gap: 2px; width: max-content;
+      |   justify-items: stretch;
       | }
       | .control-button {
       |   background: #4b4d4f; color: #a9b7c6; border: 1px solid #555555;
       |   padding: 6px 12px; border-radius: 3px; cursor: pointer; font-size: 11px;
-      |   transition: all 0.2s ease; width: 100%; box-sizing: border-box;
+      |   transition: all 0.2s ease; width: 100%; box-sizing: border-box; white-space: nowrap;
+      | }
+      | #filter-buttons .control-button, #layer-buttons .control-button {
+      |   width: 100%; text-align: center;
       | }
       | .control-button:hover { background: #5a5d5f; border-color: #666666; }
       | .control-button.active { background: #6a9955; color: #ffffff; border-color: #7bb366; }
       | .control-button.inactive { background: #3c3f41; color: #808080; border-color: #464749; }
+      | .control-button.cache-off { background: #7a2f35; color: #ffffff; border-color: #9b3f47; font-weight: bold; }
+      | .control-button.cache-off:hover { background: #8f3841; border-color: #b64b55; }
       | .filter-group {
       |   margin-bottom: 8px;
       |   border: 1px solid #555555;

data/lib/maplibre-preview/views/maplibre_map.slim

@@ -12,29 +12,67 @@ ruby:
 - if style_name || external_style_url || options[:style_url]
   .layer-controls-wrapper
     .layer-controls id="layer-controls"
-      .mode-switcher
-        button.mode-button.active id="mode-filters" onclick="switchMode(this, 'filters')" Filters
-        button.mode-button id="mode-layers" onclick="switchMode(this, 'layers')" Layers
-      button.control-button onclick="toggleHoverMode()" id="hover-mode-btn" Hover Mode
-      button.control-button onclick="toggleProfileMode()" id="profile-mode-btn" style="display: none;" Elevation Profile
-      button.control-button onclick="toggleAntialias()" id="antialias-btn" Antialias
-      button.control-button onclick="toggleTileGrid()" id="tilegrid-mode-btn" Tile Grid
-
-      #filters-panel.control-panel.active
-        .control-panel-header
-          button.control-button onclick="toggleAllFilters()" Toggle All Filters
-          button.control-button onclick="toggleBasemap()" Show/Hide Basemap
-        .control-panel-content
-          #filter-buttons
-
-      #layers-panel.control-panel
-        .control-panel-header
-          button.control-button onclick="toggleAllLayers()" Toggle All Layers
-          button.control-button onclick="toggleBasemap()" Show/Hide Basemap
-        .control-panel-content
-          #layer-buttons
-    button.layer-controls-toggle id="layer-controls-toggle" onclick="toggleLayerControls()" title="Collapse/Expand Panel"
-      span.toggle-icon ◀
+      .control-section-wrapper.map-settings-wrapper id="map-settings-wrapper"
+        .control-section.map-settings-section id="map-settings-section"
+          .control-section-header
+            .control-section-title Map Settings
+            button.control-section-toggle-inline id="map-settings-toggle-inline" onclick="toggleControlSection('map-settings')" title="Expand Map Settings"
+              span.toggle-icon ▶
+          .control-section-body
+            .mode-switcher id="settings-mode-switcher"
+              button.mode-button.active id="settings-mode-view" onclick="switchSettingsMode(this, 'view')" View
+              button.mode-button id="settings-mode-debug" onclick="switchSettingsMode(this, 'debug')" Debug
+
+            #settings-view-panel.control-panel.settings-panel.active
+              .setting-group
+                .setting-label
+                  span Basemap opacity
+                  span.setting-value id="basemap-opacity-value" 80%
+                input.setting-range id="basemap-opacity-slider" type="range" min="0" max="100" step="5" value="80" oninput="setBasemapOpacity(this.value)"
+              .setting-group.terrain-setting id="terrain-exaggeration-setting" style="display: none;"
+                .setting-label
+                  span Terrain exaggeration
+                  span.setting-value id="terrain-exaggeration-value" 1.0x
+                input.setting-range id="terrain-exaggeration-slider" type="range" min="0" max="3" step="0.1" value="1" oninput="setTerrainExaggeration(this.value)"
+              button.control-button onclick="toggleAntialias()" id="antialias-btn" Antialias
+
+            #settings-debug-panel.control-panel.settings-panel
+              button.control-button onclick="toggleMapCache()" id="map-cache-btn" Cache
+              button.control-button onclick="toggleTileGrid()" id="tilegrid-mode-btn" Tile Boundaries
+              button.control-button onclick="toggleCollisionBoxes()" id="collision-boxes-btn" Collision Boxes
+              button.control-button onclick="toggleOverdrawInspector()" id="overdraw-inspector-btn" Overdraw
+              button.control-button onclick="toggleTileFade()" id="tile-fade-btn" Raster Fade
+              button.control-button onclick="toggleHoverMode()" id="hover-mode-btn" Hover Mode
+              button.control-button onclick="toggleProfileMode()" id="profile-mode-btn" style="display: none;" Elevation Profile
+        button.control-section-toggle-external id="map-settings-toggle" onclick="toggleControlSection('map-settings')" title="Collapse Map Settings"
+          span.toggle-icon ◀
+
+      .control-section-wrapper.style-controls-wrapper id="style-controls-wrapper"
+        .control-section.style-controls-section id="style-controls-section"
+          .control-section-header
+            .control-section-title Style Controls
+            button.control-section-toggle-inline id="style-controls-toggle-inline" onclick="toggleControlSection('style-controls')" title="Expand Style Controls"
+              span.toggle-icon ▶
+          .control-section-body
+            .mode-switcher id="style-mode-switcher"
+              button.mode-button.active id="mode-filters" onclick="switchMode(this, 'filters')" Filters
+              button.mode-button id="mode-layers" onclick="switchMode(this, 'layers')" Layers
+
+            #filters-panel.control-panel.style-panel.active
+              .control-panel-header
+                button.control-button onclick="toggleAllFilters()" Toggle All Filters
+                button.control-button onclick="toggleBasemap()" id="basemap-filters-btn" Show/Hide Basemap
+              .control-panel-content
+                #filter-buttons
+
+            #layers-panel.control-panel.style-panel
+              .control-panel-header
+                button.control-button onclick="toggleAllLayers()" Toggle All Layers
+                button.control-button onclick="toggleBasemap()" id="basemap-layers-btn" Show/Hide Basemap
+              .control-panel-content
+                #layer-buttons
+        button.control-section-toggle-external id="style-controls-toggle" onclick="toggleControlSection('style-controls')" title="Collapse Style Controls"
+          span.toggle-icon ◀
 
 #map-container
   #map.map-layer data-style-url="#{style_url}"
@@ -77,11 +115,17 @@ ruby:
 javascript:
     const mapEl = document.getElementById('map');
     const style_url = mapEl?.dataset?.styleUrl || null;
-    let showBasemapFilters = true, showBasemapLayers = true, currentMode = 'filters';
+    let showBasemap = true, currentMode = 'filters';
     let hoverMode = 'click';
     let layerStates = {};
     let map = null;
     let antialiasEnabled = localStorage.getItem('antialiasEnabled') !== 'false';
+    let mapCacheDisabled = localStorage.getItem('mapCacheDisabled') === 'true';
+    let basemapOpacity = Number.parseFloat(localStorage.getItem('basemapOpacity') || '0.8');
+    let terrainExaggeration = Number.parseFloat(localStorage.getItem('terrainExaggeration') || '1');
+    let collisionBoxesEnabled = localStorage.getItem('collisionBoxesEnabled') === 'true';
+    let overdrawInspectorEnabled = localStorage.getItem('overdrawInspectorEnabled') === 'true';
+    let tileFadeEnabled = localStorage.getItem('tileFadeEnabled') !== 'false';
     let styleLoaded = false, resourcesLoaded = 0, totalResources = 0;
     let tilesLoaded = 0, tilesTotal = 0;
     let currentStyle = null;
@@ -95,12 +139,14 @@ javascript:
     let tileGridManager = null;
 
     const toDomId = (prefix, id) => `${prefix}-${String(id).replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+    const noCacheRequestOptions = () => mapCacheDisabled ? {cache: 'no-store'} : undefined;
+    const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 
     const getRealTerrainElevation = (lngLat) => {
         const elevation = map.queryTerrainElevation(lngLat);
         if (elevation == null) return null;
         
-        const exaggeration = currentStyle?.terrain?.exaggeration || 1.0;
+        const exaggeration = terrainExaggeration || currentStyle?.terrain?.exaggeration || 1.0;
         return elevation / exaggeration;
     };
 
@@ -136,7 +182,7 @@ javascript:
         const target = isStringArg ? null : (arg1?.currentTarget || arg1);
         currentMode = mode;
 
-        document.querySelectorAll('.mode-button').forEach(btn => btn.classList.remove('active'));
+        document.querySelectorAll('#style-mode-switcher .mode-button').forEach(btn => btn.classList.remove('active'));
         (target || document.getElementById(`mode-${mode}`))?.classList.add('active');
 
         document.getElementById('filters-panel').classList.toggle('active', mode === 'filters');
@@ -147,6 +193,17 @@ javascript:
         updateBasemapButton();
     };
 
+    const switchSettingsMode = (arg1, arg2) => {
+        const isStringArg = typeof arg1 === 'string';
+        const mode = isStringArg ? arg1 : arg2;
+        const target = isStringArg ? null : (arg1?.currentTarget || arg1);
+        document.querySelectorAll('#settings-mode-switcher .mode-button').forEach(btn => btn.classList.remove('active'));
+        (target || document.getElementById(`settings-mode-${mode}`))?.classList.add('active');
+
+        document.querySelectorAll('.settings-panel').forEach(panel => panel.classList.remove('active'));
+        document.getElementById(`settings-${mode}-panel`)?.classList.add('active');
+    };
+
     const applyLayerMode = () => {
         Object.keys(layerStates).forEach(layerId => {
             if (map.getLayer(layerId)) {
@@ -156,8 +213,7 @@ javascript:
     };
 
     const applyBasemapVisibility = () => {
-        const isVisible = currentMode === 'filters' ? showBasemapFilters : showBasemapLayers;
-        map?.getLayer?.('preview-basemap-layer') && map.setLayoutProperty('preview-basemap-layer', 'visibility', isVisible ? 'visible' : 'none');
+        map?.getLayer?.('preview-basemap-layer') && map.setLayoutProperty('preview-basemap-layer', 'visibility', showBasemap ? 'visible' : 'none');
     };
 
     const checkStyleResources = (style) => {
@@ -196,7 +252,13 @@ javascript:
             zoom,
             attributionControl: false,
             validateStyle: false,
-            antialias: antialiasEnabled
+            antialias: antialiasEnabled,
+            canvasContextAttributes: {antialias: antialiasEnabled},
+            fadeDuration: tileFadeEnabled ? 300 : 0,
+            transformRequest: (url) => ({
+                url,
+                ...noCacheRequestOptions()
+            })
         });
     };
 
@@ -222,7 +284,7 @@ javascript:
             type: 'raster',
             source: 'preview-basemap',
             layout: {visibility: 'visible'},
-            paint: {'raster-opacity': 0.8, 'raster-fade-duration': 300}
+            paint: {'raster-opacity': basemapOpacity, 'raster-fade-duration': tileFadeEnabled ? 300 : 0}
         });
 
         return modifiedStyle;
@@ -249,7 +311,7 @@ javascript:
         const emptyStyle = {version: 8, sources: {}, layers: []};
 
         style_url
-            ? fetch(style_url)
+            ? fetch(style_url, noCacheRequestOptions())
                 .then(response => response.json())
                 .then(originalStyle => createMapWithStyle(addBasemapToStyle(originalStyle)))
                 .catch(error => {
@@ -319,13 +381,7 @@ javascript:
 
     const onStyleReady = () => {
         const hasTerrain = currentStyle?.terrain;
-        const projectionType = hasTerrain ? 'mercator' : 'globe';
-
-        try {
-            map.setProjection({type: projectionType});
-        } catch (e) {
-            console.warn('Projection setting failed:', e);
-        }
+        applyDefaultProjection();
 
         try {
             map.addControl(new maplibregl.GlobeControl(), 'top-right');
@@ -336,14 +392,20 @@ javascript:
         if (currentStyle?.terrain) {
             const terrainSourceName = currentStyle.terrain.source;
             map.addControl(new maplibregl.TerrainControl({
-                source: terrainSourceName
+                source: terrainSourceName,
+                exaggeration: terrainExaggeration
             }), 'top-right');
 
             initializeContourManager();
+            applyTerrainExaggeration();
         }
 
         initializeTileGridManager();
+        applyBasemapOpacity();
+        applyDebugRenderSettings();
+        applyTileFadeSetting();
         updateTerrainIndicator();
+        updateMapSettingsControls();
     };
 
     const setupMapInteractions = () => {
@@ -415,20 +477,20 @@ javascript:
 
     const setupPerformanceMonitoring = () => {
         [startPerformanceMonitoring, () => requestAnimationFrame(countFrame),
-            updateHoverModeButton, updateBasemapButton, updateAntialiasButton].forEach(fn => fn());
+            updateHoverModeButton, updateBasemapButton, updateAntialiasButton, updateMapCacheButton,
+            updateMapSettingsControls].forEach(fn => fn());
     };
 
     const toggleBasemap = () => {
-        currentMode === 'filters' ? showBasemapFilters = !showBasemapFilters : showBasemapLayers = !showBasemapLayers;
+        showBasemap = !showBasemap;
         applyBasemapVisibility();
         updateBasemapButton();
     };
 
     const updateBasemapButton = () => {
-        const isVisible = currentMode === 'filters' ? showBasemapFilters : showBasemapLayers;
         document.querySelectorAll('button[onclick="toggleBasemap()"]').forEach(btn => {
-            btn.textContent = isVisible ? 'Hide Basemap' : 'Show Basemap';
-            btn.className = `control-button ${isVisible ? 'active' : 'inactive'}`;
+            btn.textContent = showBasemap ? 'Hide Basemap' : 'Show Basemap';
+            btn.className = `control-button ${showBasemap ? 'active' : 'inactive'}`;
         });
     };
 
@@ -436,6 +498,7 @@ javascript:
         const terrainRow = document.getElementById('terrain-row');
         const terrainElement = document.getElementById('terrain-status-value');
         const profileBtn = document.getElementById('profile-mode-btn');
+        const terrainSetting = document.getElementById('terrain-exaggeration-setting');
 
         if (!terrainRow || !terrainElement) return;
 
@@ -445,9 +508,11 @@ javascript:
             terrainElement.textContent = 'is detected';
             terrainElement.className = 'metric-value success';
             profileBtn && (profileBtn.style.display = 'block');
+            terrainSetting && (terrainSetting.style.display = 'flex');
         } else {
             terrainRow.style.display = 'none';
             profileBtn && (profileBtn.style.display = 'none');
+            terrainSetting && (terrainSetting.style.display = 'none');
         }
     };
 
@@ -704,7 +769,7 @@ javascript:
         });
 
         if (map.getLayer('preview-basemap-layer')) {
-            showBasemapLayers = newState;
+            showBasemap = newState;
         }
 
         updateLayerButtons();
@@ -720,7 +785,7 @@ javascript:
         }
 
         if (layerId === 'preview-basemap-layer') {
-            showBasemapLayers = layerStates[layerId];
+            showBasemap = layerStates[layerId];
             updateBasemapButton();
         }
 
@@ -871,19 +936,165 @@ javascript:
         btn.className = `control-button ${antialiasEnabled ? 'active' : 'inactive'}`;
     };
 
-    let layerControlsCollapsed = false;
+    const toggleMapCache = () => {
+        mapCacheDisabled = !mapCacheDisabled;
+        localStorage.setItem('mapCacheDisabled', mapCacheDisabled.toString());
+        window.location.reload();
+    };
+
+    const updateMapCacheButton = () => {
+        const btn = document.getElementById('map-cache-btn');
+        if (!btn) return;
+
+        btn.textContent = `Cache: ${mapCacheDisabled ? 'OFF' : 'ON'}`;
+        btn.className = `control-button ${mapCacheDisabled ? 'cache-off' : 'active'}`;
+        btn.title = mapCacheDisabled ? 'Browser cache is disabled for map requests' : 'Browser cache is enabled for map requests';
+    };
+
+    const getDefaultProjectionType = () => {
+        return currentStyle?.terrain ? 'mercator' : 'globe';
+    };
+
+    const applyDefaultProjection = () => {
+        if (!map) return;
+
+        try {
+            map.setProjection({type: getDefaultProjectionType()});
+        } catch (e) {
+            console.warn('Projection setting failed:', e);
+        }
+    };
+
+    const setBasemapOpacity = (value) => {
+        basemapOpacity = clamp(Number.parseFloat(value) / 100, 0, 1);
+        localStorage.setItem('basemapOpacity', basemapOpacity.toString());
+        applyBasemapOpacity();
+        updateBasemapOpacityControl();
+    };
+
+    const applyBasemapOpacity = () => {
+        if (map?.getLayer?.('preview-basemap-layer')) {
+            map.setPaintProperty('preview-basemap-layer', 'raster-opacity', basemapOpacity);
+        }
+    };
+
+    const updateBasemapOpacityControl = () => {
+        const slider = document.getElementById('basemap-opacity-slider');
+        const value = document.getElementById('basemap-opacity-value');
+        const percent = Math.round(clamp(basemapOpacity, 0, 1) * 100);
+        slider && (slider.value = percent);
+        value && (value.textContent = `${percent}%`);
+    };
+
+    const setTerrainExaggeration = (value) => {
+        terrainExaggeration = clamp(Number.parseFloat(value), 0, 3);
+        localStorage.setItem('terrainExaggeration', terrainExaggeration.toString());
+        applyTerrainExaggeration();
+        updateTerrainExaggerationControl();
+    };
+
+    const applyTerrainExaggeration = () => {
+        if (!map || !currentStyle?.terrain?.source) return;
+
+        try {
+            map.setTerrain({
+                source: currentStyle.terrain.source,
+                exaggeration: terrainExaggeration
+            });
+        } catch (e) {
+            console.warn('Terrain exaggeration setting failed:', e);
+        }
+    };
+
+    const updateTerrainExaggerationControl = () => {
+        const slider = document.getElementById('terrain-exaggeration-slider');
+        const value = document.getElementById('terrain-exaggeration-value');
+        slider && (slider.value = terrainExaggeration);
+        value && (value.textContent = `${terrainExaggeration.toFixed(1)}x`);
+    };
+
+    const toggleCollisionBoxes = () => {
+        collisionBoxesEnabled = !collisionBoxesEnabled;
+        localStorage.setItem('collisionBoxesEnabled', collisionBoxesEnabled.toString());
+        applyDebugRenderSettings();
+        updateDebugRenderButtons();
+    };
+
+    const toggleOverdrawInspector = () => {
+        overdrawInspectorEnabled = !overdrawInspectorEnabled;
+        localStorage.setItem('overdrawInspectorEnabled', overdrawInspectorEnabled.toString());
+        applyDebugRenderSettings();
+        updateDebugRenderButtons();
+    };
+
+    const applyDebugRenderSettings = () => {
+        if (!map) return;
+        map.showCollisionBoxes = collisionBoxesEnabled;
+        map.showOverdrawInspector = overdrawInspectorEnabled;
+    };
+
+    const updateDebugRenderButtons = () => {
+        const collisionBtn = document.getElementById('collision-boxes-btn');
+        const overdrawBtn = document.getElementById('overdraw-inspector-btn');
+        if (collisionBtn) {
+            collisionBtn.textContent = `Collision Boxes: ${collisionBoxesEnabled ? 'ON' : 'OFF'}`;
+            collisionBtn.className = `control-button ${collisionBoxesEnabled ? 'active' : 'inactive'}`;
+        }
+        if (overdrawBtn) {
+            overdrawBtn.textContent = `Overdraw: ${overdrawInspectorEnabled ? 'ON' : 'OFF'}`;
+            overdrawBtn.className = `control-button ${overdrawInspectorEnabled ? 'active' : 'inactive'}`;
+        }
+    };
+
+    const toggleTileFade = () => {
+        tileFadeEnabled = !tileFadeEnabled;
+        localStorage.setItem('tileFadeEnabled', tileFadeEnabled.toString());
+        applyTileFadeSetting();
+        updateTileFadeButton();
+    };
+
+    const applyTileFadeSetting = () => {
+        if (!map?.getStyle()?.layers) return;
+        const fadeDuration = tileFadeEnabled ? 300 : 0;
+
+        map.getStyle().layers.forEach(layer => {
+            if (layer.type === 'raster' && map.getLayer(layer.id)) {
+                map.setPaintProperty(layer.id, 'raster-fade-duration', fadeDuration);
+            }
+        });
+    };
+
+    const updateTileFadeButton = () => {
+        const btn = document.getElementById('tile-fade-btn');
+        if (!btn) return;
+        btn.textContent = `Raster Fade: ${tileFadeEnabled ? 'ON' : 'OFF'}`;
+        btn.className = `control-button ${tileFadeEnabled ? 'active' : 'inactive'}`;
+    };
+
+    const updateMapSettingsControls = () => {
+        updateBasemapOpacityControl();
+        updateTerrainExaggerationControl();
+        updateDebugRenderButtons();
+        updateTileFadeButton();
+    };
+
+    const toggleControlSection = (sectionName) => {
+        const wrapper = document.getElementById(`${sectionName}-wrapper`);
+        const section = document.getElementById(`${sectionName}-section`);
+        const externalToggle = document.getElementById(`${sectionName}-toggle`);
+        const inlineToggle = document.getElementById(`${sectionName}-toggle-inline`);
+        if (!wrapper || !section) return;
 
-    const toggleLayerControls = () => {
-        const wrapper = document.querySelector('.layer-controls-wrapper');
-        const controls = document.getElementById('layer-controls');
-        if (!wrapper || !controls) return;
+        const isCollapsed = section.classList.toggle('collapsed');
+        wrapper.classList.toggle('collapsed', isCollapsed);
 
-        layerControlsCollapsed = !layerControlsCollapsed;
-        controls.classList.toggle('collapsed', layerControlsCollapsed);
-        wrapper.classList.toggle('collapsed', layerControlsCollapsed);
+        const sectionTitle = section.querySelector('.control-section-title')?.textContent || 'section';
+        externalToggle && (externalToggle.title = `Collapse ${sectionTitle}`);
+        inlineToggle && (inlineToggle.title = `Expand ${sectionTitle}`);
     };
 
     window.switchMode = switchMode;
+    window.switchSettingsMode = switchSettingsMode;
     window.toggleBasemap = toggleBasemap;
     window.toggleHoverMode = toggleHoverMode;
     window.toggleAllFilters = () => filters?.toggleAllFilters();
@@ -891,7 +1102,14 @@ javascript:
     window.togglePerformancePanel = togglePerformancePanel;
     window.toggleProfileMode = toggleProfileMode;
     window.toggleAntialias = toggleAntialias;
-    window.toggleLayerControls = toggleLayerControls;
+    window.toggleMapCache = toggleMapCache;
+    window.setBasemapOpacity = setBasemapOpacity;
+    window.setTerrainExaggeration = setTerrainExaggeration;
+    window.toggleCollisionBoxes = toggleCollisionBoxes;
+    window.toggleOverdrawInspector = toggleOverdrawInspector;
+    window.toggleTileFade = toggleTileFade;
+    window.toggleControlSection = toggleControlSection;
+    window.toggleLayerControls = () => toggleControlSection('style-controls');
     window.hideProfile = hideProfile;
     window.toggleTileGrid = toggleTileGrid;
     window.tileGridManager = null;