feat: match MapLibre style switcher to basemaps control

[fank]

Summary

• Replaces the flat text button bar in the MapLibre style switcher with round image icons matching the existing L.Control.Basemaps visual style
• Each style preview is generated by rendering an offscreen MapLibre map at the Arma 3 map center and capturing it as a canvas snapshot
• Control collapses to show one "alt" icon and expands on hover (desktop) or tap (mobile), identical to the raster basemaps control

Test plan

• Load a map with multiple MapLibre styles available (e.g. topo, topo-dark, satellite)
• Verify round preview icons appear with actual map imagery (not just background color)
• Verify control collapses to a single icon and expands on hover
• Verify clicking a style switches the map and collapses the control
• Verify active style has orange border
• Verify mobile: first tap expands, second tap selects
• Verify style preference persists across page reloads (localStorage)
• Verify control hides when only one style is available

[gemini-code-assist]

Summary of Changes

Hello @fank, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience of the MapLibre style switcher by revamping its visual design and interaction model. It transitions from a basic text-based button bar to a more intuitive and aesthetically pleasing control featuring round image icons, consistent with the existing basemaps control. The change also introduces dynamic preview generation for map styles and implements a responsive collapse/expand mechanism.

Highlights

• Visual Redesign: The MapLibre style switcher has been visually redesigned to use round image icons, matching the aesthetic of the existing L.Control.Basemaps.
• Dynamic Style Previews: Each style preview is now dynamically generated by rendering an offscreen MapLibre map at a specified center and zoom, then capturing a canvas snapshot.
• Interactive Collapse/Expand: The control now collapses to show a single 'alt' icon and expands on hover (for desktop) or tap (for mobile), mirroring the behavior of the raster basemaps control.

Changelog

• static/leaflet/L.Control.MaplibreStyles.css
  • Refactored CSS to remove styles for old text buttons and introduce new styles for image-based style items.
  • Added specific styles for collapsed states, active items (orange border), and the 'alt' item.
  • Applied visual enhancements like border-radius and box-shadow to style preview images.
• static/leaflet/L.Control.MaplibreStyles.js
  • Introduced center and zoom options for configuring map preview snapshots.
  • Updated the _candidates structure to optionally support iconURL for predefined icons.
  • Replaced button creation with div and img elements for style items.
  • Implemented _renderPreview function to create and capture offscreen MapLibre map snapshots for style previews.
  • Modified event handling for style selection to include mobile-specific tap behavior (expand then select) and control collapsing.
  • Added mouseenter and mouseleave event listeners for desktop hover-based expansion/collapse.
  • Introduced _updateAlt method to dynamically set the 'alt' class on the next available style when the control is collapsed.
  • Switched from _buttons array to _items array for managing style elements.
  • Added L.DomEvent.disableScrollPropagation to the control container for non-touch devices.
• static/scripts/ocap.js
  • Updated the L.control.maplibreStyles instantiation to pass center and zoom options, derived from worldSizeDeg, for the map preview rendering.

Activity

• The pull request was created by fank.
• The author provided a comprehensive test plan in the PR description, outlining various scenarios to verify the new functionality.
• No other review comments or activities have been recorded yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request is a great enhancement, replacing the text-based style switcher with a more visually appealing icon-based one that matches the existing basemaps control. The implementation for generating style previews by rendering an offscreen MapLibre map is well-executed. The code is generally well-structured. I have a couple of suggestions to improve performance and robustness, primarily around the cleanup logic in the preview rendering and caching the list of available styles to avoid redundant calculations. Overall, this is a solid feature addition.