maplibre-preview 1.4.3 → 1.7.2

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

@@ -12,33 +12,84 @@ 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}"
 
+  #style-parameters-panel.style-parameters-overlay.collapsed style="display: none;"
+    button.style-parameters-header type="button" onclick="toggleStyleParametersPanel()" id="style-parameters-toggle" aria-expanded="false"
+      span.style-parameters-title Style parameters
+      span.style-parameters-summary
+        span#style-parameters-count 0
+        span params
+      span.style-parameters-toggle-icon ▲
+    .style-parameters-body
+      #style-parameter-fields.style-parameter-fields
+      .style-parameter-actions
+        button.control-button type="button" onclick="applyStyleParameters()" id="style-parameters-apply" Apply
+        button.control-button type="button" onclick="resetStyleParameters()" id="style-parameters-reset" Reset
+
   #version-info.version-info
     a.version-info-version href="https://github.com/artyomb/maplibre-preview" target="_blank" v#{MapLibrePreview::VERSION}
 
@@ -77,11 +128,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;
@@ -93,19 +150,295 @@ javascript:
     let currentProfile = null;
     let contourManager = null;
     let tileGridManager = null;
+    let originalStyle = null;
+    let styleParameterDefinitions = new Map();
+    let styleParameterValues = {};
+    let parameterizedUrlPrefixes = new Set();
 
     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 PAGE_STYLE_PARAMS = new Set(['style', 'style_url']);
