maplibre-preview 1.8.0 → 1.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 61c7dd8ecf3753aa43ba5272cc06dab258cbb643824e74336e21e07680795cd6
-  data.tar.gz: 6a008af2ffe1b2f3331dc752ab36041767299cc38271f9f9433567f268952198
+  metadata.gz: 2c43caaa2de2305aa8211b7d1de99aaf7337b6162d7d99a448f73007c717591a
+  data.tar.gz: b16f170dc316e26844ffa6dd44d8401d38ba9128a9cf0dc13bd3abd1b30d0507
 SHA512:
-  metadata.gz: c75eede1968d1ddfaa8c388de5c827bf6f8e27f5bcc628938aca1c61f7ccf2896cb70f9a498f6262f352a4c1a211881a87ac09133da2445cd3e6c02f6fa42aac
-  data.tar.gz: 435d1192991bacd4730d547eb3f580f99c8d287fabb29e221432a44b309c6b73e25c198f6abea453e0a9ab0ba5d4de6b83adff1fcd4e68cbd73ec03c67e9f22e
+  metadata.gz: 2401ce59b8a156a2b34ddeecc36a3c6ad4ae161f41fcf998d3e2a6c788cf096f62fde591327948bdf18f1625b8eb9d0e55f226f8d758f7d6b0d8524087bc43f1
+  data.tar.gz: ad6e8ab6f576675903edda6b0859df42ef467dffff70e651eaacb36bbb8c906806b7d3bfec2d29545bcad663bcc99a114d88b912edd22caf115d5b7ecbdada0f

data/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.9.0] - 2026-05-14
+
+### Added
+- **Temporal parameter picker** - added a custom calendar and time picker for date/time-like style parameters
+- **Style parameter context** - show source/layer counts and localized usage hints for each detected style parameter
+
+### Changed
+- **Style parameter URL matching** - track source-specific parameterized URL rules and append only the parameters declared for the matching source
+- **Temporal parameter inputs** - use the custom picker for temporal parameters while keeping query values normalized to epoch seconds
+
+### Fixed
+- **Source metadata inspection** - fetch source metadata without pre-appending parameter values so metadata-declared parameters can be discovered reliably
+- **Parameterized tile requests** - removed the broad `/rb_tiles/` heuristic in favor of explicit source metadata and URL prefix matching
+
 ## [1.8.0] - 2026-05-14
 
 ### Added

data/lib/maplibre-preview/public/css/temporal_picker.css

