maplibre-preview 1.2.7 → 1.3.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 435a1fa5a333e26e727a36278e76340f0d3dd7599dc981c1b8bf756d541a208e
-  data.tar.gz: 0f6a6667ca6065865e9cd14642a4b63850cb271e3a416fec598a8e15e4c6ae9d
+  metadata.gz: 576fc35a947103556613fb983552a7fea7045b5109762b666ff4541dc08a3fb1
+  data.tar.gz: 91d004357c42439be1206b8d732834f5ed4b176ca88d2461c1a243a53c2a2564
 SHA512:
-  metadata.gz: 7fec8cd86f4f8b66fd4400ec2a3fcc8983a1a9042f9754d12b22f8f353e55790c4ff6a395d1ff70f304cc502391ba2eb3a7754ea353f3ebe1bdffc2632341eec
-  data.tar.gz: dd9b8db806f1a62b90841b38c56b024897bc95c448899e2cf9b02426a05090b12ef0f207671f9c6c95b85bb159797979ea8591605f204bda06dab417559dcc8d
+  metadata.gz: be4c9c01fa9268120f9faa29001b571774dcadc03d190c3bf619753c06a62cd76da891d89c44f9a23eb7255863ac24c98778c9a7cbb6bc7cee86705451ada748
+  data.tar.gz: a0ca0a43e7fe67801a51e730303559eb6af9718e15d145bdd14a3d77e0e22f6eed48ab355203cb6088462954ac57d47d2dcd1de121d2fa96ee76acf38b3fbc6e

data/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [1.3.9] - 2025-11-19
+
+### Changed
+- **Version info display** - removed service name, kept only version number
+- **Version info styling** - repositioned to bottom-right corner with gray background, compact padding, subtle colors
+
+### Added
+- **Collapsible layer controls panel** - added collapse/expand button with arrow icon for layer controls panel
+
+## [1.3.7] - 2025-10-29
+
+### Added
+- **Antialias toggle control** - button to enable/disable antialias with localStorage persistence and page reload
+- **Style-based initial view** - support for `center` and `zoom` properties from style JSON according to MapLibre Style Spec
+
+### Changed
+- **Default map center** - updated to `[96.63, 64.81]`
+
 ## [1.2.7] - 2025-10-20
 
 ### Fixed

data/README.md

@@ -118,8 +118,8 @@ This starts a complete web server with:
 
 The gem uses fixed configurations for optimal compatibility:
 
