maplibre-preview 0.0.2 → 1.1.0

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

@@ -0,0 +1,323 @@
+class Filters {
+    constructor(options) {
+        this.map = options.map;
+        this.container = options.container;
+        this.element_template = options.element_template || (title => `<div class="element">${title}</div>`);
+        this.group_template = options.group_template || (title => `<div class="group">${title}</div>`);
+
+        this.filterStates = {};
+        this.subFilterStatesBeforeGroupToggle = {};
+        this.currentStyle = null;
+        this.currentMode = 'filters';
+        this.isUpdating = false;
+    }
+
+    init() {
+        if (!this.map) return;
+        try {
+            this.currentStyle = this.map.getStyle();
+            if (this.currentStyle) {
+                this.createFilterButtons();
+                this.applyFilterMode();
+            }
+        } catch (e) {
+            console.warn('Could not get style for filters:', e);
+        }
+    }
+
+    setMode(mode) {
+        this.currentMode = mode;
+        if (mode === 'filters') {
+            this.applyFilterMode();
+        }
+    }
+
+    getLocalizedFilterName(locale, filterId) {
+        if (!locale) return filterId;
+        const languagePriority = ['en-US', 'en', 'ru'];
+
+        for (const lang of languagePriority) {
+            if (locale[lang]?.[filterId]) return locale[lang][filterId];
+        }
+
+        for (const lang in locale) {
+            if (locale[lang]?.[filterId]) return locale[lang][filterId];
+        }
+
+        return filterId;
+    }
+
+    applyFilterMode() {
+        if (this.isUpdating) return;
+        this.isUpdating = true;
+
+        try {
+            this.currentStyle?.metadata?.filters && Object.keys(this.currentStyle.metadata.filters).forEach(filterId => {
+                this.applyFilter(filterId, this.filterStates[filterId] || false);
+            });
+        } finally {
+            this.isUpdating = false;
+        }
+    }
+
+    applyFilter(filterId, isActive) {
+        if (this.currentMode !== 'filters' || !this.currentStyle?.metadata?.filters || this.isUpdating) return;
+
+        const filterConfig = this.currentStyle.metadata.filters[filterId];
+        if (!filterConfig) return;
+
+        const hasMapboxFilters = filterConfig.some(filter => filter.filter);
+        hasMapboxFilters ? this.applyLevel2Filter(filterId, isActive, filterConfig) : this.applyLevel1Filter(filterId, isActive, filterConfig);
+    }
+
+    applyLevel1Filter(filterId, isActive, filterConfig) {
+        this.currentStyle.layers.forEach(layer => {
+            if (!layer.metadata?.filter_id) return;
+
+            const matchingFilter = filterConfig.find(filter => filter.id === layer.metadata.filter_id);
+            if (matchingFilter) {
+                if (filterConfig.length > 1) {
+                    const subFilterKey = `${filterId}_${layer.metadata.filter_id}`;
+                    const subFilterActive = this.filterStates[subFilterKey];
+                    const visibility = (isActive && subFilterActive) ? 'visible' : 'none';
+                    this.map.getLayer(layer.id) && this.map.setLayoutProperty(layer.id, 'visibility', visibility);
+                } else {
+                    this.map.getLayer(layer.id) && this.map.setLayoutProperty(layer.id, 'visibility', isActive ? 'visible' : 'none');
+                }
+            } else if (layer.metadata.filter_id === filterId) {
+                this.map.getLayer(layer.id) && this.map.setLayoutProperty(layer.id, 'visibility', isActive ? 'visible' : 'none');
+            }
+        });
+    }
+
+    applyLevel2Filter(filterId, isActive, filterConfig) {
+        const subFiltersWithExpr = filterConfig.filter(f => !!f.filter);
+        const subFiltersWithoutExpr = filterConfig.filter(f => !f.filter);
+
+        const generalLayers = this.currentStyle.layers.filter(layer => layer.metadata?.filter_id === filterId);
+        const childLayersBySubId = {};
+
+        filterConfig.forEach(f => {
+            childLayersBySubId[f.id] = this.currentStyle.layers
+                .filter(layer => layer.metadata?.filter_id === f.id)
+                .map(l => l.id);
+        });
+
+        const hasGeneralLayers = generalLayers.length > 0 && subFiltersWithExpr.length > 0;
+        const hasChildLayers = Object.values(childLayersBySubId).some(arr => arr?.length > 0);
+
+        if (!isActive) {
+            if (hasGeneralLayers) {
+                generalLayers.forEach(layer => {
+                    if (this.map.getLayer(layer.id)) {
+                        this.map.setLayoutProperty(layer.id, 'visibility', 'none');
+                        this.map.setFilter(layer.id, null);
+                    }
+                });
+            }
+            if (hasChildLayers) {
+                Object.values(childLayersBySubId).forEach(ids => {
+                    ids.forEach(id => this.map.getLayer(id) && this.map.setLayoutProperty(id, 'visibility', 'none'));
+                });
+            }
+            return;
+        }
+
+        if (hasGeneralLayers) {
+            const activeWithExpr = subFiltersWithExpr.filter(f => this.filterStates[`${filterId}_${f.id}`] !== false);
+
+            if (activeWithExpr.length === 0) {
+                generalLayers.forEach(layer => {
+                    if (this.map.getLayer(layer.id)) {
+                        this.map.setLayoutProperty(layer.id, 'visibility', 'none');
+                        this.map.setFilter(layer.id, null);
+                    }
+                });
+            } else if (activeWithExpr.length === 1) {
+                const expr = activeWithExpr[0].filter;
+                generalLayers.forEach(layer => {
+                    if (this.map.getLayer(layer.id)) {
+                        this.map.setLayoutProperty(layer.id, 'visibility', 'visible');
+                        this.map.setFilter(layer.id, expr);
+                    }
+                });
+            } else {
+                const exprs = activeWithExpr.map(f => f.filter);
+                const combined = ['any', ...exprs];
+                generalLayers.forEach(layer => {
+                    if (this.map.getLayer(layer.id)) {
+                        this.map.setLayoutProperty(layer.id, 'visibility', 'visible');
+                        this.map.setFilter(layer.id, combined);
+                    }
+                });
+            }
+        }
+
+        if (hasChildLayers) {
+            filterConfig.forEach(sf => {
+                const ids = childLayersBySubId[sf.id] || [];
+                if (!ids.length) return;
+                const subKey = `${filterId}_${sf.id}`;
+                const on = (this.filterStates[subKey] !== false) && isActive;
+                ids.forEach(id => this.map.getLayer(id) && this.map.setLayoutProperty(id, 'visibility', on ? 'visible' : 'none'));
+            });
+        }
+    }
+
+    toggleAllFilters() {
+        if (this.currentMode !== 'filters' || !this.currentStyle?.metadata?.filters) return;
+
+        const allActive = Object.values(this.filterStates).every(state => state);
+        const newState = !allActive;
+
+        Object.keys(this.subFilterStatesBeforeGroupToggle).forEach(k => delete this.subFilterStatesBeforeGroupToggle[k]);
+        Object.keys(this.currentStyle.metadata.filters).forEach(filterId => {
+            const filterConfig = this.currentStyle.metadata.filters[filterId];
+
+            if (filterConfig?.length > 1) {
+                filterConfig.forEach(item => {
+                    this.filterStates[`${filterId}_${item.id}`] = newState;
+                });
+            }
+
+            this.filterStates[filterId] = newState;
+            this.applyFilter(filterId, newState);
+        });
+
+        this.updateFilterButtons();
+    }
+
+    toggleFilterGroup(filterId) {
+        if (this.currentMode !== 'filters') return;
+
+        const filterConfig = this.currentStyle.metadata.filters[filterId];
+        const isCurrentlyActive = this.filterStates[filterId];
+
+        if (isCurrentlyActive) {
+            if (filterConfig?.length > 1) {
+                this.subFilterStatesBeforeGroupToggle[filterId] = {};
+                filterConfig.forEach(item => {
+                    const subFilterKey = `${filterId}_${item.id}`;
+                    this.subFilterStatesBeforeGroupToggle[filterId][item.id] = this.filterStates[subFilterKey];
+                    this.filterStates[subFilterKey] = false;
+                });
+            }
+            this.filterStates[filterId] = false;
+            this.applyFilter(filterId, false);
+        } else {
+            if (filterConfig?.length > 1) {
+                const saved = this.subFilterStatesBeforeGroupToggle[filterId];
+                const anyUserSelectionWhileOff = filterConfig.some(item => this.filterStates[`${filterId}_${item.id}`]);
+                if (!anyUserSelectionWhileOff) {
+                    filterConfig.forEach(item => {
+                        const subFilterKey = `${filterId}_${item.id}`;
+                        this.filterStates[subFilterKey] = saved?.[item.id] ?? true;
+                    });
+                }
+                delete this.subFilterStatesBeforeGroupToggle[filterId];
+            }
+            this.filterStates[filterId] = true;
+            this.applyFilter(filterId, true);
+        }
+
+        this.updateFilterButtons();
+    }
+
+    toggleSubFilter(groupId, subFilterId) {
+        if (this.currentMode !== 'filters') return;
+        const subFilterKey = `${groupId}_${subFilterId}`;
+        this.filterStates[subFilterKey] = !this.filterStates[subFilterKey];
+
+        const filterConfig = this.currentStyle.metadata.filters[groupId];
+        if (filterConfig?.length > 1) {
+            const activeSubFilters = filterConfig.filter(item => this.filterStates[`${groupId}_${item.id}`]);
+            this.filterStates[groupId] = activeSubFilters.length > 0;
+        }
+
+        this.applyFilter(groupId, !!this.filterStates[groupId]);
+        this.updateFilterButtons();
+    }
+
+    updateFilterButtons() {
+        if (!this.currentStyle?.metadata?.filters) return;
+
+        Object.keys(this.currentStyle.metadata.filters).forEach(filterId => {
+            const groupButton = document.getElementById(`filter-${filterId}`);
+            groupButton && (groupButton.className = `control-button ${this.filterStates[filterId] ? 'active' : 'inactive'} filter-group-button`);
+
+            const subButton = document.getElementById(`filter-sub-${filterId}`);
+            subButton?.querySelectorAll('.filter-sub-button').forEach(btn => {
+                const subFilterId = btn.id.replace(`filter-sub-${filterId}-`, '');
+                const subFilterKey = `${filterId}_${subFilterId}`;
+                btn.className = `control-button ${this.filterStates[subFilterKey] ? 'active' : 'inactive'} filter-sub-button`;
+            });
+        });
+    }
+
+    createFilterButtons() {
+        if (!this.currentStyle?.metadata?.filters) return;
+
+        const filterButtonsContainer = document.getElementById('filter-buttons');
+        if (!filterButtonsContainer) return;
+
+        const savedStates = {...this.filterStates};
+
+        Object.keys(this.currentStyle.metadata.filters).forEach(filterId => {
+            const filterConfig = this.currentStyle.metadata.filters[filterId];
+            const locale = this.getLocalizedFilterName(this.currentStyle.metadata.locale, filterId);
+
+            const groupContainer = document.createElement('div');
+            groupContainer.className = 'filter-group';
+            groupContainer.id = `filter-group-${filterId}`;
+
+            const groupButton = document.createElement('button');
+            groupButton.id = `filter-${filterId}`;
+            groupButton.className = 'control-button active filter-group-button';
+            groupButton.textContent = locale;
+            groupButton.onclick = () => this.toggleFilterGroup(filterId);
+            groupContainer.appendChild(groupButton);
+
+            if (filterConfig.length > 1) {
+                const subButtonsContainer = document.createElement('div');
+                subButtonsContainer.className = 'filter-sub-buttons';
+                subButtonsContainer.id = `filter-sub-${filterId}`;
+
+                filterConfig.forEach(item => {
+                    const subButton = document.createElement('button');
+                    subButton.id = `filter-sub-${filterId}-${item.id}`;
+                    subButton.className = 'control-button active filter-sub-button';
+                    const subLocale = this.getLocalizedFilterName(this.currentStyle.metadata.locale, item.id);
+                    subButton.textContent = subLocale || item.id;
+                    subButton.onclick = () => this.toggleSubFilter(filterId, item.id);
+                    subButtonsContainer.appendChild(subButton);
+
+                    const subFilterKey = `${filterId}_${item.id}`;
+                    const isLayerVisible = item.group_id ? true :
+                        this.currentStyle.layers
+                            .filter(layer => layer.metadata?.filter_id === item.id)
+                            .some(layer => this.map.getLayoutProperty(layer.id, 'visibility') !== 'none');
+                    this.filterStates[subFilterKey] = savedStates[subFilterKey] ?? isLayerVisible;
+                });
+
+                groupContainer.appendChild(subButtonsContainer);
+            }
+
+            filterButtonsContainer.appendChild(groupContainer);
+
+            const anyLayerVisible = filterConfig.length > 1 ?
+                filterConfig.some(item => this.filterStates[`${filterId}_${item.id}`] === true) :
+                this.currentStyle.layers
+                    .filter(layer => layer.metadata?.filter_id === filterId)
+                    .some(layer => this.map.getLayoutProperty(layer.id, 'visibility') !== 'none');
+            this.filterStates[filterId] = savedStates[filterId] ?? anyLayerVisible;
+        });
+
+        this.updateFilterButtons();
+    }
+
+    applyAllFilters() {
+        this.currentStyle?.metadata?.filters && Object.keys(this.currentStyle.metadata.filters).forEach(filterId => {
+            this.applyFilter(filterId, this.filterStates[filterId] || false);
+        });
+    }
+}