@@ -0,0 +1,164 @@
+.temporal-picker-popover {
+    position: fixed;
+    z-index: 1300;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    background: rgba(49, 51, 53, 0.98);
+    border: 1px solid #555555;
+    border-radius: 4px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+    color: #a9b7c6;
+    padding: 12px;
+}
+
+.temporal-picker-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.temporal-picker-title {
+    color: #ffc66d;
+    font-size: 11px;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.temporal-picker-nav {
+    display: inline-flex;
+    gap: 4px;
+}
+
+.temporal-picker-nav-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: #3c3f41;
+    color: #a9b7c6;
+    border: 1px solid #555555;
+    border-radius: 3px;
+    font-size: 16px;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.temporal-picker-nav-button:hover {
+    background: #5a5d5f;
+    border-color: #666666;
+}
+
+.temporal-picker-calendar {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 4px;
+}
+
+.temporal-picker-weekday {
+    color: #808080;
+    font-size: 10px;
+    font-weight: bold;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.temporal-picker-day {
+    height: 28px;
+    background: transparent;
+    color: #a9b7c6;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    font-size: 11px;
+    cursor: pointer;
+}
+
+.temporal-picker-day:hover {
+    background: #4b4d4f;
+    border-color: #555555;
+}
+
+.temporal-picker-day.muted {
+    color: #666666;
+}
+
+.temporal-picker-day.today {
+    border-color: #6897bb;
+    color: #ffffff;
+}
+
+.temporal-picker-day.selected {
+    background: #6897bb;
+    border-color: #7aa8cc;
+    color: #ffffff;
+    font-weight: bold;
+}
+
+.temporal-picker-time {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    gap: 6px;
+    color: #808080;
+    font-family: 'Courier New', monospace;
+    font-size: 12px;
+}
+
+.temporal-picker-select {
+    width: 100%;
+    background: #3c3f41;
+    color: #a9b7c6;
+    border: 1px solid #555555;
+    border-radius: 3px;
+    padding: 6px 8px;
+    font-family: 'Courier New', monospace;
+    font-size: 11px;
+    color-scheme: dark;
+}
+
+.temporal-picker-select:focus {
+    outline: none;
+    border-color: #6897bb;
+    box-shadow: 0 0 0 1px #6897bb;
+}
+
+.temporal-picker-footer {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 6px;
+}
+
+.temporal-picker-button {
+    background: #3c3f41;
+    color: #a9b7c6;
+    border: 1px solid #555555;
+    border-radius: 3px;
+    padding: 6px 8px;
+    font-size: 11px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.temporal-picker-button:hover {
+    background: #5a5d5f;
+    border-color: #666666;
+}
+
+.temporal-picker-button:focus {
+    outline: none;
+    border-color: #6897bb;
+    box-shadow: 0 0 0 1px #6897bb;
+}
+
+.temporal-picker-button.primary {
+    background: #6897bb;
+    border-color: #7aa8cc;
+    color: #ffffff;
+}
+
+.temporal-picker-button.primary:hover {
+    background: #7aa8cc;
+    border-color: #8bb9dd;
+}

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

@@ -0,0 +1,247 @@
+(function () {
+    let activePicker = null;
+
+    const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+
+    const parseInputDate = (value) => {
+        const parsed = value ? new Date(value) : new Date();
+        return Number.isNaN(parsed.getTime()) ? new Date() : parsed;
+    };
+
+    const formatInputDate = (date) => {
+        const pad = number => String(number).padStart(2, '0');
+        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+    };
+
+    const close = () => {
+        if (!activePicker) return;
+
+        activePicker.cleanup?.();
+        activePicker.element.remove();
+        activePicker = null;
+    };
+
+    const position = (input, picker) => {
+        const rect = input.getBoundingClientRect();
+        const pickerWidth = Math.min(336, window.innerWidth - 16);
+        const left = clamp(rect.left, 8, window.innerWidth - pickerWidth - 8);
+        const aboveTop = rect.top - picker.offsetHeight - 8;
+        const belowTop = rect.bottom + 8;
+        const top = aboveTop >= 8 ? aboveTop : Math.min(belowTop, window.innerHeight - picker.offsetHeight - 8);
+
+        picker.style.width = `${pickerWidth}px`;
+        picker.style.left = `${left}px`;
+        picker.style.top = `${Math.max(8, top)}px`;
+    };
+
+    const render = (state) => {
+        const {element, input, onApply, onClear} = state;
+        const monthDate = state.visibleMonth;
+        const selected = state.selectedDate;
+        const today = new Date();
+        const monthLabel = monthDate.toLocaleDateString('en-US', {month: 'long', year: 'numeric'});
+        const monthStart = new Date(monthDate.getFullYear(), monthDate.getMonth(), 1);
+        const firstOffset = (monthStart.getDay() + 6) % 7;
+        const firstCell = new Date(monthStart);
+        firstCell.setDate(monthStart.getDate() - firstOffset);
+
+        element.innerHTML = '';
+
+        const header = document.createElement('div');
+        header.className = 'temporal-picker-header';
+
+        const title = document.createElement('div');
+        title.className = 'temporal-picker-title';
+        title.textContent = monthLabel;
+
+        const nav = document.createElement('div');
+        nav.className = 'temporal-picker-nav';
+        [
+            ['Previous month', -1, '<'],
+            ['Next month', 1, '>']
+        ].forEach(([label, delta, text]) => {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'temporal-picker-nav-button';
+            button.title = label;
+            button.setAttribute('aria-label', label);
+            button.textContent = text;
+            button.addEventListener('click', () => {
+                state.visibleMonth = new Date(monthDate.getFullYear(), monthDate.getMonth() + delta, 1);
+                render(state);
+            });
+            nav.appendChild(button);
+        });
+
+        header.appendChild(title);
+        header.appendChild(nav);
+        element.appendChild(header);
+
+        const calendar = document.createElement('div');
+        calendar.className = 'temporal-picker-calendar';
+        ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].forEach(day => {
+            const cell = document.createElement('div');
+            cell.className = 'temporal-picker-weekday';
+            cell.textContent = day;
+            calendar.appendChild(cell);
+        });
+
+        for (let index = 0; index < 42; index += 1) {
+            const dayDate = new Date(firstCell);
+            dayDate.setDate(firstCell.getDate() + index);
+
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'temporal-picker-day';
+            dayDate.getMonth() !== monthDate.getMonth() && button.classList.add('muted');
+            dayDate.toDateString() === today.toDateString() && button.classList.add('today');
+            dayDate.toDateString() === selected.toDateString() && button.classList.add('selected');
+            button.textContent = String(dayDate.getDate());
+            button.addEventListener('click', () => {
+                state.selectedDate = new Date(
+                    dayDate.getFullYear(),
+                    dayDate.getMonth(),
+                    dayDate.getDate(),
+                    selected.getHours(),
+                    selected.getMinutes()
+                );
+                state.visibleMonth = new Date(dayDate.getFullYear(), dayDate.getMonth(), 1);
+                render(state);
+            });
+            calendar.appendChild(button);
+        }
+
+        element.appendChild(calendar);
+
+        const timeRow = document.createElement('div');
+        timeRow.className = 'temporal-picker-time';
+
+        const hourSelect = document.createElement('select');
+        hourSelect.className = 'temporal-picker-select';
+        hourSelect.setAttribute('aria-label', 'Hour');
+
+        const minuteSelect = document.createElement('select');
+        minuteSelect.className = 'temporal-picker-select';
+        minuteSelect.setAttribute('aria-label', 'Minute');
+
+        for (let hour = 0; hour < 24; hour += 1) {
+            const option = document.createElement('option');
+            option.value = String(hour);
+            option.textContent = String(hour).padStart(2, '0');
+            hourSelect.appendChild(option);
+        }
+        for (let minute = 0; minute < 60; minute += 1) {
+            const option = document.createElement('option');
+            option.value = String(minute);
+            option.textContent = String(minute).padStart(2, '0');
+            minuteSelect.appendChild(option);
+        }
+
+        hourSelect.value = String(selected.getHours());
+        minuteSelect.value = String(selected.getMinutes());
+
+        const updateTime = () => {
+            state.selectedDate = new Date(
+                state.selectedDate.getFullYear(),
+                state.selectedDate.getMonth(),
+                state.selectedDate.getDate(),
+                Number(hourSelect.value),
+                Number(minuteSelect.value)
+            );
+        };
+
+        hourSelect.addEventListener('change', updateTime);
+        minuteSelect.addEventListener('change', updateTime);
+
+        timeRow.appendChild(hourSelect);
+        timeRow.appendChild(document.createTextNode(':'));
+        timeRow.appendChild(minuteSelect);
+        element.appendChild(timeRow);
+
+        const footer = document.createElement('div');
+        footer.className = 'temporal-picker-footer';
+
+        const clearButton = document.createElement('button');
+        clearButton.type = 'button';
+        clearButton.className = 'temporal-picker-button secondary';
+        clearButton.textContent = 'Clear';
+        clearButton.addEventListener('click', () => {
+            onClear?.();
+            close();
+        });
+
+        const todayButton = document.createElement('button');
+        todayButton.type = 'button';
+        todayButton.className = 'temporal-picker-button secondary';
+        todayButton.textContent = 'Today';
+        todayButton.addEventListener('click', () => {
+            state.selectedDate = new Date();
+            state.visibleMonth = new Date(state.selectedDate.getFullYear(), state.selectedDate.getMonth(), 1);
+            render(state);
+        });
+
+        const applyButton = document.createElement('button');
+        applyButton.type = 'button';
+        applyButton.className = 'temporal-picker-button primary';
+        applyButton.textContent = 'Apply';
+        applyButton.addEventListener('click', () => {
+            onApply?.(formatInputDate(state.selectedDate));
+            close();
+        });
+
+        footer.appendChild(clearButton);
+        footer.appendChild(todayButton);
+        footer.appendChild(applyButton);
+        element.appendChild(footer);
+
+        position(input, element);
+    };
+
+    const open = (input, options = {}) => {
+        if (activePicker?.input === input) return;
+        close();
+
+        const picker = document.createElement('div');
+        picker.className = 'temporal-picker-popover';
+        picker.setAttribute('role', 'dialog');
+        picker.setAttribute('aria-label', `Select ${input.dataset.parameterName || 'date and time'}`);
+        document.body.appendChild(picker);
+
+        const selectedDate = parseInputDate(input.value);
+        const state = {
+            element: picker,
+            input,
+            selectedDate,
+            visibleMonth: new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1),
+            onApply: options.onApply || (value => { input.value = value; }),
+            onClear: options.onClear || (() => { input.value = ''; })
+        };
+
+        const outsideHandler = (event) => {
+            if (picker.contains(event.target) || event.target === input) return;
+            close();
+        };
+        const keyHandler = (event) => event.key === 'Escape' && close();
+        const repositionHandler = () => position(input, picker);
+
+        activePicker = {
+            element: picker,
+            input,
+            cleanup: () => {
+                document.removeEventListener('mousedown', outsideHandler);
+                document.removeEventListener('keydown', keyHandler);
+                window.removeEventListener('resize', repositionHandler);
+                window.removeEventListener('scroll', repositionHandler, true);
+            }
+        };
+
+        document.addEventListener('mousedown', outsideHandler);
+        document.addEventListener('keydown', keyHandler);
+        window.addEventListener('resize', repositionHandler);
+        window.addEventListener('scroll', repositionHandler, true);
+
+        render(state);
+    };
+
+    window.TemporalPicker = {open, close};
+})();

data/lib/maplibre-preview/version.rb

@@ -1,3 +1,3 @@
 module MapLibrePreview
-  VERSION = '1.8.0'
+  VERSION = '1.9.0'
 end

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

@@ -7,6 +7,7 @@ html
     - base_path = request.script_name
     link[rel="icon" type="image/png" href="#{base_path}/icons/favicon.png"]
     link[href="#{base_path}/vendor/maplibre-gl/maplibre-gl.css" rel='stylesheet']
+    link[href="#{base_path}/css/temporal_picker.css" rel='stylesheet']
     script[src="#{base_path}/vendor/maplibre-gl/maplibre-gl.js"]
     script[src="#{base_path}/vendor/maplibre-contour/index.min.js"]
     script[src="#{base_path}/vendor/d3/d3.v7.min.js"]
@@ -14,6 +15,7 @@ html
     script[src="#{base_path}/js/filters.js"]
     script[src="#{base_path}/js/contour.js"]
     script[src="#{base_path}/js/tilegrid.js"]
+    script[src="#{base_path}/js/temporal_picker.js"]
     style
       | * { margin: 0; padding: 0; box-sizing: border-box; }
       | html { height: 100%; }
@@ -387,17 +389,44 @@ html
       | .style-parameter-row {
       |   display: flex; flex-direction: column; gap: 4px;
       | }
+      | .style-parameter-header {
+      |   display: flex; align-items: center; justify-content: space-between; gap: 8px;
+      | }
       | .style-parameter-label {
       |   color: #808080; font-size: 10px; font-weight: bold;
       |   text-transform: uppercase;
       | }
+      | .style-parameter-counts {
+      |   color: #6897bb; font-family: 'Courier New', monospace; font-size: 10px;
+      |   white-space: nowrap;
+      | }
+      | .style-parameter-input-group {
+      |   display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
+      | }
+      | .style-parameter-input-group.temporal {
+      |   grid-template-columns: minmax(0, 1fr);
+      | }
       | .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;
+      |   color-scheme: dark;
       | }
       | .style-parameter-input:focus {
       |   outline: none; border-color: #6897bb; box-shadow: 0 0 0 1px #6897bb;
       | }
