maplibre-preview 1.6.0 → 1.7.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 17ba0e8d475ee1bb1a213790388e255df8eab1f4a3670382c0c77b3e2967f660
-  data.tar.gz: 4091e3a89317f63690f447167f68c5bdc887d442c33aad1dc418f7ed850a8abc
+  metadata.gz: ab6c314ff00f531f6088b82f2d11b44206fe947f407d512f725ea5efd4df10d1
+  data.tar.gz: 2698dbd6a6c458f4c475d71b5dc549bbfde888c96357c6d18c74060b666ffca7
 SHA512:
-  metadata.gz: 43cb047740512a57492d2e8582e704f3b1a45c61bcc7add1fb8845eea75bf66e05e67e1d86f73003ca4a50aad59204857b6dd816789f68ddc0475cc99a0da4a6
-  data.tar.gz: 8188dbf8a672afd1f42ad70d51315b4741ce1006a2111f37b84ab71c8dfc8353ac34fb8920f72111ddc50ce7bdf038c90fccabcfe66a17d598fa2589bd84ba52
+  metadata.gz: deefd8864adfd9cdd6189f10834bab986c11cfd50e1413eca36f57238ff3d6d3a98eda71bb370e0c14699542abcc9bb8bdde4b271f2693bd802777184539dc9f
+  data.tar.gz: 599cdcbc90b314f3bdc21a765fe6817094cec77073843896fca53b77a7e9be90d5a8ccbfe331dc969dd50fd7dcccb3e3e5721095acead56ee958833d13867a6a

data/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [1.7.2] - 2026-05-14
+
+### Changed
+- **Map settings styling** - rounded all control panel corners and styled range sliders to match the dark UI
+
+## [1.7.0] - 2026-05-14
+
+### Added
+- **Style source parameters** - detect `query_params` / `queryParams` from style sources and source metadata
+- **Style parameters panel** - add a bottom-center collapsible panel for passing detected parameters into style, source, tile, data, and metadata URLs
+- **Date/time parameter inputs** - render date/time-like parameters as `datetime-local` fields and send them as epoch seconds
+
+### Changed
+- **Overlay layout** - stack bottom overlays so Style Parameters, Loading, and Elevation Profile panels do not cover each other
+- **Style parameter state** - persist parameter values per style URL and keep applied values in the page query string
+
 ## [1.6.0] - 2026-05-13
 
 ### Added

data/bin/maplibre-preview

@@ -1,7 +1,7 @@
 #!/usr/bin/env ruby
 # frozen_string_literal: true
 
-require 'maplibre-preview'
+require_relative '../lib/maplibre-preview'
 require 'optparse'
 require 'json'
 require 'fileutils'

data/lib/maplibre-preview/version.rb

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

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

@@ -196,7 +196,7 @@ html
       |   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;