data/lib/maplibre-preview/version.rb

@@ -1,3 +1,3 @@
 module MapLibrePreview
-  VERSION = '0.0.2'
+  VERSION = '1.1.0'
 end

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

@@ -0,0 +1,329 @@
+doctype html
+html
+  head
+    meta[charset="utf-8"]
+    title Map Preview
+    meta[name="viewport" content="width=device-width, initial-scale=1.0"]
+    link[rel="icon" type="image/png" href="/icons/favicon.png"]
+    link[href="https://unpkg.com/maplibre-gl@#{MapLibrePreview::MAPLIBRE_VERSION}/dist/maplibre-gl.css" rel='stylesheet']
+    script[src="https://unpkg.com/maplibre-gl@#{MapLibrePreview::MAPLIBRE_VERSION}/dist/maplibre-gl.js"]
+    script[src="https://unpkg.com/maplibre-contour@#{MapLibrePreview::CONTOUR_VERSION}/dist/index.min.js"]
+    script[src="https://d3js.org/d3.v#{MapLibrePreview::D3_VERSION}.min.js"]
+    script[src='/js/filters.js']
+    script[src='/js/contour.js']
+    style
+      | * { margin: 0; padding: 0; box-sizing: border-box; }
+      | html { height: 100%; }
+      | body { 
+      |   font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
+      |   background: #2b2b2b; color: #a9b7c6; line-height: 1.4; font-size: 14px;
+      |   margin: 0; padding: 0; overflow: hidden;
+      | }
+      | .container { width: 100%; height: 100vh; margin: 0; padding: 0; }
+      | .header { 
+      |   background: #3c3f41; border: 1px solid #555555; padding: 20px; 
+      |   border-radius: 4px; margin-bottom: 20px;
+      | }
+      | .header h1 { color: #ffc66d; font-size: 20px; margin-bottom: 8px; }
+      | .header p { color: #808080; font-size: 13px; }
+      | .section { 
+      |   background: #3c3f41; border: 1px solid #555555; padding: 16px; 
+      |   border-radius: 4px; margin-bottom: 16px;
+      | }
+      | .section-title { 
+      |   color: #6a9955; font-weight: bold; margin-bottom: 12px; font-size: 16px;
+      | }
+      | .status-ok { color: #6a9955; }
+      | .status-error { color: #f44747; }
+      | .status-warning { color: #ffc66d; }
+      | .status-disabled { color: #808080; }
+      | .style-card { 
+      |   background: #313335; border: 1px solid #464749; padding: 12px; 
+      |   border-radius: 3px; margin-bottom: 16px;
+      | }
+      | .style-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
+      | .style-name { color: #ffc66d; font-weight: bold; }
+      | .style-id { color: #808080; font-size: 12px; }
+      | .style-description { color: #a9b7c6; font-size: 12px; margin-bottom: 8px; }
+      | .style-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
+      | .stat-item { font-size: 12px; }
+      | .stat-label { color: #808080; }
+      | .stat-value { color: #6897bb; }
+      | .endpoint-container { 
+      |   display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
+      |   padding: 2px 4px; border-radius: 2px; transition: all 0.2s ease; margin-left: 4px;
+      | }
+      | .endpoint-container:hover { background: #4b4d4f; }
+      | .endpoint-container.copy-success { 
+      |   background: #2d4a2d !important; border: 1px solid #6a9955;
+      | }
+      | .endpoint-url { 
+      |   color: #6897bb; font-family: 'Courier New', monospace; font-size: 11px;
+      |   text-decoration: underline;
+      | }
+      | .copy-icon { 
+      |   color: #555555; font-size: 9px; flex-shrink: 0; transition: color 0.2s; opacity: 0.5;
+      | }
+      | .endpoint-container:hover .copy-icon { color: #808080; opacity: 0.8; }
+      | .copy-success .copy-icon { color: #6a9955 !important; opacity: 1 !important; }
+      | .style-actions { margin-top: 12px; }
+      | .btn { 
+      |   display: inline-block; padding: 6px 12px; background: #4b4d4f; color: #a9b7c6;
+      |   text-decoration: none; border-radius: 3px; font-size: 12px; 
+      |   border: 1px solid #555555; margin-right: 8px;
+      | }
+      | .btn:hover { background: #5a5d5f; border-color: #666666; }
+      | .btn-primary { 
+      |   background: #6a9955; color: #ffffff; border-color: #7bb366;
+      | }
+      | .btn-primary:hover { background: #7bb366; border-color: #8cc477; }
+      | .btn-small { padding: 4px 8px; font-size: 10px; margin-right: 4px; }
+      | .refresh-btn {
+      |   background: #ffc66d; color: #2b2b2b; border-color: #ffd87d; font-weight: bold;
+      | }
+      | .refresh-btn:hover { background: #ffd87d; border-color: #ffe88d; }
+      | .header-buttons { display: flex; gap: 8px; float: right; }
+      | .map-btn { background: #6897bb; color: #ffffff; border-color: #7aa8cc; }
+      | .map-btn:hover { background: #7aa8cc; border-color: #8bb9dd; }
+      | .sprite-section {
+      |   margin-top: 12px; padding-top: 12px; border-top: 1px solid #464749;
+      | }
+      | .sprite-title { color: #6a9955; font-weight: bold; font-size: 12px; margin-bottom: 8px; }
+      | .sprite-endpoints { display: flex; flex-direction: column; gap: 6px; }
+      | .sprite-item { display: flex; align-items: center; gap: 8px; font-size: 11px; }
+      | .sprite-label { color: #808080; min-width: 40px; }
+      | .stats-grid {
+      |   display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      |   gap: 16px; margin-bottom: 20px;
+      | }
+      | .stat-box {
+      |   background: #313335; border: 1px solid #464749; padding: 12px; 
+      |   border-radius: 3px; text-align: center;
+      | }
+      | .stat-number { font-size: 24px; font-weight: bold; color: #6897bb; margin-bottom: 4px; }
+      | .stat-desc { font-size: 12px; color: #808080; }
+      | .error-message { color: #f44747; font-size: 12px; margin-top: 4px; }
+      | .success-message { color: #6a9955; font-size: 12px; margin-top: 4px; }
+      | .performance-overlay {
+      |   position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1000;
+      |   background: rgba(43, 43, 43, 0.95); border: 1px solid #555555;
+      |   border-radius: 0 0 6px 6px; padding: 0; min-width: 400px;
+      |   backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      |   transition: all 0.3s ease;
+      | }
+      | .performance-toggle {
+      |   position: absolute; top: 4px; right: 4px; z-index: 1001;
+      |   background: none; border: none; color: #808080; cursor: pointer;
+      |   font-size: 14px; padding: 0; width: 16px; height: 16px;
+      |   display: flex; align-items: center; justify-content: center;
+      |   border-radius: 2px; transition: all 0.2s ease;
+      | }
+      | .performance-toggle:hover {
+      |   background: #4b4d4f; color: #a9b7c6;
+      | }
+      | .performance-content {
+      |   padding: 8px 12px;
+      | }
+      | .metric-row {
+      |   display: flex; justify-content: space-between; align-items: center;
+      |   margin-bottom: 6px;
+      | }
+      | .metric-row:last-child { margin-bottom: 0; }
+      | .metric {
+      |   display: flex; align-items: center; gap: 4px;
+      |   font-size: 11px; flex: 1; justify-content: center;
+      | }
+      | .metric-label {
+      |   color: #808080; font-weight: 500;
+      | }
+      | .metric-value {
+      |   color: #6897bb; font-weight: bold; font-family: 'Courier New', monospace;
+      |   min-width: 40px; text-align: center;
+      | }
+      | .metric-value.warning { color: #ffc66d; }
+      | .metric-value.error { color: #f44747; }
+      | .metric-value.success { color: #6a9955; }
+      | #map-container {
+      |   position: relative; width: 100%; height: 100vh; background: #2b2b2b;
+      | }
+      | .map-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+      | .controls {
+      |   position: absolute; top: 10px; left: 10px; z-index: 1000;
+      |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555; 
+      |   padding: 10px; border-radius: 4px; color: #a9b7c6;
+      | }
+      | .controls a { color: #6897bb; text-decoration: none; margin-right: 15px; }
+      | .controls a:hover { text-decoration: underline; }
+      | .layer-controls {
+      |   position: absolute; top: 50%; left: 10px; transform: translateY(-50%); z-index: 1000;
+      |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555; padding: 15px;
+      |   border-radius: 4px; color: #a9b7c6; display: flex; flex-direction: column; gap: 6px;
+      |   max-width: 300px; max-height: 80vh;
+      | }
+      | .mode-switcher {
+      |   display: flex; gap: 2px; margin-bottom: 10px; background: #3c3f41;
+      |   border-radius: 3px; padding: 2px; flex-shrink: 0;
+      | }
+      | .mode-button {
+      |   background: #3c3f41; color: #808080; border: none; padding: 6px 12px;
+      |   border-radius: 2px; cursor: pointer; font-size: 11px; transition: all 0.2s ease; flex: 1;
+      | }
+      | .mode-button:hover { background: #4b4d4f; color: #a9b7c6; }
+      | .mode-button.active { background: #6897bb; color: #ffffff; }
+      | .control-panel { 
+      |   display: none; flex-direction: column; gap: 6px; 
+      |   max-height: calc(80vh - 200px); overflow-y: auto;
+      | }
+      | .control-panel::-webkit-scrollbar { width: 8px; }
+      | .control-panel::-webkit-scrollbar-track { background: #3c3f41; border-radius: 4px; }
+      | .control-panel::-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.active { display: flex; }
+      | .control-panel-header {
+      |   flex-shrink: 0; border-bottom: 1px solid #555555; padding-bottom: 8px; margin-bottom: 8px;
+      |   display: flex; flex-direction: column; gap: 6px;
+      | }
+      | .control-panel-content {
+      |   flex: 1; overflow-y: auto;
+      | }
+      | .control-button {
+      |   background: #4b4d4f; color: #a9b7c6; border: 1px solid #555555;
+      |   padding: 6px 12px; border-radius: 3px; cursor: pointer; font-size: 11px;
+      |   transition: all 0.2s ease; width: 100%; box-sizing: border-box;
+      | }
+      | .control-button:hover { background: #5a5d5f; border-color: #666666; }
+      | .control-button.active { background: #6a9955; color: #ffffff; border-color: #7bb366; }
+      | .control-button.inactive { background: #3c3f41; color: #808080; border-color: #464749; }
+      | .filter-group {
+      |   margin-bottom: 8px;
+      |   border: 1px solid #555555;
+      |   border-radius: 3px;
+      |   overflow: hidden;
+      | }
+      | .filter-group-button {
+      |   width: 100%;
+      |   font-weight: bold;
+      |   background: #4b4d4f;
+      |   border: none;
+      |   border-bottom: 1px solid #555555;
+      | }
+      | .filter-sub-buttons {
+      |   display: flex;
+      |   flex-direction: column;
+      |   gap: 2px;
+      |   padding: 3px;
+      |   background: #3c3f41;
+      |   border: 1px solid #6a9955;
+      |   border-radius: 2px;
+      |   box-sizing: border-box;
+      | }
+      | .filter-sub-button {
+      |   font-size: 10px;
+      |   padding: 4px 8px;
+      |   margin: 0;
+      |   background: #ffc66d;
+      |   color: #2b2b2b;
+      |   border: 1px solid #e6b85a;
+      |   border-radius: 2px;
+      |   cursor: pointer;
+      |   transition: all 0.2s ease;
+      | }
+      | .filter-sub-button:hover {
+      |   background: #ffd87d;
+      |   border-color: #f0c050;
+      | }
+      | .filter-sub-button.active {
+      |   background: #ffd87d;
+      |   color: #2b2b2b;
+      |   border-color: #f0c050;
+      |   font-weight: bold;
+      | }
+      | .filter-sub-button.inactive {
+      |   background: #3c3f41;
+      |   color: #808080;
+      |   border-color: #464749;
+      | }
+
+      | .toggle-basemap {
+      |   position: absolute; top: 10px; right: 10px; z-index: 1000;
+      |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555; padding: 10px;
+      |   border-radius: 4px; color: #a9b7c6; border: none; cursor: pointer;
+      | }
+      | .toggle-basemap:hover { background: rgba(75, 77, 79, 0.95); }
+      | #loading-indicator {
+      |   position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
+      |   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;
+      | }
+      | .loading-progress { text-align: center; color: #a9b7c6; }
+      | .loading-text { font-size: 14px; color: #a9b7c6; margin-bottom: 8px; }
+      | .progress-bar {
+      |   width: 200px; height: 4px; background: #3c3f41; border-radius: 2px;
+      |   overflow: hidden; margin: 0 auto;
+      | }
+      | .progress-fill {
+      |   height: 100%; background: #6897bb; border-radius: 2px;
+      |   transition: width 0.3s ease; width: 0%;
+      | }
+      | /* MapLibre Controls */
+      | .maplibregl-ctrl-scale, .maplibregl-ctrl-group, .maplibregl-ctrl-terrain, .maplibregl-ctrl-globe {
+      |   background: rgba(60, 63, 65, 0.95) !important; border: 1px solid #555555 !important;
+      |   border-radius: 4px !important; backdrop-filter: blur(10px) !important;
+      |   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+      | }
+      | .maplibregl-ctrl-scale { color: rgb(100, 185, 61) !important; font-size: 11px !important; padding: 4px 8px !important; }
+      | .maplibregl-ctrl-scale-line { background: #6897bb !important; border: 1px solid #7aa8cc !important; }
+      | .maplibregl-ctrl-group button { background: rgba(75, 105, 61, 0.8) !important; border: 1px solid rgba(72, 139, 92, 0.4) !important; color: #ffffff !important; font-size: 14px !important; font-weight: bold !important; transition: all 0.2s ease !important; }
+      | .maplibregl-ctrl-group button:hover { background: rgba(255, 198, 109, 0.9) !important; border-color: #ffd87d !important; color: #2b2b2b !important; transform: scale(1.05) !important; }
+      | .maplibregl-ctrl-group button:active { background: rgba(106, 153, 85, 1) !important; transform: scale(0.95) !important; }
+      | .maplibregl-ctrl-terrain button { background: rgba(104, 151, 187, 0.8) !important; border: 1px solid #7aa8cc !important; color: #ffffff !important; font-size: 16px !important; font-weight: bold !important; transition: all 0.2s ease !important; padding: 8px !important; }
+      | .maplibregl-ctrl-terrain button:hover { background: rgba(104, 151, 187, 1) !important; border-color: #8bb9dd !important; transform: scale(1.1) !important; box-shadow: 0 2px 8px rgba(104, 151, 187, 0.4) !important; }
+      | .maplibregl-ctrl-terrain button:active { transform: scale(0.95) !important; }
+      | .maplibregl-ctrl-globe button { background: rgba(255, 198, 109, 0.8) !important; border: 1px solid #ffd87d !important; color: #2b2b2b !important; font-size: 16px !important; font-weight: bold !important; transition: all 0.2s ease !important; padding: 8px !important; }
+      | .maplibregl-ctrl-globe button:hover { background: rgba(255, 198, 109, 1) !important; border-color: #ffe88d !important; transform: scale(1.1) !important; box-shadow: 0 2px 8px rgba(255, 198, 109, 0.4) !important; }
+      | .maplibregl-ctrl-globe button:active { transform: scale(0.95) !important; }
+      | .profile-overlay {
+      |   position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000;
+      |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555;
+      |   border-radius: 6px; padding: 12px; width: 70vw; max-width: 800px;
+      |   backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      | }
+      | .profile-header {
+      |   display: flex; justify-content: space-between; align-items: center;
+      |   margin-bottom: 8px; border-bottom: 1px solid #555555; padding-bottom: 8px;
+      | }
+      | .profile-title { color: #ffc66d; font-weight: bold; font-size: 12px; }
+      | .profile-close {
+      |   background: none; border: none; color: #808080; cursor: pointer;
+      |   font-size: 14px; padding: 0; width: 16px; height: 16px;
+      |   display: flex; align-items: center; justify-content: center;
+      |   border-radius: 2px; transition: all 0.2s ease;
+      | }
+      | .profile-close:hover { background: #4b4d4f; color: #a9b7c6; }
+      | .profile-stats {
+      |   display: flex; justify-content: space-between; margin-bottom: 8px;
+      |   font-size: 10px; color: #808080;
+      | }
+      | .profile-chart { margin-top: 8px; }
+      | .elevation-tooltip {
+      |   position: fixed; z-index: 1001; pointer-events: none;
+      |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555;
+      |   border-radius: 4px; padding: 8px 12px; font-size: 16px;
+      |   color: #6a9955; backdrop-filter: blur(10px);
+      |   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+      |   transform: translate(10px, -50%); margin-left: 10px;
+      |   font-weight: bold;
+      | }
+      | .profile-area { fill: #4CAF50; opacity: 0.3; }
+      | .profile-line { fill: none; stroke: #2196F3; stroke-width: 2; }
+      | .profile-tooltip-line { stroke: #ff0000; stroke-width: 1; stroke-dasharray: 3,3; }
+      | .profile-tooltip-circle { fill: #ff0000; r: 4; }
+      | .profile-tooltip-text { text-anchor: middle; fill: #ff0000; font-size: 14px; }
+  body
+    .container
+      == yield