+      | .style-parameter-input.temporal {
+      |   font-family: 'Courier New', monospace; font-size: 11px; cursor: pointer;
+      | }
+      | .style-parameter-context {
+      |   display: flex; flex-direction: column; gap: 2px;
+      |   color: #999999; font-size: 10px; line-height: 1.25;
+      | }
+      | .style-parameter-context-row {
+      |   display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      | }
+      | .style-parameter-context-key {
+      |   color: #808080; text-transform: uppercase; margin-right: 4px;
+      | }
       | .style-parameter-actions {
       |   display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
       | }
@@ -405,13 +434,18 @@ html
       |   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 { 
+      | .control-panel::-webkit-scrollbar,
+      | .style-parameters-body::-webkit-scrollbar { width: 8px; }
+      | .control-panel::-webkit-scrollbar-track,
+      | .style-parameters-body::-webkit-scrollbar-track { background: #3c3f41; border-radius: 4px; }
+      | .control-panel::-webkit-scrollbar-thumb,
+      | .style-parameters-body::-webkit-scrollbar-thumb { 
       |   background: #555555; border-radius: 4px; border: 1px solid #3c3f41;
       | }
-      | .control-panel::-webkit-scrollbar-thumb:hover { background: #666666; }
-      | .control-panel { scrollbar-width: thin; scrollbar-color: #555555 #3c3f41; }
+      | .control-panel::-webkit-scrollbar-thumb:hover,
+      | .style-parameters-body::-webkit-scrollbar-thumb:hover { background: #666666; }
+      | .control-panel,
+      | .style-parameters-body { scrollbar-width: thin; scrollbar-color: #555555 #3c3f41; }
       | .control-panel.active { display: flex; }
       | .control-panel-header {
       |   flex-shrink: 0; border-bottom: 1px solid #555555; padding-bottom: 8px; margin-bottom: 8px;

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

@@ -156,7 +156,7 @@ javascript:
     let originalStyle = null;
     let styleParameterDefinitions = new Map();
     let styleParameterValues = {};
-    let parameterizedUrlPrefixes = new Set();
+    let parameterizedUrlRules = [];
 
     const toDomId = (prefix, id) => `${prefix}-${String(id).replace(/[^a-zA-Z0-9_-]/g, '_')}`;
     const noCacheRequestOptions = () => mapCacheDisabled ? {cache: 'no-store'} : undefined;
@@ -169,7 +169,8 @@ javascript:
         return [];
     };
 
-    const inferParameterInputType = (name) => /(^|_|-)(time|date|datetime)($|_|-)/i.test(name) ? 'datetime-local' : 'text';
+    const isTemporalParameter = (name) => /(^|_|-)(time|date|datetime)($|_|-)/i.test(name);
+    const inferParameterInputType = (name) => isTemporalParameter(name) ? 'datetime-local' : 'text';
 
     const parameterInputToQueryValue = (name, value) => {
         if (!value) return '';
@@ -211,9 +212,24 @@ javascript:
         return prefix ? new URL(prefix, window.location.href).toString() : null;
     };
 
-    const rememberParameterizedUrl = (template) => {
+    const rememberParameterizedUrl = (template, parameterNames) => {
+        const names = normalizeQueryParams(parameterNames);
+        if (!names.length) return;
+
         const prefix = urlPrefixFromTemplate(template);
-        prefix && parameterizedUrlPrefixes.add(prefix);
+        if (!prefix) return;
+
+        const existing = parameterizedUrlRules.find(rule => rule.prefix === prefix);
+        if (existing) {
+            names.forEach(name => existing.parameterNames.add(name));
+        } else {
+            parameterizedUrlRules.push({prefix, parameterNames: new Set(names)});
+        }
+    };
+
+    const rememberParameterizedSourceUrls = (sourceDef, parameterNames) => {
+        [sourceDef?.url, sourceDef?.meta_url, sourceDef?.data].forEach(url => rememberParameterizedUrl(url, parameterNames));
+        (sourceDef?.tiles || []).forEach(tileUrl => rememberParameterizedUrl(tileUrl, parameterNames));
     };
 
     const appendStyleParametersToUrl = (resourceUrl, values = styleParameterValues, parameterNames = Object.keys(values)) => {
@@ -242,16 +258,13 @@ javascript:
             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);
-            }
+            rememberParameterizedSourceUrls(sourceDef, params);
         });
     };
 
     const fetchSourceMetadata = async (url) => {
         try {
-            const response = await fetch(appendStyleParametersToUrl(url), noCacheRequestOptions());
+            const response = await fetch(url, noCacheRequestOptions());
             return response.ok ? response.json() : null;
         } catch (e) {
             console.warn('Could not inspect source metadata:', url, e);
@@ -272,7 +285,9 @@ javascript:
 
                 const params = normalizeQueryParams(metadata.query_params || metadata.queryParams);
                 params.forEach(name => mergeStyleParameterDefinition(name, sourceName));
-                (metadata.tiles || []).forEach(rememberParameterizedUrl);
+                const parameterNames = getSourceParameterNames(sourceName, sourceDef);
+                rememberParameterizedSourceUrls(sourceDef, parameterNames);
+                (metadata.tiles || []).forEach(tileUrl => rememberParameterizedUrl(tileUrl, parameterNames));
             }
         }));
     };