+      |   border-radius: 4px;
       | }
       | .control-section.collapsed {
       |   gap: 0;
@@ -276,7 +276,105 @@ html
       |   color: #6897bb; font-family: 'Courier New', monospace; font-weight: bold;
       | }
       | .setting-range {
-      |   width: 100%; accent-color: #6897bb; cursor: pointer;
+      |   width: 100%; height: 18px; margin: 0; accent-color: #6897bb; cursor: pointer;
+      |   background: transparent; appearance: none; -webkit-appearance: none;
+      | }
+      | .setting-range:focus {
+      |   outline: none;
+      | }
+      | .setting-range:focus-visible::-webkit-slider-thumb {
+      |   box-shadow: 0 0 0 2px #313335, 0 0 0 4px #6897bb;
+      | }
+      | .setting-range:focus-visible::-moz-range-thumb {
+      |   box-shadow: 0 0 0 2px #313335, 0 0 0 4px #6897bb;
+      | }
+      | .setting-range::-webkit-slider-runnable-track {
+      |   height: 6px; background: #313335; border: 1px solid #555555; border-radius: 3px;
+      | }
+      | .setting-range::-moz-range-track {
+      |   height: 6px; background: #313335; border: 1px solid #555555; border-radius: 3px;
+      | }
+      | .setting-range::-moz-range-progress {
+      |   height: 6px; background: #6897bb; border-radius: 3px;
+      | }
+      | .setting-range::-webkit-slider-thumb {
+      |   width: 14px; height: 14px; margin-top: -5px; background: #6897bb;
+      |   border: 1px solid #7aa8cc; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+      |   -webkit-appearance: none; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+      | }
+      | .setting-range::-moz-range-thumb {
+      |   width: 14px; height: 14px; background: #6897bb;
+      |   border: 1px solid #7aa8cc; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+      |   transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+      | }
+      | .setting-range:hover::-webkit-slider-runnable-track {
+      |   border-color: #666666;
+      | }
+      | .setting-range:hover::-moz-range-track {
+      |   border-color: #666666;
+      | }
+      | .setting-range:hover::-webkit-slider-thumb {
+      |   background: #7aa8cc; border-color: #8bb9dd;
+      | }
+      | .setting-range:hover::-moz-range-thumb {
+      |   background: #7aa8cc; border-color: #8bb9dd;
+      | }
+      | .style-parameter-fields {
+      |   display: flex; flex-direction: column; gap: 8px;
+      | }
+      | .style-parameters-overlay {
+      |   position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
+      |   z-index: 1000; width: min(520px, calc(100vw - 32px));
+      |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555;
+      |   border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      |   color: #a9b7c6; overflow: hidden;
+      | }
+      | .style-parameters-header {
+      |   display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
+      |   width: 100%; background: transparent; color: inherit; border: none;
+      |   padding: 10px 12px; cursor: pointer; text-align: left;
+      | }
+      | .style-parameters-header:hover {
+      |   background: rgba(75, 77, 79, 0.95);
+      | }
+      | .style-parameters-title {
+      |   color: #ffc66d; font-size: 11px; font-weight: bold; line-height: 1.2;
+      |   text-transform: uppercase;
+      | }
+      | .style-parameters-summary {
+      |   display: inline-flex; align-items: center; gap: 4px; color: #6897bb;
+      |   font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold;
+      | }
+      | .style-parameters-toggle-icon {
+      |   color: #a9b7c6; font-size: 12px; font-weight: bold; line-height: 1;
+      | }
+      | .style-parameters-overlay:not(.collapsed) .style-parameters-toggle-icon {
+      |   transform: rotate(180deg);
+      | }
+      | .style-parameters-body {
+      |   display: flex; flex-direction: column; gap: 10px;
+      |   max-height: min(48vh, 420px); overflow-y: auto;
+      |   padding: 0 12px 12px; border-top: 1px solid #555555;
+      | }
+      | .style-parameters-overlay.collapsed .style-parameters-body {
+      |   display: none;
+      | }
+      | .style-parameter-row {
+      |   display: flex; flex-direction: column; gap: 4px;
+      | }
+      | .style-parameter-label {
+      |   color: #808080; font-size: 10px; font-weight: bold;
+      |   text-transform: uppercase;
+      | }
+      | .style-parameter-input {
+      |   width: 100%; background: #313335; color: #a9b7c6; border: 1px solid #555555;
+      |   border-radius: 3px; padding: 6px 8px; font-size: 11px; box-sizing: border-box;
+      | }
+      | .style-parameter-input:focus {
+      |   outline: none; border-color: #6897bb; box-shadow: 0 0 0 1px #6897bb;
+      | }
+      | .style-parameter-actions {
+      |   display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
       | }
       | .style-panel {
       |   flex: 1; min-height: 0; max-height: calc(80vh - 245px); width: max-content; max-width: 100%;
@@ -376,7 +474,7 @@ html
       |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555;
       |   border-radius: 6px; padding: 12px 20px; z-index: 1000;
       |   backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-      |   transition: all 0.3s ease; display: none;
+      |   transition: opacity 0.3s ease; display: none;
       | }
       | .loading-progress { text-align: center; color: #a9b7c6; }
       | .loading-text { font-size: 14px; color: #a9b7c6; margin-bottom: 8px; }

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

@@ -77,6 +77,19 @@ ruby:
 #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}
 
@@ -137,10 +150,277 @@ 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);
@@ -150,8 +430,15 @@ javascript:
         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;
@@ -256,7 +543,7 @@ javascript:
             canvasContextAttributes: {antialias: antialiasEnabled},
             fadeDuration: tileFadeEnabled ? 300 : 0,
             transformRequest: (url) => ({
-                url,
+                url: patchRequestUrl(url),
                 ...noCacheRequestOptions()
             })
         });
@@ -306,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, noCacheRequestOptions())
-                .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) => {
@@ -659,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) => {
@@ -736,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();
@@ -1078,6 +1369,88 @@ javascript:
         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`);
@@ -1108,10 +1481,14 @@ javascript:
     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();

data/spec/maplibre_preview_spec.rb

@@ -33,9 +33,19 @@ RSpec.describe MapLibrePreview do
       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('id="style-parameters-panel"')
+      expect(last_response.body).to include('id="style-parameters-toggle"')
+      expect(last_response.body).to include('id="style-parameter-fields"')
+      expect(last_response.body).to include('id="style-parameters-apply"')
+      expect(last_response.body).to include('id="style-parameters-reset"')
       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('styleParameterDefinitions')
+      expect(last_response.body).to include('sourceDeclaredParameters')
+      expect(last_response.body).to include('collectSourceMetadataParameters')
+      expect(last_response.body).to include('applyStyleParametersToStyle')
+      expect(last_response.body).to include('layoutBottomOverlays')
       expect(last_response.body).to include('showCollisionBoxes')
       expect(last_response.body).to include('showOverdrawInspector')
       expect(last_response.body).to include("cache: 'no-store'")
@@ -45,6 +55,8 @@ RSpec.describe MapLibrePreview do
       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')
+      expect(last_response.body).to include('window.applyStyleParameters')
+      expect(last_response.body).to include('window.toggleStyleParametersPanel')
     end
 
     it 'serves all required JavaScript modules' do

metadata

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