maplibre-preview 1.6.0 → 1.8.0
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 +30 -0
- data/bin/maplibre-preview +1 -1
- data/lib/maplibre-preview/public/js/overlay_layout.js +415 -0
- data/lib/maplibre-preview/public/js/tilegrid.js +9 -0
- data/lib/maplibre-preview/version.rb +1 -1
- data/lib/maplibre-preview/views/maplibre_layout.slim +137 -6
- data/lib/maplibre-preview/views/maplibre_map.slim +474 -14
- data/spec/maplibre_preview_spec.rb +22 -1
- metadata +3 -2
|
@@ -10,6 +10,7 @@ html
|
|
|
10
10
|
script[src="#{base_path}/vendor/maplibre-gl/maplibre-gl.js"]
|
|
11
11
|
script[src="#{base_path}/vendor/maplibre-contour/index.min.js"]
|
|
12
12
|
script[src="#{base_path}/vendor/d3/d3.v7.min.js"]
|
|
13
|
+
script[src="#{base_path}/js/overlay_layout.js"]
|
|
13
14
|
script[src="#{base_path}/js/filters.js"]
|
|
14
15
|
script[src="#{base_path}/js/contour.js"]
|
|
15
16
|
script[src="#{base_path}/js/tilegrid.js"]
|
|
@@ -174,7 +175,7 @@ html
|
|
|
174
175
|
| .controls a { color: #6897bb; text-decoration: none; margin-right: 15px; }
|
|
175
176
|
| .controls a:hover { text-decoration: underline; }
|
|
176
177
|
| .layer-controls-wrapper {
|
|
177
|
-
| position:
|
|
178
|
+
| position: static; z-index: 1000;
|
|
178
179
|
| display: flex; align-items: flex-start; gap: 0;
|
|
179
180
|
| }
|
|
180
181
|
| .layer-controls {
|
|
@@ -196,7 +197,7 @@ html
|
|
|
196
197
|
| border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
197
198
|
| }
|
|
198
199
|
| .control-section-wrapper:not(.collapsed) .control-section {
|
|
199
|
-
| border-
|
|
200
|
+
| border-radius: 4px;
|
|
200
201
|
| }
|
|
201
202
|
| .control-section.collapsed {
|
|
202
203
|
| gap: 0;
|
|
@@ -204,6 +205,22 @@ html
|
|
|
204
205
|
| .control-section-header {
|
|
205
206
|
| display: flex; align-items: center; justify-content: space-between; gap: 8px;
|
|
206
207
|
| }
|
|
208
|
+
| .overlay-managed-panel {
|
|
209
|
+
| z-index: 1000; will-change: left, top;
|
|
210
|
+
| }
|
|
211
|
+
| .overlay-dragging {
|
|
212
|
+
| cursor: grabbing;
|
|
213
|
+
| user-select: none;
|
|
214
|
+
| transition: none !important;
|
|
215
|
+
| }
|
|
216
|
+
| .overlay-panel-handle {
|
|
217
|
+
| cursor: grab; touch-action: none; user-select: none;
|
|
218
|
+
| -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
|
|
219
|
+
| }
|
|
220
|
+
| .overlay-panel-handle:focus-visible {
|
|
221
|
+
| outline: 1px solid #6897bb;
|
|
222
|
+
| outline-offset: 2px;
|
|
223
|
+
| }
|
|
207
224
|
| .control-section-title {
|
|
208
225
|
| color: #ffc66d; font-size: 11px; font-weight: bold; line-height: 1.2;
|
|
209
226
|
| text-transform: uppercase;
|
|
@@ -276,7 +293,113 @@ html
|
|
|
276
293
|
| color: #6897bb; font-family: 'Courier New', monospace; font-weight: bold;
|
|
277
294
|
| }
|
|
278
295
|
| .setting-range {
|
|
279
|
-
| width: 100%; accent-color: #6897bb; cursor: pointer;
|
|
296
|
+
| width: 100%; height: 18px; margin: 0; accent-color: #6897bb; cursor: pointer;
|
|
297
|
+
| background: transparent; appearance: none; -webkit-appearance: none;
|
|
298
|
+
| }
|
|
299
|
+
| .setting-range:focus {
|
|
300
|
+
| outline: none;
|
|
301
|
+
| }
|
|
302
|
+
| .setting-range:focus-visible::-webkit-slider-thumb {
|
|
303
|
+
| box-shadow: 0 0 0 2px #313335, 0 0 0 4px #6897bb;
|
|
304
|
+
| }
|
|
305
|
+
| .setting-range:focus-visible::-moz-range-thumb {
|
|
306
|
+
| box-shadow: 0 0 0 2px #313335, 0 0 0 4px #6897bb;
|
|
307
|
+
| }
|
|
308
|
+
| .setting-range::-webkit-slider-runnable-track {
|
|
309
|
+
| height: 6px; background: #313335; border: 1px solid #555555; border-radius: 3px;
|
|
310
|
+
| }
|
|
311
|
+
| .setting-range::-moz-range-track {
|
|
312
|
+
| height: 6px; background: #313335; border: 1px solid #555555; border-radius: 3px;
|
|
313
|
+
| }
|
|
314
|
+
| .setting-range::-moz-range-progress {
|
|
315
|
+
| height: 6px; background: #6897bb; border-radius: 3px;
|
|
316
|
+
| }
|
|
317
|
+
| .setting-range::-webkit-slider-thumb {
|
|
318
|
+
| width: 14px; height: 14px; margin-top: -5px; background: #6897bb;
|
|
319
|
+
| border: 1px solid #7aa8cc; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
320
|
+
| -webkit-appearance: none; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
|
321
|
+
| }
|
|
322
|
+
| .setting-range::-moz-range-thumb {
|
|
323
|
+
| width: 14px; height: 14px; background: #6897bb;
|
|
324
|
+
| border: 1px solid #7aa8cc; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
325
|
+
| transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
|
326
|
+
| }
|
|
327
|
+
| .setting-range:hover::-webkit-slider-runnable-track {
|
|
328
|
+
| border-color: #666666;
|
|
329
|
+
| }
|
|
330
|
+
| .setting-range:hover::-moz-range-track {
|
|
331
|
+
| border-color: #666666;
|
|
332
|
+
| }
|
|
333
|
+
| .setting-range:hover::-webkit-slider-thumb {
|
|
334
|
+
| background: #7aa8cc; border-color: #8bb9dd;
|
|
335
|
+
| }
|
|
336
|
+
| .setting-range:hover::-moz-range-thumb {
|
|
337
|
+
| background: #7aa8cc; border-color: #8bb9dd;
|
|
338
|
+
| }
|
|
339
|
+
| .style-parameter-fields {
|
|
340
|
+
| display: flex; flex-direction: column; gap: 8px;
|
|
341
|
+
| }
|
|
342
|
+
| .style-parameters-overlay {
|
|
343
|
+
| position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
|
|
344
|
+
| z-index: 1000; width: min(520px, calc(100vw - 32px));
|
|
345
|
+
| background: rgba(60, 63, 65, 0.95); border: 1px solid #555555;
|
|
346
|
+
| border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
347
|
+
| color: #a9b7c6; overflow: hidden;
|
|
348
|
+
| }
|
|
349
|
+
| .style-parameters-header {
|
|
350
|
+
| display: flex; align-items: center; gap: 12px;
|
|
351
|
+
| width: 100%; background: transparent; color: inherit; border: none;
|
|
352
|
+
| padding: 10px 12px; text-align: left;
|
|
353
|
+
| }
|
|
354
|
+
| .style-parameters-header:hover {
|
|
355
|
+
| background: rgba(75, 77, 79, 0.95);
|
|
356
|
+
| }
|
|
357
|
+
| .style-parameters-toggle {
|
|
358
|
+
| display: inline-flex; align-items: center; justify-content: center;
|
|
359
|
+
| width: 22px; height: 22px; background: transparent; color: #a9b7c6;
|
|
360
|
+
| border: 1px solid transparent; border-radius: 2px; cursor: pointer;
|
|
361
|
+
| }
|
|
362
|
+
| .style-parameters-toggle:hover {
|
|
363
|
+
| background: #4b4d4f; border-color: #555555;
|
|
364
|
+
| }
|
|
365
|
+
| .style-parameters-title {
|
|
366
|
+
| color: #ffc66d; font-size: 11px; font-weight: bold; line-height: 1.2;
|
|
367
|
+
| text-transform: uppercase;
|
|
368
|
+
| }
|
|
369
|
+
| .style-parameters-summary {
|
|
370
|
+
| display: inline-flex; align-items: center; gap: 4px; color: #6897bb;
|
|
371
|
+
| font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold;
|
|
372
|
+
| }
|
|
373
|
+
| .style-parameters-toggle-icon {
|
|
374
|
+
| color: #a9b7c6; font-size: 12px; font-weight: bold; line-height: 1;
|
|
375
|
+
| }
|
|
376
|
+
| .style-parameters-overlay:not(.collapsed) .style-parameters-toggle-icon {
|
|
377
|
+
| transform: rotate(180deg);
|
|
378
|
+
| }
|
|
379
|
+
| .style-parameters-body {
|
|
380
|
+
| display: flex; flex-direction: column; gap: 10px;
|
|
381
|
+
| max-height: min(48vh, 420px); overflow-y: auto;
|
|
382
|
+
| padding: 0 12px 12px; border-top: 1px solid #555555;
|
|
383
|
+
| }
|
|
384
|
+
| .style-parameters-overlay.collapsed .style-parameters-body {
|
|
385
|
+
| display: none;
|
|
386
|
+
| }
|
|
387
|
+
| .style-parameter-row {
|
|
388
|
+
| display: flex; flex-direction: column; gap: 4px;
|
|
389
|
+
| }
|
|
390
|
+
| .style-parameter-label {
|
|
391
|
+
| color: #808080; font-size: 10px; font-weight: bold;
|
|
392
|
+
| text-transform: uppercase;
|
|
393
|
+
| }
|
|
394
|
+
| .style-parameter-input {
|
|
395
|
+
| width: 100%; background: #313335; color: #a9b7c6; border: 1px solid #555555;
|
|
396
|
+
| border-radius: 3px; padding: 6px 8px; font-size: 11px; box-sizing: border-box;
|
|
397
|
+
| }
|
|
398
|
+
| .style-parameter-input:focus {
|
|
399
|
+
| outline: none; border-color: #6897bb; box-shadow: 0 0 0 1px #6897bb;
|
|
400
|
+
| }
|
|
401
|
+
| .style-parameter-actions {
|
|
402
|
+
| display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
|
|
280
403
|
| }
|
|
281
404
|
| .style-panel {
|
|
282
405
|
| flex: 1; min-height: 0; max-height: calc(80vh - 245px); width: max-content; max-width: 100%;
|
|
@@ -376,7 +499,7 @@ html
|
|
|
376
499
|
| background: rgba(60, 63, 65, 0.95); border: 1px solid #555555;
|
|
377
500
|
| border-radius: 6px; padding: 12px 20px; z-index: 1000;
|
|
378
501
|
| backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
379
|
-
| transition:
|
|
502
|
+
| transition: opacity 0.3s ease; display: none;
|
|
380
503
|
| }
|
|
381
504
|
| .loading-progress { text-align: center; color: #a9b7c6; }
|
|
382
505
|
| .loading-text { font-size: 14px; color: #a9b7c6; margin-bottom: 8px; }
|
|
@@ -389,6 +512,10 @@ html
|
|
|
389
512
|
| transition: width 0.3s ease; width: 0%;
|
|
390
513
|
| }
|
|
391
514
|
| /* MapLibre Controls */
|
|
515
|
+
| .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right,
|
|
516
|
+
| .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right {
|
|
517
|
+
| z-index: 1000 !important;
|
|
518
|
+
| }
|
|
392
519
|
| .maplibregl-ctrl-scale, .maplibregl-ctrl-group, .maplibregl-ctrl-terrain, .maplibregl-ctrl-globe {
|
|
393
520
|
| background: rgba(60, 63, 65, 0.95) !important; border: 1px solid #555555 !important;
|
|
394
521
|
| border-radius: 4px !important;
|
|
@@ -414,10 +541,12 @@ html
|
|
|
414
541
|
| background: rgba(60, 63, 65, 0.95); border: 1px solid #555555;
|
|
415
542
|
| border-radius: 6px; padding: 12px; width: 70vw; max-width: 800px;
|
|
416
543
|
| backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
544
|
+
| overflow: hidden;
|
|
417
545
|
| }
|
|
418
546
|
| .profile-header {
|
|
419
|
-
| display: flex; justify-content:
|
|
547
|
+
| display: flex; justify-content: flex-start; align-items: center;
|
|
420
548
|
| margin-bottom: 8px; border-bottom: 1px solid #555555; padding-bottom: 8px;
|
|
549
|
+
| gap: 8px;
|
|
421
550
|
| }
|
|
422
551
|
| .profile-title { color: #ffc66d; font-weight: bold; font-size: 12px; }
|
|
423
552
|
| .profile-close {
|
|
@@ -425,6 +554,7 @@ html
|
|
|
425
554
|
| font-size: 14px; padding: 0; width: 16px; height: 16px;
|
|
426
555
|
| display: flex; align-items: center; justify-content: center;
|
|
427
556
|
| border-radius: 2px; transition: all 0.2s ease;
|
|
557
|
+
| margin-left: auto;
|
|
428
558
|
| }
|
|
429
559
|
| .profile-close:hover { background: #4b4d4f; color: #a9b7c6; }
|
|
430
560
|
| .profile-stats {
|
|
@@ -469,7 +599,7 @@ html
|
|
|
469
599
|
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
470
600
|
| }
|
|
471
601
|
| .tilegrid-header {
|
|
472
|
-
| display: flex; justify-content:
|
|
602
|
+
| display: flex; justify-content: flex-start; align-items: center; gap: 8px;
|
|
473
603
|
| margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #555555;
|
|
474
604
|
| }
|
|
475
605
|
| .tilegrid-title {
|
|
@@ -480,6 +610,7 @@ html
|
|
|
480
610
|
| font-size: 14px; padding: 0; width: 16px; height: 16px;
|
|
481
611
|
| display: flex; align-items: center; justify-content: center;
|
|
482
612
|
| border-radius: 2px; transition: all 0.2s ease;
|
|
613
|
+
| margin-left: auto;
|
|
483
614
|
| }
|
|
484
615
|
| .tilegrid-close:hover {
|
|
485
616
|
| background: #4b4d4f; color: #a9b7c6;
|