@@ -297,6 +312,53 @@ javascript:
         return values;
     };
 
+    const normalizeLocalizedLabel = (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);
+    };
+
+    const getLocalizedMetadataLabel = (id, style = originalStyle) => {
+        const locale = style?.metadata?.locale;
+        if (!locale || !id) return id;
+
+        for (const lang of ['en-US', 'en', 'ru']) {
+            const label = normalizeLocalizedLabel(locale[lang]?.[id]);
+            if (label) return label;
+        }
+
+        for (const lang in locale) {
+            const label = normalizeLocalizedLabel(locale[lang]?.[id]);
+            if (label) return label;
+        }
+
+        return id;
+    };
+
+    const compactList = (items, limit = 3) => {
+        const unique = [...new Set(items.filter(Boolean))];
+        return unique.length > limit
+            ? `${unique.slice(0, limit).join(', ')} +${unique.length - limit}`
+            : unique.join(', ');
+    };
+
+    const getStyleParameterContext = (definition) => {
+        const style = originalStyle || currentStyle;
+        const sources = [...definition.sources].sort();
+        const layers = (style?.layers || []).filter(layer => sources.includes(layer.source));
+        const filterIds = [...new Set(layers.map(layer => layer.metadata?.filter_id).filter(Boolean))].sort();
+        const filterLabels = filterIds.map(id => getLocalizedMetadataLabel(id, style));
+
+        return {
+            sources,
+            layers: layers.map(layer => layer.id).sort(),
+            filterLabels: filterLabels.length ? filterLabels : sources,
+            sourceSummary: compactList(sources),
+            filterSummary: compactList(filterLabels.length ? filterLabels : sources)
+        };
+    };
+
     const renderStyleParameterControls = () => {
         const panel = document.getElementById('style-parameters-panel');
         const fields = document.getElementById('style-parameter-fields');
@@ -309,24 +371,79 @@ javascript:
         fields.innerHTML = '';
 
         definitions.forEach(definition => {
-            const row = document.createElement('label');
+            const row = document.createElement('div');
             row.className = 'style-parameter-row';
-            row.htmlFor = `style-param-${definition.name}`;
+            const context = getStyleParameterContext(definition);
 
-            const label = document.createElement('span');
+            const header = document.createElement('div');
+            header.className = 'style-parameter-header';
+            const label = document.createElement('label');
             label.className = 'style-parameter-label';
+            label.htmlFor = `style-param-${definition.name}`;
             label.textContent = definition.name;
+            const counts = document.createElement('span');
+            counts.className = 'style-parameter-counts';
+            counts.textContent = `${context.sources.length} src / ${context.layers.length} lyr`;
+            counts.title = `${context.sources.length} sources, ${context.layers.length} layers`;
+            header.appendChild(label);
+            header.appendChild(counts);
 
             const input = document.createElement('input');
             input.className = 'style-parameter-input';
             input.id = `style-param-${definition.name}`;
-            input.type = inferParameterInputType(definition.name);
+            input.type = isTemporalParameter(definition.name) ? 'text' : inferParameterInputType(definition.name);
             input.value = queryValueToParameterInput(definition.name, styleParameterValues[definition.name]);
             input.dataset.parameterName = definition.name;
-            input.title = [...definition.sources].join(', ');
+            input.title = [
+                `Sources: ${context.sources.join(', ')}`,
+                `Layers: ${context.layers.join(', ')}`
+            ].join('\n');
+            if (isTemporalParameter(definition.name)) {
+                input.classList.add('temporal');
+                input.readOnly = true;
+                input.placeholder = 'Select date and time';
+                input.setAttribute('aria-haspopup', 'dialog');
+                input.addEventListener('click', () => window.TemporalPicker.open(input));
+                input.addEventListener('focus', () => window.TemporalPicker.open(input));
+                input.addEventListener('keydown', event => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        window.TemporalPicker.open(input);
+                    }
+                });
+            }
 
-            row.appendChild(label);
-            row.appendChild(input);
+            const parameterControl = document.createElement('div');
+            parameterControl.className = isTemporalParameter(definition.name)
+                ? 'style-parameter-input-group temporal'
+                : 'style-parameter-input-group';
+            parameterControl.appendChild(input);
+
+            const contextBlock = document.createElement('div');
+            contextBlock.className = 'style-parameter-context';
+            contextBlock.title = input.title;
+
+            const usedBy = document.createElement('span');
+            usedBy.className = 'style-parameter-context-row';
+            const usedByKey = document.createElement('span');
+            usedByKey.className = 'style-parameter-context-key';
+            usedByKey.textContent = 'Used by';
+            usedBy.appendChild(usedByKey);
+            usedBy.appendChild(document.createTextNode(` ${context.filterSummary || 'No linked layers'}`));
+            contextBlock.appendChild(usedBy);
+
+            const sourceInfo = document.createElement('span');
+            sourceInfo.className = 'style-parameter-context-row';
+            const sourceKey = document.createElement('span');
+            sourceKey.className = 'style-parameter-context-key';
+            sourceKey.textContent = 'Sources';
+            sourceInfo.appendChild(sourceKey);
+            sourceInfo.appendChild(document.createTextNode(` ${context.sourceSummary || 'None'}`));
+            contextBlock.appendChild(sourceInfo);
+
+            row.appendChild(header);
+            row.appendChild(parameterControl);
+            row.appendChild(contextBlock);
             fields.appendChild(row);
         });
 
