maplibre-preview 1.4.3 → 1.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ff0508a77186b4b42b987de36d9f307556f182cd184d62a206963d211719963f
-  data.tar.gz: d547c84b4b1ca39ffe52b065a493dbec416d6aa5c5829c401bcafebd0dd9ad6f
+  metadata.gz: 17ba0e8d475ee1bb1a213790388e255df8eab1f4a3670382c0c77b3e2967f660
+  data.tar.gz: 4091e3a89317f63690f447167f68c5bdc887d442c33aad1dc418f7ed850a8abc
 SHA512:
-  metadata.gz: 61b409020f21b43cf1b7cdb75ff6ea28980927d73cd60aa9e3acb7105eda17b9843c2789ef6eaa03437c8068b028441c01f78487b5e8df294fe0aecae478d4c1
-  data.tar.gz: b066ef7e588b70d8ececa8eb3d90c66dae571f2ec15082dc2859b27ac3834d605b35f6e5722f4684fd0ba21ab21d45b21423de82794f3ae9d7f03a5459b849c4
+  metadata.gz: 43cb047740512a57492d2e8582e704f3b1a45c61bcc7add1fb8845eea75bf66e05e67e1d86f73003ca4a50aad59204857b6dd816789f68ddc0475cc99a0da4a6
+  data.tar.gz: 8188dbf8a672afd1f42ad70d51315b4741ce1006a2111f37b84ab71c8dfc8353ac34fb8920f72111ddc50ce7bdf038c90fccabcfe66a17d598fa2589bd84ba52

data/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [1.6.0] - 2026-05-13
+
+### Added
+- **Basemap opacity control** - added a Map Settings slider for changing preview basemap transparency without changing the tested style
+- **Terrain exaggeration control** - added a terrain-only slider that updates `map.setTerrain({ source, exaggeration })`
+- **MapLibre debug controls** - added Collision Boxes, Overdraw, and Raster Fade toggles for label placement, dense style, and raster/DEM diagnostics
+
+### Changed
+- **Tile Boundaries naming** - renamed the Tile Grid UI to Tile Boundaries to clarify that it uses MapLibre `showTileBoundaries`
+- **Map Settings layout** - added compact setting rows and range styling for view-mode map controls
+
+## [1.5.1] - 2026-05-13
+
+### Changed
+- **Map control layout** - split map settings and style controls into independent panels with separate collapse controls
+- **Panel sizing** - adjusted map settings, filters, and layers panels to size from their visible content
+
+### Fixed
+- **Filter and layer scrolling** - restored internal scrolling for large filter and layer lists after the panel layout split
+
+## [1.5.0] - 2026-05-13
+
+### Added
+- **Map request cache toggle** - added a development mode that disables browser HTTP cache for style and MapLibre resource requests
+
+## [1.4.4] - 2026-05-13
+
+### Fixed
+- **Filter labels** - normalize object-based localized labels to display `title`, `name`, or `label` instead of `[object Object]`
+
 ## [1.4.2] - 2026-04-23
 
 ### Changed

data/README.md

@@ -125,6 +125,19 @@ The gem uses fixed configurations for optimal compatibility:
 
 **Style URL**: Pass via URL parameter `?style_url=https://example.com/style.json`
 
+## Map Settings
+
+The preview UI keeps focused MapLibre controls that are useful for tile, style, and terrain services:
+
+- **Basemap opacity**: changes the injected OpenStreetMap preview layer opacity while preserving the tested style.
+- **Terrain exaggeration**: appears for styles with `terrain` and updates `map.setTerrain({ source, exaggeration })`.
+- **Antialias**: reloads the WebGL context with antialiasing enabled or disabled.
+- **Cache**: disables browser cache for style and map requests when comparing freshly generated tiles/styles.
+- **Tile Boundaries**: toggles MapLibre tile boundary overlay, including tile coordinate/zoom diagnostics in pitched views, and visible tile count diagnostics.
+- **Collision Boxes**: toggles MapLibre symbol collision boxes for label/icon debugging.
+- **Overdraw**: toggles MapLibre overdraw inspection for dense mixed styles and expensive layers.
+- **Raster Fade**: toggles raster tile fade duration for raster/DEM cache and reconstruction checks.
+
 ## API Reference
 
 ### Sinatra Extension

data/docs/README_RU.md

@@ -125,6 +125,19 @@ Gem использует фиксированные настройки:
 
 **URL стиля**: Передается через параметр URL `?style_url=https://example.com/style.json`
 
+## Настройки карты
+
+Интерфейс preview оставляет только те настройки MapLibre, которые полезны для сервисов тайлов, стилей и рельефа:
+
+- **Basemap opacity**: меняет прозрачность добавленной preview-подложки OpenStreetMap, не меняя тестируемый стиль.
+- **Terrain exaggeration**: появляется для стилей с `terrain` и обновляет `map.setTerrain({ source, exaggeration })`.
+- **Antialias**: перезагружает WebGL context с включенным или выключенным antialiasing.
+- **Cache**: отключает browser cache для style и map requests при проверке свежесгенерированных тайлов/стилей.
+- **Tile Boundaries**: включает MapLibre overlay границ тайлов, включая диагностику координат/зумов тайлов при наклоне карты, и счетчик видимых тайлов.
+- **Collision Boxes**: включает MapLibre symbol collision boxes для отладки подписей и иконок.
+- **Overdraw**: включает MapLibre overdraw inspection для плотных mixed styles и дорогих слоев.
+- **Raster Fade**: включает или выключает fade duration у raster tiles для проверки raster/DEM cache и reconstruction.
+
 ## Справочник API
 
 ### Расширение Sinatra