+
+    const normalizeQueryParams = (value) => {
+        if (Array.isArray(value)) return value.map(String).filter(Boolean);
+        if (typeof value === 'string') return value.split(',').map(item => item.trim()).filter(Boolean);
+        return [];
+    };
+
+    const inferParameterInputType = (name) => /(^|_|-)(time|date|datetime)($|_|-)/i.test(name) ? 'datetime-local' : 'text';
+
+    const parameterInputToQueryValue = (name, value) => {
+        if (!value) return '';
+        if (inferParameterInputType(name) !== 'datetime-local') return value;
+
+        const parsed = new Date(value);
+        return Number.isNaN(parsed.getTime()) ? value : String(Math.floor(parsed.getTime() / 1000));
+    };
+
+    const queryValueToParameterInput = (name, value) => {
+        if (!value || inferParameterInputType(name) !== 'datetime-local') return value || '';
+
+        const parsed = /^\d+$/.test(String(value)) ? new Date(Number(value) * 1000) : new Date(value);
+        if (Number.isNaN(parsed.getTime())) return '';
+
+        const pad = number => String(number).padStart(2, '0');
+        return `${parsed.getFullYear()}-${pad(parsed.getMonth() + 1)}-${pad(parsed.getDate())}T${pad(parsed.getHours())}:${pad(parsed.getMinutes())}`;
+    };
+
+    const styleParameterStorageKey = (name) => `maplibre-preview:style-parameter:${style_url || 'default'}:${name}`;
+
+    const mergeStyleParameterDefinition = (name, sourceName = null) => {
+        if (!name || PAGE_STYLE_PARAMS.has(name)) return;
+
+        const current = styleParameterDefinitions.get(name) || {name, sources: new Set()};
+        sourceName && current.sources.add(sourceName);
+        styleParameterDefinitions.set(name, current);
+    };
+
+    const sourceDeclaredParameters = (sourceDef) => [
+        ...normalizeQueryParams(sourceDef?.query_params),
+        ...normalizeQueryParams(sourceDef?.queryParams)
+    ];
+
+    const urlPrefixFromTemplate = (template) => {
+        if (!template || typeof template !== 'string') return null;
+        const tokenIndex = template.search(/\{[^}]+\}/);
+        const prefix = tokenIndex >= 0 ? template.slice(0, tokenIndex) : template;
+        return prefix ? new URL(prefix, window.location.href).toString() : null;
+    };
+
+    const rememberParameterizedUrl = (template) => {
+        const prefix = urlPrefixFromTemplate(template);
+        prefix && parameterizedUrlPrefixes.add(prefix);
+    };
+
+    const appendStyleParametersToUrl = (resourceUrl, values = styleParameterValues, parameterNames = Object.keys(values)) => {
+        if (!resourceUrl || !parameterNames.length) return resourceUrl;
+
+        const tokens = [];
+        const tokenizedUrl = String(resourceUrl).replace(/\{[^}]+\}/g, match => {
+            const placeholder = `__MLP_TOKEN_${tokens.length}__`;
+            tokens.push([placeholder, match]);
+            return placeholder;
+        });
+        const url = new URL(tokenizedUrl, window.location.href);
+        parameterNames.forEach(name => {
+            const value = values[name];
+            value === undefined || value === null || value === ''
+                ? url.searchParams.delete(name)
+                : url.searchParams.set(name, String(value));
+        });
+        return tokens.reduce((result, [placeholder, token]) => result.replace(placeholder, token), url.toString());
+    };
+
+    const collectStyleSourceParameters = (style) => {
+        Object.entries(style?.sources || {}).forEach(([sourceName, sourceDef]) => {
+            if (sourceName === 'preview-basemap') return;
+
+            const params = sourceDeclaredParameters(sourceDef);
+            params.forEach(name => mergeStyleParameterDefinition(name, sourceName));
+
+            if (params.length) {
+                [sourceDef.url, sourceDef.meta_url, sourceDef.data].forEach(rememberParameterizedUrl);
+                (sourceDef.tiles || []).forEach(rememberParameterizedUrl);
+            }
+        });
+    };
+
+    const fetchSourceMetadata = async (url) => {
+        try {
+            const response = await fetch(appendStyleParametersToUrl(url), noCacheRequestOptions());
+            return response.ok ? response.json() : null;
+        } catch (e) {
+            console.warn('Could not inspect source metadata:', url, e);
+            return null;
+        }
+    };
+
+    const collectSourceMetadataParameters = async (style) => {
+        const entries = Object.entries(style?.sources || {}).filter(([, sourceDef]) => sourceDef?.url || sourceDef?.meta_url);
+
+        await Promise.all(entries.map(async ([sourceName, sourceDef]) => {
+            const metadataUrls = [sourceDef.meta_url];
+            if (sourceDef.type !== 'image') metadataUrls.push(sourceDef.url);
+
+            for (const metadataUrl of metadataUrls.filter(Boolean)) {
+                const metadata = await fetchSourceMetadata(metadataUrl);
+                if (!metadata) continue;
+
+                const params = normalizeQueryParams(metadata.query_params || metadata.queryParams);
+                params.forEach(name => mergeStyleParameterDefinition(name, sourceName));
+                (metadata.tiles || []).forEach(rememberParameterizedUrl);
+            }
+        }));
+    };
+
+    const getInitialStyleParameterValue = (name) => {
+        const pageParams = new URLSearchParams(window.location.search);
+        const urlValue = pageParams.get(name);
+        if (urlValue !== null) return urlValue;
+
+        try {
+            return localStorage.getItem(styleParameterStorageKey(name)) || '';
+        } catch (e) {
+            return '';
+        }
+    };
+
+    const pageProvidedStyleParameterValues = () => {
+        const values = {};
+        new URLSearchParams(window.location.search).forEach((value, key) => {
+            if (!PAGE_STYLE_PARAMS.has(key)) values[key] = value;
+        });
+        return values;
+    };
+
+    const renderStyleParameterControls = () => {
+        const panel = document.getElementById('style-parameters-panel');
+        const fields = document.getElementById('style-parameter-fields');
+        const count = document.getElementById('style-parameters-count');
+        if (!panel || !fields) return;
+
+        const definitions = [...styleParameterDefinitions.values()].sort((a, b) => a.name.localeCompare(b.name));
+        panel.style.display = definitions.length ? 'block' : 'none';
+        count && (count.textContent = String(definitions.length));
+        fields.innerHTML = '';
+
+        definitions.forEach(definition => {
+            const row = document.createElement('label');
+            row.className = 'style-parameter-row';
+            row.htmlFor = `style-param-${definition.name}`;
+
+            const label = document.createElement('span');
+            label.className = 'style-parameter-label';
+            label.textContent = definition.name;
+
+            const input = document.createElement('input');
+            input.className = 'style-parameter-input';
+            input.id = `style-param-${definition.name}`;
+            input.type = inferParameterInputType(definition.name);
+            input.value = queryValueToParameterInput(definition.name, styleParameterValues[definition.name]);
+            input.dataset.parameterName = definition.name;
+            input.title = [...definition.sources].join(', ');
+
+            row.appendChild(label);
+            row.appendChild(input);
+            fields.appendChild(row);
+        });
+
+        layoutBottomOverlays();
+    };
+
+    const toggleStyleParametersPanel = () => {
+        const panel = document.getElementById('style-parameters-panel');
+        const toggle = document.getElementById('style-parameters-toggle');
+        if (!panel) return;
+
+        const isCollapsed = panel.classList.toggle('collapsed');
+        toggle?.setAttribute('aria-expanded', String(!isCollapsed));
+        layoutBottomOverlays();
+    };
+
+    const initializeStyleParameters = async (style) => {
+        styleParameterDefinitions = new Map();
+        styleParameterValues = {};
+        parameterizedUrlPrefixes = new Set();
+
+        collectStyleSourceParameters(style);
+        styleParameterDefinitions.forEach((definition, name) => {
+            styleParameterValues[name] = getInitialStyleParameterValue(name);
+        });
+        await collectSourceMetadataParameters(style);
+
+        styleParameterDefinitions.forEach((definition, name) => {
+            styleParameterValues[name] ??= getInitialStyleParameterValue(name);
+        });
+
+        renderStyleParameterControls();
+    };
+
+    const getSourceParameterNames = (sourceName, sourceDef) => {
+        const names = new Set(sourceDeclaredParameters(sourceDef));
+        styleParameterDefinitions.forEach((definition, name) => {
+            definition.sources.has(sourceName) && names.add(name);
+        });
+        return [...names];
+    };
+
+    const applyStyleParametersToStyle = (style) => {
+        const modifiedStyle = JSON.parse(JSON.stringify(style));
+
+        Object.entries(modifiedStyle.sources || {}).forEach(([sourceName, sourceDef]) => {
+            if (sourceName === 'preview-basemap') return;
+
+            const parameterNames = getSourceParameterNames(sourceName, sourceDef);
+            if (!parameterNames.length) return;
+
+            typeof sourceDef.url === 'string' && (sourceDef.url = appendStyleParametersToUrl(sourceDef.url, styleParameterValues, parameterNames));
+            typeof sourceDef.meta_url === 'string' && (sourceDef.meta_url = appendStyleParametersToUrl(sourceDef.meta_url, styleParameterValues, parameterNames));
+            typeof sourceDef.data === 'string' && (sourceDef.data = appendStyleParametersToUrl(sourceDef.data, styleParameterValues, parameterNames));
+            Array.isArray(sourceDef.tiles) && (sourceDef.tiles = sourceDef.tiles.map(tileUrl => appendStyleParametersToUrl(tileUrl, styleParameterValues, parameterNames)));
+        });
+
+        return modifiedStyle;
+    };
+
+    const shouldPatchRequestUrl = (resourceUrl) => {
+        if (!Object.values(styleParameterValues).some(value => value !== undefined && value !== null && value !== '')) return false;
+        const absolute = new URL(resourceUrl, window.location.href).toString();
+        return absolute.includes('/rb_tiles/') || [...parameterizedUrlPrefixes].some(prefix => absolute.startsWith(prefix));
+    };
+
+    const patchRequestUrl = (resourceUrl) => shouldPatchRequestUrl(resourceUrl) ? appendStyleParametersToUrl(resourceUrl) : resourceUrl;
+
+    const BOTTOM_OVERLAY_IDS = ['style-parameters-panel', 'loading-indicator', 'profile-overlay'];
+    const BOTTOM_OVERLAY_BASE_OFFSET = 20;
+    const BOTTOM_OVERLAY_GAP = 12;
+
+    const isVisibleBottomOverlay = (element) => {
+        if (!element) return false;
+
+        const style = window.getComputedStyle(element);
+        return style.display !== 'none' && style.visibility !== 'hidden' && element.getClientRects().length > 0;
+    };
+
+    const layoutBottomOverlays = () => {
+        window.requestAnimationFrame(() => {
+            let bottomOffset = BOTTOM_OVERLAY_BASE_OFFSET;
+
+            BOTTOM_OVERLAY_IDS.forEach(id => {
+                const element = document.getElementById(id);
+                if (!element) return;
+
+                if (!isVisibleBottomOverlay(element)) {
+                    element.style.bottom = '';
+                    return;
+                }
+
+                element.style.bottom = `${bottomOffset}px`;
+                bottomOffset += element.offsetHeight + BOTTOM_OVERLAY_GAP;
+            });
+        });
+    };
 
     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;
     };
 