@@ -348,7 +465,7 @@ javascript:
     const initializeStyleParameters = async (style) => {
         styleParameterDefinitions = new Map();
         styleParameterValues = {};
-        parameterizedUrlPrefixes = new Set();
+        parameterizedUrlRules = [];
 
         collectStyleSourceParameters(style);
         styleParameterDefinitions.forEach((definition, name) => {
@@ -389,13 +506,25 @@ javascript:
         return modifiedStyle;
     };
 
-    const shouldPatchRequestUrl = (resourceUrl) => {
-        if (!Object.values(styleParameterValues).some(value => value !== undefined && value !== null && value !== '')) return false;
+    const parameterizedUrlRuleFor = (resourceUrl) => {
         const absolute = new URL(resourceUrl, window.location.href).toString();
-        return absolute.includes('/rb_tiles/') || [...parameterizedUrlPrefixes].some(prefix => absolute.startsWith(prefix));
+        return parameterizedUrlRules
+            .filter(rule => absolute.startsWith(rule.prefix))
+            .sort((a, b) => b.prefix.length - a.prefix.length)[0] || null;
     };
 
-    const patchRequestUrl = (resourceUrl) => shouldPatchRequestUrl(resourceUrl) ? appendStyleParametersToUrl(resourceUrl) : resourceUrl;
+    const patchRequestUrl = (resourceUrl) => {
+        const rule = parameterizedUrlRuleFor(resourceUrl);
+        if (!rule) return resourceUrl;
+
+        const parameterNames = [...rule.parameterNames];
+        if (!parameterNames.some(name => {
+            const value = styleParameterValues[name];
+            return value !== undefined && value !== null && value !== '';
+        })) return resourceUrl;
+
+        return appendStyleParametersToUrl(resourceUrl, styleParameterValues, parameterNames);
+    };
 
     const BOTTOM_OVERLAY_IDS = ['loading-indicator'];
     const BOTTOM_OVERLAY_BASE_OFFSET = 20;

data/spec/maplibre_preview_spec.rb

@@ -50,9 +50,23 @@ RSpec.describe MapLibrePreview do
       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('parameterizedUrlRules')
       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('rememberParameterizedSourceUrls')
+      expect(last_response.body).to include('parameterizedUrlRuleFor')
+      expect(last_response.body).to include('getStyleParameterContext')
+      expect(last_response.body).to include('isTemporalParameter')
+      expect(last_response.body).to include('/css/temporal_picker.css')
+      expect(last_response.body).to include('/js/temporal_picker.js')
+      expect(last_response.body).to include('window.TemporalPicker.open')
+      expect(last_response.body).to include('style-parameter-input-group')
+      expect(last_response.body).to include('style-parameter-counts')
+      expect(last_response.body).to include('style-parameter-context')
+      expect(last_response.body).to include('Used by')
+      expect(last_response.body).to include('Sources:')
+      expect(last_response.body).not_to include("absolute.includes('/rb_tiles/')")
       expect(last_response.body).to include('layoutBottomOverlays')
       expect(last_response.body).to include('showCollisionBoxes')
       expect(last_response.body).to include('showOverdrawInspector')
@@ -68,7 +82,7 @@ RSpec.describe MapLibrePreview do
     end
 
     it 'serves all required JavaScript modules' do
-      %w[/js/overlay_layout.js /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|
+      %w[/js/overlay_layout.js /js/filters.js /js/contour.js /js/tilegrid.js /js/temporal_picker.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
         expect(last_response).to be_ok
         expect(last_response.content_type).to include('javascript')
@@ -77,11 +91,13 @@ RSpec.describe MapLibrePreview do
     end
 
     it 'serves required stylesheets' do
-      get '/vendor/maplibre-gl/maplibre-gl.css'
+      %w[/vendor/maplibre-gl/maplibre-gl.css /css/temporal_picker.css].each do |css_file|
+        get css_file
 
-      expect(last_response).to be_ok
-      expect(last_response.content_type).to include('text/css')
-      expect(last_response.body).not_to be_empty
+        expect(last_response).to be_ok
+        expect(last_response.content_type).to include('text/css')
+        expect(last_response.body).not_to be_empty
+      end
     end
   end
 
@@ -93,10 +109,12 @@ RSpec.describe MapLibrePreview do
       body = last_response.body
 
       expect(body).to include('/vendor/maplibre-gl/maplibre-gl.css')
+      expect(body).to include('/css/temporal_picker.css')
       expect(body).to include('/vendor/maplibre-gl/maplibre-gl.js')
       expect(body).to include('/vendor/maplibre-contour/index.min.js')
       expect(body).to include('/vendor/d3/d3.v7.min.js')
       expect(body).to include('/js/overlay_layout.js')
+      expect(body).to include('/js/temporal_picker.js')
       expect(body).not_to include('unpkg.com')
       expect(body).not_to include('d3js.org')
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: maplibre-preview
 version: !ruby/object:Gem::Version
-  version: 1.8.0
+  version: 1.9.0
 platform: ruby
 authors:
 - Alexander Ludov
@@ -201,9 +201,11 @@ files:
 - bin/maplibre-preview
 - docs/README_RU.md
 - lib/maplibre-preview.rb
+- lib/maplibre-preview/public/css/temporal_picker.css
 - lib/maplibre-preview/public/js/contour.js
 - lib/maplibre-preview/public/js/filters.js
 - lib/maplibre-preview/public/js/overlay_layout.js
+- lib/maplibre-preview/public/js/temporal_picker.js
 - lib/maplibre-preview/public/js/tilegrid.js
 - lib/maplibre-preview/public/vendor/d3/d3.v7.min.js
 - lib/maplibre-preview/public/vendor/maplibre-contour/index.min.js