data/lib/maplibre-preview/public/js/filters.js

@@ -37,16 +37,28 @@ class Filters {
         const languagePriority = ['en-US', 'en', 'ru'];
 
         for (const lang of languagePriority) {
-            if (locale[lang]?.[filterId]) return locale[lang][filterId];
+            const label = this.normalizeLocalizedFilterName(locale[lang]?.[filterId]);
+            if (label) return label;
         }
 
         for (const lang in locale) {
-            if (locale[lang]?.[filterId]) return locale[lang][filterId];
+            const label = this.normalizeLocalizedFilterName(locale[lang]?.[filterId]);
+            if (label) return label;
         }
 
         return filterId;
     }
 
+    normalizeLocalizedFilterName(value) {
+        if (!value) return null;
+        if (typeof value === 'string') return value;
+        if (typeof value === 'object') {
+            return value.title || value.name || value.label || null;
+        }
+
+        return String(value);
+    }
+
     applyFilterMode() {
         if (this.isUpdating) return;
         this.isUpdating = true;

data/lib/maplibre-preview/public/js/tilegrid.js

@@ -1,5 +1,5 @@
 /**
- * TileGridManager - manages tile boundaries visualization and tile statistics
+ * TileGridManager - manages MapLibre tile boundary overlay and tile statistics
  */
 class TileGridManager {
     constructor(options) {
@@ -27,7 +27,7 @@ class TileGridManager {
 
         this.panelContainer.innerHTML = `
             <div class="tilegrid-header">
-                <span class="tilegrid-title">Tile Grid</span>
+                <span class="tilegrid-title">Tile Boundaries</span>
                 <button class="tilegrid-close" onclick="tileGridManager.toggle()">×</button>
             </div>
             <div class="tilegrid-stats">
@@ -36,7 +36,7 @@ class TileGridManager {
             </div>
             <div class="tilegrid-controls">
                 <label class="tilegrid-checkbox-label">
-                    <span>Show tile borders</span>
+                    <span>Show boundary overlay</span>
                     <input type="checkbox" id="tilegrid-borders-checkbox" checked onchange="tileGridManager.toggleBorders(this.checked)">
                     <span class="tilegrid-checkbox-custom"></span>
                 </label>
@@ -118,7 +118,7 @@ class TileGridManager {
 
         const btn = document.getElementById('tilegrid-mode-btn');
         if (btn) {
-            btn.textContent = this.isVisible ? 'Hide Tile Grid' : 'Tile Grid';
+            btn.textContent = this.isVisible ? 'Hide Tile Boundaries' : 'Tile Boundaries';
             btn.className = `control-button ${this.isVisible ? 'active' : ''}`;
         }
 
@@ -171,4 +171,3 @@ class TileGridManager {
         }
     }
 }
-

data/lib/maplibre-preview/version.rb

@@ -1,3 +1,3 @@
 module MapLibrePreview
-  VERSION = '1.4.3'
+  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;

data/spec/maplibre_preview_spec.rb

@@ -16,6 +16,37 @@ RSpec.describe MapLibrePreview do
       expect(last_response.body).to include('d3')
     end
 
+    it 'renders map cache toggle wiring' do
+      get '/?style_url=https://example.com/style.json'
+      expect(last_response).to be_ok
+
+      expect(last_response.body).to include('Map Settings')
+      expect(last_response.body).to include('Style Controls')
+      expect(last_response.body).to include('id="settings-mode-switcher"')
+      expect(last_response.body).to include('id="style-mode-switcher"')
+      expect(last_response.body).to include('id="map-settings-toggle"')
+      expect(last_response.body).to include('id="style-controls-toggle"')
+      expect(last_response.body).to include('toggleControlSection')
+      expect(last_response.body).to include('id="map-cache-btn"')
+      expect(last_response.body).to include('id="basemap-opacity-slider"')
+      expect(last_response.body).to include('id="terrain-exaggeration-slider"')
+      expect(last_response.body).to include('id="collision-boxes-btn"')
+      expect(last_response.body).to include('id="overdraw-inspector-btn"')
+      expect(last_response.body).to include('id="tile-fade-btn"')
+      expect(last_response.body).to include('mapCacheDisabled')
+      expect(last_response.body).to include('basemapOpacity')
+      expect(last_response.body).to include('terrainExaggeration')
+      expect(last_response.body).to include('showCollisionBoxes')
+      expect(last_response.body).to include('showOverdrawInspector')
+      expect(last_response.body).to include("cache: 'no-store'")
+      expect(last_response.body).to include('cache-off')
+      expect(last_response.body).to include('transformRequest')
+      expect(last_response.body).to include('canvasContextAttributes')
+      expect(last_response.body).to include('raster-fade-duration')
+      expect(last_response.body).to include('window.toggleMapCache')
+      expect(last_response.body).to include('window.switchSettingsMode')
+    end
+
     it 'serves all required JavaScript modules' do
       %w[/js/filters.js /js/contour.js /js/tilegrid.js /vendor/maplibre-gl/maplibre-gl.js /vendor/maplibre-contour/index.min.js /vendor/d3/d3.v7.min.js].each do |js_file|
         get js_file

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: maplibre-preview
 version: !ruby/object:Gem::Version
-  version: 1.4.3
+  version: 1.6.0
 platform: ruby
 authors:
 - Alexander Ludov
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-04-23 00:00:00.000000000 Z
+date: 2026-05-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rack