-- **Map Center**: `[35.15, 47.41]`
-- **Initial Zoom**: `2`
+- **Map Center**: `[96.63, 64.81]` (default, can be overridden by style's `center` property)
+- **Initial Zoom**: `2` (default, can be overridden by style's `zoom` property)
 - **Basemap**: OpenStreetMap tiles with 0.8 opacity
 - **Library Versions**: MapLibre GL JS 5.7.3, MapLibre Contour 0.1.0, D3.js 7
 

data/docs/README_RU.md

@@ -118,8 +118,8 @@ MapLibrePreview::App.run!
 
 Gem использует фиксированные настройки:
 
-- **Центр карты**: `[35.15, 47.41]`
-- **Начальный зум**: `2`
+- **Центр карты**: `[96.63, 64.81]` (по умолчанию, можно переопределить свойством `center` в стиле)
+- **Начальный зум**: `2` (по умолчанию, можно переопределить свойством `zoom` в стиле)
 - **Базовая карта**: Тайлы OpenStreetMap с прозрачностью 0.8
 - **Версии библиотек**: MapLibre GL JS 5.7.3, MapLibre Contour 0.1.0, D3.js 7
 

data/lib/maplibre-preview/version.rb

@@ -1,3 +1,3 @@
 module MapLibrePreview
-  VERSION = '1.2.7'
+  VERSION = '1.3.9'
 end

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

@@ -154,11 +154,36 @@ html
       | }
       | .controls a { color: #6897bb; text-decoration: none; margin-right: 15px; }
       | .controls a:hover { text-decoration: underline; }
-      | .layer-controls {
+      | .layer-controls-wrapper {
       |   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;
+      |   display: flex; align-items: center; gap: 0;
+      | }
+      | .layer-controls {
+      |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555; border-right: none; padding: 15px;
       |   border-radius: 4px; color: #a9b7c6; display: flex; flex-direction: column; gap: 6px;
-      |   max-width: 300px; max-height: 80vh;
+      |   max-width: 300px; max-height: 80vh; transition: max-width 0.2s;
+      |   overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); order: 1;
+      | }
+      | .layer-controls.collapsed {
+      |   max-width: 0; padding: 15px 0; border: none; opacity: 0; pointer-events: none;
+      | }
+      | .layer-controls-toggle {
+      |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555;
+      |   border-left: none; border-radius: 0 4px 4px 0; padding: 8px 4px;
+      |   color: #a9b7c6; cursor: pointer; display: flex; align-items: center; justify-content: center;
+      |   width: 18px; height: auto; min-height: 60px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); order: 2;
+      | }
+      | .layer-controls-toggle:hover {
+      |   background: rgba(75, 77, 79, 0.95); color: #ffc66d; border-color: #666666;
+      | }
+      | .layer-controls-wrapper.collapsed .layer-controls-toggle {
+      |   order: 0; border-left: 1px solid #555555; border-right: 1px solid #555555; border-radius: 4px;
+      | }
+      | .layer-controls-wrapper.collapsed .toggle-icon {
+      |   transform: rotate(180deg);
+      | }
+      | .toggle-icon {
+      |   font-size: 12px; font-weight: bold; transition: transform 0.2s;
       | }
       | .mode-switcher {
       |   display: flex; gap: 2px; margin-bottom: 10px; background: #3c3f41;
@@ -325,23 +350,19 @@ html
       | .profile-tooltip-circle { fill: #ff0000; r: 4; }
       | .profile-tooltip-text { text-anchor: middle; fill: #ff0000; font-size: 14px; }
       | .version-info {
-      |   position: fixed; bottom: 10px; right: 10px; z-index: 1000;
-      |   color: #a9b7c6; font-size: 13px; line-height: 1.3;
-      |   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
-      |   user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
-      | }
-      | .version-info-title {
-      |   color: #ffc66d; font-weight: bold;
-      |   font-size: 12px;
+      |   position: fixed; bottom: 0; right: 0; z-index: 1000;
+      |   background: rgba(60, 63, 65, 0.85); border: none; border-radius: 4px 0 0 0;
+      |   padding: 4px 8px; backdrop-filter: blur(5px);
+      |   line-height: 1.2; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
       | }
       | .version-info-version {
-      |   color: #6897bb; font-family: 'Courier New', monospace; text-decoration: none;
+      |   color: #808080; font-family: 'Courier New', monospace; text-decoration: none;
       |   transition: color 0.2s ease;
-      |   font-size: 13px;
+      |   font-size: 11px;
       |   user-select: auto; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto;
       | }
       | .version-info-version:hover {
-      |   color: #7aa8cc; text-decoration: underline;
+      |   color: #a9b7c6; text-decoration: none;
       | }
   body
     .container

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

@@ -10,32 +10,35 @@ ruby:
       .progress-fill
 
 - if style_name || external_style_url || options[:style_url]
-  .layer-controls
-    .mode-switcher
-      button.mode-button.active id="mode-filters" onclick="switchMode(this, 'filters')" Filters
-      button.mode-button id="mode-layers" onclick="switchMode(this, 'layers')" Layers
-    button.control-button onclick="toggleHoverMode()" id="hover-mode-btn" Hover Mode
-    button.control-button onclick="toggleProfileMode()" id="profile-mode-btn" style="display: none;" Elevation Profile
-
-    #filters-panel.control-panel.active
-      .control-panel-header
-        button.control-button onclick="toggleAllFilters()" Toggle All Filters
-        button.control-button onclick="toggleBasemap()" Show/Hide Basemap
-      .control-panel-content
-        #filter-buttons
-
-    #layers-panel.control-panel
-      .control-panel-header
-        button.control-button onclick="toggleAllLayers()" Toggle All Layers
-        button.control-button onclick="toggleBasemap()" Show/Hide Basemap
-      .control-panel-content
-        #layer-buttons
+  .layer-controls-wrapper
+    .layer-controls id="layer-controls"
+      .mode-switcher
+        button.mode-button.active id="mode-filters" onclick="switchMode(this, 'filters')" Filters
+        button.mode-button id="mode-layers" onclick="switchMode(this, 'layers')" Layers
+      button.control-button onclick="toggleHoverMode()" id="hover-mode-btn" Hover Mode
+      button.control-button onclick="toggleProfileMode()" id="profile-mode-btn" style="display: none;" Elevation Profile
+      button.control-button onclick="toggleAntialias()" id="antialias-btn" Antialias
+
+      #filters-panel.control-panel.active
+        .control-panel-header
+          button.control-button onclick="toggleAllFilters()" Toggle All Filters
+          button.control-button onclick="toggleBasemap()" Show/Hide Basemap
+        .control-panel-content
+          #filter-buttons
+
+      #layers-panel.control-panel
+        .control-panel-header
+          button.control-button onclick="toggleAllLayers()" Toggle All Layers
+          button.control-button onclick="toggleBasemap()" Show/Hide Basemap
+        .control-panel-content
+          #layer-buttons
+    button.layer-controls-toggle id="layer-controls-toggle" onclick="toggleLayerControls()" title="Collapse/Expand Panel"
+      span.toggle-icon ▶
 
 #map-container
   #map.map-layer data-style-url="#{style_url}"
 
   #version-info.version-info
-    span.version-info-title MapLibre Preview 
     a.version-info-version href="https://github.com/artyomb/maplibre-preview" target="_blank" v#{MapLibrePreview::VERSION}
 
   #performance-panel.performance-overlay
@@ -76,6 +79,7 @@ javascript:
     let hoverMode = 'click';
     let layerStates = {};
     let map = null;
+    let antialiasEnabled = localStorage.getItem('antialiasEnabled') !== 'false';
     let styleLoaded = false, resourcesLoaded = 0, totalResources = 0;
     let tilesLoaded = 0, tilesTotal = 0;
     let currentStyle = null;
@@ -175,15 +179,23 @@ javascript:
         }
     };
 
-    const createMap = (container, style) => new maplibregl.Map({
-        container,
-        style,
-        center: [35.15, 47.41],
-        zoom: 2,
-        attributionControl: false,
-        validateStyle: false,
-        antialias: true
-    });
+    const createMap = (container, style) => {
+        const defaultCenter = [96.637778, 64.811389];
+        const defaultZoom = 2;
+        
+        const center = Array.isArray(style?.center) && style.center.length === 2 ? style.center : defaultCenter;
+        const zoom = typeof style?.zoom === 'number' ? style.zoom : defaultZoom;
+        
+        return new maplibregl.Map({
+            container,
+            style,
+            center,
+            zoom,
+            attributionControl: false,
+            validateStyle: false,
+            antialias: antialiasEnabled
+        });
+    };
 
     const addBasemapToStyle = (originalStyle) => {
         const modifiedStyle = JSON.parse(JSON.stringify(originalStyle));
@@ -389,7 +401,7 @@ javascript:
 
     const setupPerformanceMonitoring = () => {
         [startPerformanceMonitoring, () => requestAnimationFrame(countFrame),
-            updateHoverModeButton, updateBasemapButton].forEach(fn => fn());
+            updateHoverModeButton, updateBasemapButton, updateAntialiasButton].forEach(fn => fn());
     };
 
     const toggleBasemap = () => {
@@ -831,6 +843,32 @@ javascript:
         requestAnimationFrame(countFrame);
     };
 
+    const toggleAntialias = () => {
+        antialiasEnabled = !antialiasEnabled;
+        localStorage.setItem('antialiasEnabled', antialiasEnabled.toString());
+        window.location.reload();
+    };
+
+    const updateAntialiasButton = () => {
+        const btn = document.getElementById('antialias-btn');
+        if (!btn) return;
+        
+        btn.textContent = `Antialias: ${antialiasEnabled ? 'ON' : 'OFF'}`;
+        btn.className = `control-button ${antialiasEnabled ? 'active' : 'inactive'}`;
+    };
+
+    let layerControlsCollapsed = false;
+
+    const toggleLayerControls = () => {
+        const wrapper = document.querySelector('.layer-controls-wrapper');
+        const controls = document.getElementById('layer-controls');
+        if (!wrapper || !controls) return;
+
+        layerControlsCollapsed = !layerControlsCollapsed;
+        controls.classList.toggle('collapsed', layerControlsCollapsed);
+        wrapper.classList.toggle('collapsed', layerControlsCollapsed);
+    };
+
     window.switchMode = switchMode;
     window.toggleBasemap = toggleBasemap;
     window.toggleHoverMode = toggleHoverMode;
@@ -838,6 +876,8 @@ javascript:
     window.toggleAllLayers = toggleAllLayers;
     window.togglePerformancePanel = togglePerformancePanel;
     window.toggleProfileMode = toggleProfileMode;
+    window.toggleAntialias = toggleAntialias;
+    window.toggleLayerControls = toggleLayerControls;
     window.hideProfile = hideProfile;
 
     initializeMap();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: maplibre-preview
 version: !ruby/object:Gem::Version
-  version: 1.2.7
+  version: 1.3.9
 platform: ruby
 authors:
 - Alexander Ludov
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-10-20 00:00:00.000000000 Z
+date: 2025-11-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rack