-    const showLoading = () => document.getElementById('loading-indicator').style.display = 'block';
-    const hideLoading = () => document.getElementById('loading-indicator').style.display = 'none';
+    const showLoading = () => {
+        document.getElementById('loading-indicator').style.display = 'block';
+        layoutBottomOverlays();
+    };
+
+    const hideLoading = () => {
+        document.getElementById('loading-indicator').style.display = 'none';
+        layoutBottomOverlays();
+    };
 
     const updateLoadingProgress = () => {
         let progress = 0;
@@ -136,7 +469,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 +480,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 +500,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 +539,13 @@ javascript:
             zoom,
             attributionControl: false,
             validateStyle: false,
-            antialias: antialiasEnabled
+            antialias: antialiasEnabled,
+            canvasContextAttributes: {antialias: antialiasEnabled},
+            fadeDuration: tileFadeEnabled ? 300 : 0,
+            transformRequest: (url) => ({
+                url: patchRequestUrl(url),
+                ...noCacheRequestOptions()
+            })
         });
     };
 
@@ -222,7 +571,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;
@@ -244,19 +593,21 @@ javascript:
         popup.setLngLat(e.lngLat).setHTML(tooltips.join('<br>')).addTo(map);
     };
 
-    const initializeMap = () => {
+    const initializeMap = async () => {
         showLoading();
         const emptyStyle = {version: 8, sources: {}, layers: []};
 
-        style_url
-            ? fetch(style_url)
-                .then(response => response.json())
-                .then(originalStyle => createMapWithStyle(addBasemapToStyle(originalStyle)))
-                .catch(error => {
-                    console.error('Style loading error:', error);
-                    createMapWithStyle(addBasemapToStyle(emptyStyle));
-                })
-            : createMapWithStyle(addBasemapToStyle(emptyStyle));
+        try {
+            originalStyle = style_url
+                ? await fetch(appendStyleParametersToUrl(style_url, pageProvidedStyleParameterValues(), Object.keys(pageProvidedStyleParameterValues())), noCacheRequestOptions()).then(response => response.json())
+                : emptyStyle;
+        } catch (error) {
+            console.error('Style loading error:', error);
+            originalStyle = emptyStyle;
+        }
+
+        await initializeStyleParameters(originalStyle);
+        createMapWithStyle(addBasemapToStyle(applyStyleParametersToStyle(originalStyle)));
     };
 
     const createMapWithStyle = (style) => {
@@ -319,13 +670,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 +681,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 +766,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 +787,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 +797,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');
         }
     };
 
