maplibre-preview 1.3.7 → 1.3.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +16 -0
- data/lib/maplibre-preview/version.rb +1 -1
- data/lib/maplibre-preview/views/maplibre_layout.slim +67 -25
- data/lib/maplibre-preview/views/maplibre_map.slim +44 -28
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: fc25f7eb64dc27af2bdd7edcf81ee66c6bd4c6e02105be073a76d4385b9707e7
|
|
4
|
+
data.tar.gz: b8820b6b86f59cb129bf9da0f2bf51c9f91df3dc6ee0082773b713ab2a8141e1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 49fca224b36b60c97bfa7d532b101b41f8d52c02af3eb2f5eb952b214263c93554a744f330f1af2f98caa9fc332f309a7fde5830be41d6973559de557c3fd6db
|
|
7
|
+
data.tar.gz: 9f11842ece6fe33acacae31de1d7152e2047e9b74bea0dc29bf268e775476a302a4af27aea3f14c64455f21aacdee763616fce66bafcd9bc41d588fcfb650d4d
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [1.3.10] - 2025-11-19
|
|
4
|
+
|
|
5
|
+
### Changed
|
|
6
|
+
- **Panel styling** - unified background, transparency and edge attachment for all panels
|
|
7
|
+
- **Toggle buttons** - changed arrow directions, replaced performance panel close button with collapse
|
|
8
|
+
- **Performance panel** - partial collapse mode showing only FPS and Memory
|
|
9
|
+
|
|
10
|
+
## [1.3.9] - 2025-11-19
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
- **Version info display** - removed service name, kept only version number
|
|
14
|
+
- **Version info styling** - repositioned to bottom-right corner with gray background, compact padding, subtle colors
|
|
15
|
+
|
|
16
|
+
### Added
|
|
17
|
+
- **Collapsible layer controls panel** - added collapse/expand button with arrow icon for layer controls panel
|
|
18
|
+
|
|
3
19
|
## [1.3.7] - 2025-10-29
|
|
4
20
|
|
|
5
21
|
### Added
|
|
@@ -106,23 +106,40 @@ html
|
|
|
106
106
|
| .success-message { color: #6a9955; font-size: 12px; margin-top: 4px; }
|
|
107
107
|
| .performance-overlay {
|
|
108
108
|
| position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1000;
|
|
109
|
-
| background: rgba(
|
|
110
|
-
| border-radius: 0 0
|
|
111
|
-
|
|
|
112
|
-
| transition: all 0.3s ease;
|
|
109
|
+
| background: rgba(60, 63, 65, 0.95); border: 1px solid #555555;
|
|
110
|
+
| border-top: none; border-radius: 0 0 4px 4px; padding: 0; width: fit-content;
|
|
111
|
+
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: all 0.3s ease;
|
|
113
112
|
| }
|
|
114
113
|
| .performance-toggle {
|
|
115
|
-
| position: absolute; top:
|
|
114
|
+
| position: absolute; top: 0; right: 0; bottom: 0; z-index: 1001;
|
|
116
115
|
| background: none; border: none; color: #808080; cursor: pointer;
|
|
117
|
-
| font-size:
|
|
116
|
+
| font-size: 12px; padding: 0; width: 24px; height: 100%;
|
|
118
117
|
| display: flex; align-items: center; justify-content: center;
|
|
119
|
-
| border-radius:
|
|
118
|
+
| border-radius: 0 0 4px 0; transition: all 0.2s ease;
|
|
120
119
|
| }
|
|
121
120
|
| .performance-toggle:hover {
|
|
122
121
|
| background: #4b4d4f; color: #a9b7c6;
|
|
123
122
|
| }
|
|
123
|
+
| .performance-toggle-icon {
|
|
124
|
+
| font-size: 12px; font-weight: bold; transition: transform 0.2s;
|
|
125
|
+
| display: flex; align-items: center; justify-content: center;
|
|
126
|
+
| }
|
|
127
|
+
| .performance-overlay.collapsed .performance-toggle-icon {
|
|
128
|
+
| transform: rotate(180deg);
|
|
129
|
+
| }
|
|
124
130
|
| .performance-content {
|
|
125
|
-
| padding: 8px 12px;
|
|
131
|
+
| padding: 8px 32px 8px 12px; position: relative;
|
|
132
|
+
| }
|
|
133
|
+
| .performance-overlay.collapsed .performance-secondary-metrics,
|
|
134
|
+
| .performance-overlay.collapsed #terrain-row {
|
|
135
|
+
| display: none;
|
|
136
|
+
| }
|
|
137
|
+
| .performance-overlay.collapsed .performance-main-metrics .metric {
|
|
138
|
+
| flex: 0 1 auto;
|
|
139
|
+
| }
|
|
140
|
+
| .performance-overlay.collapsed .performance-main-metrics .metric:nth-child(2),
|
|
141
|
+
| .performance-overlay.collapsed .performance-main-metrics .metric:nth-child(4) {
|
|
142
|
+
| display: none;
|
|
126
143
|
| }
|
|
127
144
|
| .metric-row {
|
|
128
145
|
| display: flex; justify-content: space-between; align-items: center;
|
|
@@ -154,11 +171,36 @@ html
|
|
|
154
171
|
| }
|
|
155
172
|
| .controls a { color: #6897bb; text-decoration: none; margin-right: 15px; }
|
|
156
173
|
| .controls a:hover { text-decoration: underline; }
|
|
157
|
-
| .layer-controls {
|
|
174
|
+
| .layer-controls-wrapper {
|
|
158
175
|
| position: absolute; top: 50%; left: 10px; transform: translateY(-50%); z-index: 1000;
|
|
159
|
-
|
|
|
176
|
+
| display: flex; align-items: center; gap: 0;
|
|
177
|
+
| }
|
|
178
|
+
| .layer-controls {
|
|
179
|
+
| background: rgba(60, 63, 65, 0.95); border: 1px solid #555555; border-right: none; padding: 15px;
|
|
160
180
|
| border-radius: 4px; color: #a9b7c6; display: flex; flex-direction: column; gap: 6px;
|
|
161
|
-
| max-width: 300px; max-height: 80vh;
|
|
181
|
+
| max-width: 300px; max-height: 80vh; transition: max-width 0.2s;
|
|
182
|
+
| overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); order: 1;
|
|
183
|
+
| }
|
|
184
|
+
| .layer-controls.collapsed {
|
|
185
|
+
| max-width: 0; padding: 15px 0; border: none; opacity: 0; pointer-events: none;
|
|
186
|
+
| }
|
|
187
|
+
| .layer-controls-toggle {
|
|
188
|
+
| background: rgba(60, 63, 65, 0.95); border: 1px solid #555555;
|
|
189
|
+
| border-left: none; border-radius: 0 4px 4px 0; padding: 8px 4px;
|
|
190
|
+
| color: #a9b7c6; cursor: pointer; display: flex; align-items: center; justify-content: center;
|
|
191
|
+
| width: 18px; height: auto; min-height: 60px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); order: 2;
|
|
192
|
+
| }
|
|
193
|
+
| .layer-controls-toggle:hover {
|
|
194
|
+
| background: rgba(75, 77, 79, 0.95); color: #ffc66d; border-color: #666666;
|
|
195
|
+
| }
|
|
196
|
+
| .layer-controls-wrapper.collapsed .layer-controls-toggle {
|
|
197
|
+
| order: 0; border-left: 1px solid #555555; border-right: 1px solid #555555; border-radius: 4px;
|
|
198
|
+
| }
|
|
199
|
+
| .layer-controls-wrapper.collapsed .toggle-icon {
|
|
200
|
+
| transform: rotate(180deg);
|
|
201
|
+
| }
|
|
202
|
+
| .toggle-icon {
|
|
203
|
+
| font-size: 12px; font-weight: bold; transition: transform 0.2s;
|
|
162
204
|
| }
|
|
163
205
|
| .mode-switcher {
|
|
164
206
|
| display: flex; gap: 2px; margin-bottom: 10px; background: #3c3f41;
|
|
@@ -273,10 +315,14 @@ html
|
|
|
273
315
|
| /* MapLibre Controls */
|
|
274
316
|
| .maplibregl-ctrl-scale, .maplibregl-ctrl-group, .maplibregl-ctrl-terrain, .maplibregl-ctrl-globe {
|
|
275
317
|
| background: rgba(60, 63, 65, 0.95) !important; border: 1px solid #555555 !important;
|
|
276
|
-
| border-radius: 4px !important;
|
|
277
|
-
|
|
|
318
|
+
| border-radius: 4px !important;
|
|
319
|
+
| }
|
|
320
|
+
| .maplibregl-ctrl-scale {
|
|
321
|
+
| color: #a9b7c6 !important; font-size: 11px !important; padding: 4px 8px !important;
|
|
322
|
+
| border-bottom: none !important; border-left: none !important;
|
|
323
|
+
| border-radius: 0 4px 0 0 !important;
|
|
324
|
+
| margin: 0 !important;
|
|
278
325
|
| }
|
|
279
|
-
| .maplibregl-ctrl-scale { color: rgb(100, 185, 61) !important; font-size: 11px !important; padding: 4px 8px !important; }
|
|
280
326
|
| .maplibregl-ctrl-scale-line { background: #6897bb !important; border: 1px solid #7aa8cc !important; }
|
|
281
327
|
| .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; }
|
|
282
328
|
| .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; }
|
|
@@ -325,23 +371,19 @@ html
|
|
|
325
371
|
| .profile-tooltip-circle { fill: #ff0000; r: 4; }
|
|
326
372
|
| .profile-tooltip-text { text-anchor: middle; fill: #ff0000; font-size: 14px; }
|
|
327
373
|
| .version-info {
|
|
328
|
-
| position: fixed; bottom:
|
|
329
|
-
|
|
|
330
|
-
|
|
|
331
|
-
| user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
|
|
332
|
-
| }
|
|
333
|
-
| .version-info-title {
|
|
334
|
-
| color: #ffc66d; font-weight: bold;
|
|
335
|
-
| font-size: 12px;
|
|
374
|
+
| position: fixed; bottom: 0; right: 0; z-index: 1000;
|
|
375
|
+
| background: rgba(60, 63, 65, 0.95); border: none; border-radius: 4px 0 0 0;
|
|
376
|
+
| padding: 4px 8px;
|
|
377
|
+
| line-height: 1.2; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
|
|
336
378
|
| }
|
|
337
379
|
| .version-info-version {
|
|
338
|
-
| color: #
|
|
380
|
+
| color: #808080; font-family: 'Courier New', monospace; text-decoration: none;
|
|
339
381
|
| transition: color 0.2s ease;
|
|
340
|
-
| font-size:
|
|
382
|
+
| font-size: 11px;
|
|
341
383
|
| user-select: auto; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto;
|
|
342
384
|
| }
|
|
343
385
|
| .version-info-version:hover {
|
|
344
|
-
| color: #
|
|
386
|
+
| color: #a9b7c6; text-decoration: none;
|
|
345
387
|
| }
|
|
346
388
|
body
|
|
347
389
|
.container
|
|
@@ -10,39 +10,40 @@ ruby:
|
|
|
10
10
|
.progress-fill
|
|
11
11
|
|
|
12
12
|
- if style_name || external_style_url || options[:style_url]
|
|
13
|
-
.layer-controls
|
|
14
|
-
.
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
.control-panel
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
.control-panel
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
13
|
+
.layer-controls-wrapper
|
|
14
|
+
.layer-controls id="layer-controls"
|
|
15
|
+
.mode-switcher
|
|
16
|
+
button.mode-button.active id="mode-filters" onclick="switchMode(this, 'filters')" Filters
|
|
17
|
+
button.mode-button id="mode-layers" onclick="switchMode(this, 'layers')" Layers
|
|
18
|
+
button.control-button onclick="toggleHoverMode()" id="hover-mode-btn" Hover Mode
|
|
19
|
+
button.control-button onclick="toggleProfileMode()" id="profile-mode-btn" style="display: none;" Elevation Profile
|
|
20
|
+
button.control-button onclick="toggleAntialias()" id="antialias-btn" Antialias
|
|
21
|
+
|
|
22
|
+
#filters-panel.control-panel.active
|
|
23
|
+
.control-panel-header
|
|
24
|
+
button.control-button onclick="toggleAllFilters()" Toggle All Filters
|
|
25
|
+
button.control-button onclick="toggleBasemap()" Show/Hide Basemap
|
|
26
|
+
.control-panel-content
|
|
27
|
+
#filter-buttons
|
|
28
|
+
|
|
29
|
+
#layers-panel.control-panel
|
|
30
|
+
.control-panel-header
|
|
31
|
+
button.control-button onclick="toggleAllLayers()" Toggle All Layers
|
|
32
|
+
button.control-button onclick="toggleBasemap()" Show/Hide Basemap
|
|
33
|
+
.control-panel-content
|
|
34
|
+
#layer-buttons
|
|
35
|
+
button.layer-controls-toggle id="layer-controls-toggle" onclick="toggleLayerControls()" title="Collapse/Expand Panel"
|
|
36
|
+
span.toggle-icon ◀
|
|
34
37
|
|
|
35
38
|
#map-container
|
|
36
39
|
#map.map-layer data-style-url="#{style_url}"
|
|
37
40
|
|
|
38
41
|
#version-info.version-info
|
|
39
|
-
span.version-info-title MapLibre Preview
|
|
40
42
|
a.version-info-version href="https://github.com/artyomb/maplibre-preview" target="_blank" v#{MapLibrePreview::VERSION}
|
|
41
43
|
|
|
42
44
|
#performance-panel.performance-overlay
|
|
43
|
-
button.performance-toggle onclick="togglePerformancePanel()" ×
|
|
44
45
|
.performance-content
|
|
45
|
-
.metric-row
|
|
46
|
+
.metric-row.performance-main-metrics
|
|
46
47
|
.metric
|
|
47
48
|
span.metric-label FPS:
|
|
48
49
|
span.metric-value#fps-value 0
|
|
@@ -55,7 +56,7 @@ ruby:
|
|
|
55
56
|
.metric
|
|
56
57
|
span.metric-label Zoom:
|
|
57
58
|
span.metric-value#zoom-level-value 0
|
|
58
|
-
.metric-row
|
|
59
|
+
.metric-row.performance-secondary-metrics
|
|
59
60
|
.metric
|
|
60
61
|
span.metric-label Tiles:
|
|
61
62
|
span.metric-value#tiles-loaded-value 0
|
|
@@ -69,6 +70,8 @@ ruby:
|
|
|
69
70
|
.metric
|
|
70
71
|
span.metric-label Terrain:
|
|
71
72
|
span.metric-value#terrain-status-value -
|
|
73
|
+
button.performance-toggle onclick="togglePerformancePanel()" title="Collapse/Expand Panel"
|
|
74
|
+
span.performance-toggle-icon ◀
|
|
72
75
|
|
|
73
76
|
javascript:
|
|
74
77
|
const mapEl = document.getElementById('map');
|
|
@@ -742,12 +745,12 @@ javascript:
|
|
|
742
745
|
|
|
743
746
|
let fpsCounter = 0, lastFpsTime = 0, frameCount = 0;
|
|
744
747
|
let performanceMonitor = null;
|
|
745
|
-
let
|
|
748
|
+
let performancePanelCollapsed = false;
|
|
746
749
|
|
|
747
750
|
const togglePerformancePanel = () => {
|
|
748
751
|
const panel = document.getElementById('performance-panel');
|
|
749
|
-
|
|
750
|
-
panel.
|
|
752
|
+
performancePanelCollapsed = !performancePanelCollapsed;
|
|
753
|
+
panel.classList.toggle('collapsed', performancePanelCollapsed);
|
|
751
754
|
};
|
|
752
755
|
|
|
753
756
|
const startPerformanceMonitoring = () => {
|
|
@@ -855,6 +858,18 @@ javascript:
|
|
|
855
858
|
btn.className = `control-button ${antialiasEnabled ? 'active' : 'inactive'}`;
|
|
856
859
|
};
|
|
857
860
|
|
|
861
|
+
let layerControlsCollapsed = false;
|
|
862
|
+
|
|
863
|
+
const toggleLayerControls = () => {
|
|
864
|
+
const wrapper = document.querySelector('.layer-controls-wrapper');
|
|
865
|
+
const controls = document.getElementById('layer-controls');
|
|
866
|
+
if (!wrapper || !controls) return;
|
|
867
|
+
|
|
868
|
+
layerControlsCollapsed = !layerControlsCollapsed;
|
|
869
|
+
controls.classList.toggle('collapsed', layerControlsCollapsed);
|
|
870
|
+
wrapper.classList.toggle('collapsed', layerControlsCollapsed);
|
|
871
|
+
};
|
|
872
|
+
|
|
858
873
|
window.switchMode = switchMode;
|
|
859
874
|
window.toggleBasemap = toggleBasemap;
|
|
860
875
|
window.toggleHoverMode = toggleHoverMode;
|
|
@@ -863,6 +878,7 @@ javascript:
|
|
|
863
878
|
window.togglePerformancePanel = togglePerformancePanel;
|
|
864
879
|
window.toggleProfileMode = toggleProfileMode;
|
|
865
880
|
window.toggleAntialias = toggleAntialias;
|
|
881
|
+
window.toggleLayerControls = toggleLayerControls;
|
|
866
882
|
window.hideProfile = hideProfile;
|
|
867
883
|
|
|
868
884
|
initializeMap();
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: maplibre-preview
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.3.
|
|
4
|
+
version: 1.3.10
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Alexander Ludov
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2025-
|
|
11
|
+
date: 2025-11-20 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rack
|