Add thumbnail image support to base layer switcher

[Copilot]

The base layer switcher previously rendered only a radio-button list. This adds optional thumbnail previews per base layer, similar to Cesium's layer picker UX.

Changes

IExternalBaseLayer (src/api/common.ts)

• Added optional thumbnailImageUrl?: string field — fully backward-compatible; existing configs are unaffected.

BaseLayerSwitcher (src/components/base-layer-switcher.tsx)

• When any layer in the set has thumbnailImageUrl set, the component switches to a thumbnail grid layout.
• Each tile shows the image (or a grey text placeholder if no URL), a label below, and a blue border on the selected tile.
• NONE is always the first tile.
• Layers without thumbnailImageUrl still render correctly alongside layers that have one.
• Full keyboard accessibility: role="button", tabIndex, aria-label, aria-pressed, and onKeyDown (Enter/Space).
• When no layer has a thumbnail URL, the original radio-button list renders unchanged.

CSS (src/styles/index.css)

• Added .base-layer-switcher-thumbnail-* classes for the flex grid, tile sizing, selection highlight, image fit, placeholder, and label.

Usage

externalBaseLayers: [
    {
        name: "OpenStreetMap",
        kind: "OSM",
        thumbnailImageUrl: "https://example.com/osm-thumb.png"
    },
    {
        name: "Satellite",
        kind: "BingMaps",
        visible: true,
        thumbnailImageUrl: "https://example.com/sat-thumb.png"
    },
    // Layers without thumbnailImageUrl still work — rendered with a text placeholder tile
    { name: "Stamen - Toner", kind: "Stamen" }
]

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• storybook.js.org
  • Triggering command: /opt/hostedtoolcache/node/24.14.0/x64/bin/node /opt/hostedtoolcache/node/24.14.0/x64/bin/node /home/REDACTED/work/mapguide-react-layout/mapguide-react-layout/node_modules/.bin/storybook build -c .storybook (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Base layer thumbnails for base layer switcher</issue_title>
<issue_description>If you see base layer switchers in other high-quality interactive maps (eg. Cesium.js) they generally include thumbnails of the various external base layers. Here's an example:

Our current base map layer switcher simply presents a flyout with a radio button list with one base map per radio button.

We can improve this somewhat by adding a preview thumbnail image for each base map like the cesium example.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Base layer thumbnails for base layer switcher #1108

---

📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.

[coveralls]

coverage: 39.578% (+0.09%) from 39.489%
when pulling 0790501 on copilot/add-base-layer-thumbnails
into 18ef117 on master.