@@ -594,6 +948,7 @@ javascript:
         [header, stats, chart].forEach(el => overlay.appendChild(el));
         document.getElementById('map-container').appendChild(overlay);
         setTimeout(() => drawSimpleProfileChart(profile), 10);
+        layoutBottomOverlays();
     };
 
     const drawSimpleProfileChart = (profile) => {
@@ -671,6 +1026,7 @@ javascript:
 
     const hideProfile = () => {
         document.getElementById('profile-overlay')?.remove();
+        layoutBottomOverlays();
         map.getLayer('profile-line') && (map.removeLayer('profile-line'), map.removeSource('profile-line'));
         map.getLayer('temporary-line') && (map.removeLayer('temporary-line'), map.removeSource('temporary-line'));
         hideMapMarker();
@@ -704,7 +1060,7 @@ javascript:
         });
 
         if (map.getLayer('preview-basemap-layer')) {
-            showBasemapLayers = newState;
+            showBasemap = newState;
         }
 
         updateLayerButtons();
@@ -720,7 +1076,7 @@ javascript:
         }
 
         if (layerId === 'preview-basemap-layer') {
-            showBasemapLayers = layerStates[layerId];
+            showBasemap = layerStates[layerId];
             updateBasemapButton();
         }
 
@@ -871,19 +1227,247 @@ 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 syncStyleParameterUrlState = () => {
+        const url = new URL(window.location.href);
+        Object.entries(styleParameterValues).forEach(([name, value]) => {
+            value === undefined || value === null || value === ''
+                ? url.searchParams.delete(name)
+                : url.searchParams.set(name, String(value));
+        });
+        window.history.replaceState({}, '', url.toString());
+    };
+
+    const readStyleParameterFormValues = () => {
+        document.querySelectorAll('.style-parameter-input').forEach(input => {
+            const name = input.dataset.parameterName;
+            if (!name) return;
+            styleParameterValues[name] = parameterInputToQueryValue(name, input.value);
+
+            try {
+                styleParameterValues[name]
+                    ? localStorage.setItem(styleParameterStorageKey(name), styleParameterValues[name])
+                    : localStorage.removeItem(styleParameterStorageKey(name));
+            } catch (e) {
+                console.warn('Could not persist style parameter:', name, e);
+            }
+        });
+    };
+
+    const resetRuntimeStateBeforeReload = () => {
+        stopPerformanceMonitoring();
+        tileGridManager?.cleanup();
+        contourManager?.cleanup();
+        document.getElementById('filter-buttons') && (document.getElementById('filter-buttons').innerHTML = '');
+        document.getElementById('layer-buttons') && (document.getElementById('layer-buttons').innerHTML = '');
+        Object.keys(layerStates).forEach(key => delete layerStates[key]);
+        Object.keys(layerIdToDomId).forEach(key => delete layerIdToDomId[key]);
+        filters = null;
+        contourManager = null;
+        tileGridManager = null;
+        window.tileGridManager = null;
+        currentStyle = null;
+        styleLoaded = false;
+        resourcesLoaded = 0;
+        totalResources = 0;
+        tilesLoaded = 0;
+        tilesTotal = 0;
+        profilePoints = [];
+        currentProfile = null;
+        profileLine = null;
+        hideProfile();
+        hideElevationTooltip();
+    };
+
+    const reloadStyleWithParameters = () => {
+        if (!originalStyle) return;
+
+        showLoading();
+        resetRuntimeStateBeforeReload();
+        map?.remove();
+        map = null;
+        createMapWithStyle(addBasemapToStyle(applyStyleParametersToStyle(originalStyle)));
+    };
+
+    const applyStyleParameters = () => {
+        readStyleParameterFormValues();
+        syncStyleParameterUrlState();
+        renderStyleParameterControls();
+        reloadStyleWithParameters();
+    };
+
+    const resetStyleParameters = () => {
+        Object.keys(styleParameterValues).forEach(name => {
+            styleParameterValues[name] = '';
+            try {
+                localStorage.removeItem(styleParameterStorageKey(name));
+            } catch (e) {
+                console.warn('Could not clear style parameter:', name, e);
+            }
+        });
+        syncStyleParameterUrlState();
+        renderStyleParameterControls();
+        reloadStyleWithParameters();
+    };
+
+    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,9 +1475,20 @@ 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.applyStyleParameters = applyStyleParameters;
+    window.resetStyleParameters = resetStyleParameters;
+    window.toggleStyleParametersPanel = toggleStyleParametersPanel;
+    window.toggleControlSection = toggleControlSection;
+    window.toggleLayerControls = () => toggleControlSection('style-controls');
     window.hideProfile = hideProfile;
     window.toggleTileGrid = toggleTileGrid;
     window.tileGridManager = null;
+    window.addEventListener('resize', layoutBottomOverlays);
 
     initializeMap();