@defra/interactive-map 0.0.16-alpha → 0.0.18-alpha

package/providers/maplibre/src/utils/symbolImages.js

@@ -0,0 +1,147 @@
+import { getSymbolDef, getSymbolStyleColors, getSymbolViewBox } from '../../../../src/utils/symbolUtils.js'
+import { rasteriseToImageData } from './rasteriseToImageData.js'
+
+const ANCHOR_LOW = 0.25
+const ANCHOR_HIGH = 0.75
+const HASH_BASE = 36
+
+const hashString = (str) => {
+  let hash = 0
+  for (const ch of str) {
+    hash = Math.trunc(((hash << 5) - hash) + ch.codePointAt(0))
+  }
+  return Math.abs(hash).toString(HASH_BASE)
+}
+
+// ─── MapLibre-specific anchor conversion ──────────────────────────────────────
+
+/**
+ * Converts a fractional [ax, ay] anchor to a MapLibre icon-anchor string.
+ * Snaps to the nearest of the 9 standard positions.
+ *
+ * @param {number[]} anchor - [x, y] in 0–1 space
+ * @returns {string} MapLibre icon-anchor value
+ */
+const xAnchor = (ax) => {
+  if (ax <= ANCHOR_LOW) {
+    return 'left'
+  }
+  if (ax >= ANCHOR_HIGH) {
+    return 'right'
+  }
+  return ''
+}
+
+const yAnchor = (ay) => {
+  if (ay <= ANCHOR_LOW) {
+    return 'top'
+  }
+  if (ay >= ANCHOR_HIGH) {
+    return 'bottom'
+  }
+  return ''
+}
+
+export const anchorToMaplibre = ([ax, ay]) => {
+  const x = xAnchor(ax)
+  const y = yAnchor(ay)
+  return (y + (x && y ? '-' : '') + x) || 'center'
+}
+
+// ─── Image IDs ────────────────────────────────────────────────────────────────
+
+/**
+ * Returns a deterministic image ID for a symbol in normal or selected state.
+ * Based on the hash of the fully resolved SVG content and the pixel ratio.
+ *
+ * @param {Object} dataset
+ * @param {Object} mapStyle - Current map style config (provides id, selectedColor, haloColor)
+ * @param {Object} symbolRegistry
+ * @param {boolean} [selected=false]
+ * @param {number} [pixelRatio=2] - Device pixel ratio × map size scale factor
+ * @returns {string|null}
+ */
+export const getSymbolImageId = (dataset, mapStyle, symbolRegistry, selected = false, pixelRatio = 2) => {
+  const symbolDef = getSymbolDef(dataset, symbolRegistry)
+  if (!symbolDef) {
+    return null
+  }
+  const styleColors = getSymbolStyleColors(dataset)
+  const resolved = selected
+    ? symbolRegistry.resolveSelected(symbolDef, styleColors, mapStyle)
+    : symbolRegistry.resolve(symbolDef, styleColors, mapStyle)
+  return `symbol-${selected ? 'sel-' : ''}${hashString(resolved)}-${pixelRatio}x`
+}
+
+// ─── Rasterisation ────────────────────────────────────────────────────────────
+
+// Module-level cache: imageId → ImageData. Avoids re-rasterising identical symbols.
+const imageDataCache = new Map()
+
+const rasteriseSymbolImage = async (dataset, mapStyle, symbolRegistry, selected, pixelRatio) => {
+  const symbolDef = getSymbolDef(dataset, symbolRegistry)
+  if (!symbolDef) {
+    return null
+  }
+  const styleColors = getSymbolStyleColors(dataset)
+  const resolvedContent = selected
+    ? symbolRegistry.resolveSelected(symbolDef, styleColors, mapStyle)
+    : symbolRegistry.resolve(symbolDef, styleColors, mapStyle)
+
+  const imageId = `symbol-${selected ? 'sel-' : ''}${hashString(resolvedContent)}-${pixelRatio}x`
+
+  let imageData = imageDataCache.get(imageId)
+  if (!imageData) {
+    const viewBox = getSymbolViewBox(dataset, symbolDef)
+    const [,, width, height] = viewBox.split(' ').map(Number)
+    // Render at pixelRatio× to keep icons crisp at the current device DPI and map size.
+    // MapLibre receives the matching pixelRatio so the image displays at its original logical size.
+    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="${width * pixelRatio}" height="${height * pixelRatio}" viewBox="${viewBox}">${resolvedContent}</svg>`
+    imageData = await rasteriseToImageData(svgString, width * pixelRatio, height * pixelRatio)
+    imageDataCache.set(imageId, imageData)
+  }
+
+  return { imageId, imageData }
+}
+
+/**
+ * Register normal and selected symbol images for the given pre-resolved symbol configs.
+ * Skips images that are already registered (safe to call on style change).
+ * Updates `map._symbolImageMap` with normal→selected image ID pairs.
+ *
+ * Callers are responsible for resolving sublayers before calling this function
+ * (see `getSymbolConfigs` in the datasets plugin adapter).
+ *
+ * @param {Object} map - MapLibre map instance
+ * @param {Object[]} symbolConfigs - Flat list of datasets/merged-sublayers that have a symbol config
+ * @param {Object} mapStyle - Current map style config (provides id, selectedColor, haloColor)
+ * @param {Object} symbolRegistry
+ * @param {number} [pixelRatio=2] - Device pixel ratio × map size scale factor (computed by caller)
+ * @returns {Promise<void>}
+ */
+export const registerSymbols = async (map, symbolConfigs, mapStyle, symbolRegistry, pixelRatio = 2) => {
+  if (!symbolConfigs.length) {
+    return
+  }
+
+  // Reset the normal→selected image ID lookup so stale entries don't persist after a style change
+  map._symbolImageMap = {}
+
+  await Promise.all(symbolConfigs.flatMap(config => {
+    const normalId = getSymbolImageId(config, mapStyle, symbolRegistry, false, pixelRatio)
+    const selectedId = getSymbolImageId(config, mapStyle, symbolRegistry, true, pixelRatio)
+    if (normalId && selectedId) {
+      map._symbolImageMap[normalId] = selectedId
+    }
+    return [false, true].map(async (selected) => {
+      const imageId = selected ? selectedId : normalId
+      if (!imageId || map.hasImage(imageId)) {
+        return
+      }
+      const result = await rasteriseSymbolImage(config, mapStyle, symbolRegistry, selected, pixelRatio)
+      if (result && !map.hasImage(result.imageId)) {
+        map.addImage(result.imageId, result.imageData, { pixelRatio })
+      }
+    })
+  }))
+}

package/providers/maplibre/src/utils/symbolImages.test.js

@@ -0,0 +1,248 @@
+import { anchorToMaplibre, getSymbolImageId, registerSymbols } from './symbolImages.js'
+import { symbolRegistry } from '../../../../src/services/symbolRegistry.js'
+
+const STYLE_ID = 'test'
+const mapStyle = { id: STYLE_ID }
+
+beforeAll(() => {
+  globalThis.URL.createObjectURL = jest.fn(() => 'blob:mock')
+  globalThis.URL.revokeObjectURL = jest.fn()
+
+  HTMLCanvasElement.prototype.getContext = jest.fn(() => ({
+    drawImage: jest.fn(),
+    getImageData: jest.fn((_x, _y, w, h) => ({ width: w, height: h }))
+  }))
+
+  globalThis.Image = class {
+    constructor (w, h) {
+      this.width = w
+      this.height = h
+      this._src = ''
+    }
+
+    get src () { return this._src }
+    set src (val) { this._src = val; this.onload?.() }
+  }
+})
+
+beforeEach(() => {
+  symbolRegistry.setDefaults({})
+})
+
+// ─── anchorToMaplibre ─────────────────────────────────────────────────────────
+
+describe('anchorToMaplibre', () => {
+  it('returns center for [0.5, 0.5]', () => {
+    expect(anchorToMaplibre([0.5, 0.5])).toBe('center')
+  })
+
+  it('returns top for [0.5, 0]', () => {
+    expect(anchorToMaplibre([0.5, 0])).toBe('top')
+  })
+
+  it('returns bottom for [0.5, 1]', () => {
+    expect(anchorToMaplibre([0.5, 1])).toBe('bottom')
+  })
+
+  it('returns left for [0, 0.5]', () => {
+    expect(anchorToMaplibre([0, 0.5])).toBe('left')
+  })
+
+  it('returns right for [1, 0.5]', () => {
+    expect(anchorToMaplibre([1, 0.5])).toBe('right')
+  })
+
+  it('returns top-left for [0, 0]', () => {
+    expect(anchorToMaplibre([0, 0])).toBe('top-left')
+  })
+
+  it('returns top-right for [1, 0]', () => {
+    expect(anchorToMaplibre([1, 0])).toBe('top-right')
+  })
+
+  it('returns bottom-left for [0, 1]', () => {
+    expect(anchorToMaplibre([0, 1])).toBe('bottom-left')
+  })
+
+  it('returns bottom-right for [1, 1]', () => {
+    expect(anchorToMaplibre([1, 1])).toBe('bottom-right')
+  })
+
+  it('snaps pin anchor [0.5, 0.9] to bottom', () => {
+    expect(anchorToMaplibre([0.5, 0.9])).toBe('bottom') // NOSONAR S109 — deliberate boundary test value
+  })
+
+  it('returns center for values in the middle band', () => {
+    expect(anchorToMaplibre([0.5, 0.5])).toBe('center')
+    expect(anchorToMaplibre([0.26, 0.26])).toBe('center') // NOSONAR S109 — just inside center band
+    expect(anchorToMaplibre([0.74, 0.74])).toBe('center') // NOSONAR S109 — just inside center band
+  })
+
+  it('returns top at boundary value 0.25', () => {
+    expect(anchorToMaplibre([0.5, 0.25])).toBe('top')
+  })
+
+  it('returns bottom at boundary value 0.75', () => {
+    expect(anchorToMaplibre([0.5, 0.75])).toBe('bottom') // NOSONAR S109 — ANCHOR_HIGH boundary
+  })
+})
+
+// ─── getSymbolImageId ─────────────────────────────────────────────────────────
+
+describe('getSymbolImageId', () => {
+  it('returns null when dataset has no symbol', () => {
+    expect(getSymbolImageId({}, mapStyle, symbolRegistry)).toBeNull()
+  })
+
+  it('returns null for an unregistered symbol id', () => {
+    expect(getSymbolImageId({ symbol: 'does-not-exist' }, mapStyle, symbolRegistry)).toBeNull()
+  })
+
+  it('returns a string prefixed symbol- for normal state', () => {
+    const id = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry)
+    expect(typeof id).toBe('string')
+    expect(id).toMatch(/^symbol-[a-z0-9]+-\d+(\.\d+)?x$/)
+  })
+
+  it('returns a string prefixed symbol-sel- for selected state', () => {
+    const id = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry, true)
+    expect(typeof id).toBe('string')
+    expect(id).toMatch(/^symbol-sel-[a-z0-9]+-\d+(\.\d+)?x$/)
+  })
+
+  it('normal and selected ids differ for the same dataset', () => {
+    const normalId = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry, false)
+    const selectedId = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry, true)
+    expect(normalId).not.toBe(selectedId)
+  })
+
+  it('same dataset and style always produces the same id', () => {
+    const id1 = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry)
+    const id2 = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry)
+    expect(id1).toBe(id2)
+  })
+
+  it('different symbols produce different ids', () => {
+    const pinId = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry)
+    const circleId = getSymbolImageId({ symbol: 'circle' }, mapStyle, symbolRegistry)
+    expect(pinId).not.toBe(circleId)
+  })
+
+  it('different backgrounds produce different ids', () => {
+    const redId = getSymbolImageId({ symbol: 'pin', symbolBackgroundColor: '#ff0000' }, mapStyle, symbolRegistry)
+    const blueId = getSymbolImageId({ symbol: 'pin', symbolBackgroundColor: '#0000ff' }, mapStyle, symbolRegistry)
+    expect(redId).not.toBe(blueId)
+  })
+
+  it('resolves inline symbolSvgContent', () => {
+    const dataset = {
+      symbolSvgContent: '<circle cx="19" cy="19" r="12" fill="{{backgroundColor}}"/>',
+      symbolViewBox: '0 0 38 38',
+      symbolAnchor: [0.5, 0.5]
+    }
+    const id = getSymbolImageId(dataset, mapStyle, symbolRegistry)
+    expect(id).toMatch(/^symbol-[a-z0-9]+-\d+(\.\d+)?x$/)
+  })
+})
+
+// ─── registerSymbols ──────────────────────────────────────────────────────────
+
+const makeMap = (existingIds = []) => ({
+  _symbolImageMap: {},
+  hasImage: jest.fn((id) => existingIds.includes(id)),
+  addImage: jest.fn()
+})
+
+describe('registerSymbols — registration', () => {
+  it('returns early and does not touch map for empty configs', async () => {
+    const map = makeMap()
+    await registerSymbols(map, [], mapStyle, symbolRegistry)
+    expect(map.hasImage).not.toHaveBeenCalled()
+    expect(map.addImage).not.toHaveBeenCalled()
+  })
+
+  it('resets _symbolImageMap before processing', async () => {
+    const map = makeMap()
+    map._symbolImageMap = { stale: 'entry' }
+    await registerSymbols(map, [{ symbol: 'pin' }], mapStyle, symbolRegistry)
+    expect(map._symbolImageMap).not.toHaveProperty('stale')
+  })
+
+  it('calls addImage for normal and selected variants', async () => {
+    const map = makeMap()
+    await registerSymbols(map, [{ symbol: 'pin' }], mapStyle, symbolRegistry)
+    expect(map.addImage).toHaveBeenCalledTimes(2)
+    expect(map.addImage).toHaveBeenCalledWith(expect.stringMatching(/^symbol-[a-z0-9]+-\d+(\.\d+)?x$/), expect.any(Object), { pixelRatio: 2 })
+    expect(map.addImage).toHaveBeenCalledWith(expect.stringMatching(/^symbol-sel-[a-z0-9]+-\d+(\.\d+)?x$/), expect.any(Object), { pixelRatio: 2 })
+  })
+
+  it('populates _symbolImageMap with normal → selected id pairs', async () => {
+    const map = makeMap()
+    await registerSymbols(map, [{ symbol: 'pin' }], mapStyle, symbolRegistry)
+    const normalId = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry, false)
+    const selectedId = getSymbolImageId({ symbol: 'pin' }, mapStyle, symbolRegistry, true)
+    expect(map._symbolImageMap[normalId]).toBe(selectedId)
+  })
+
+  it('skips addImage when image is already registered', async () => {
+    const normalId = getSymbolImageId({ symbol: 'circle' }, mapStyle, symbolRegistry, false)
+    const selectedId = getSymbolImageId({ symbol: 'circle' }, mapStyle, symbolRegistry, true)
+    const map = makeMap([normalId, selectedId])
+    await registerSymbols(map, [{ symbol: 'circle' }], mapStyle, symbolRegistry)
+    expect(map.addImage).not.toHaveBeenCalled()
+  })
+
+  it('processes multiple configs independently', async () => {
+    const map = makeMap()
+    await registerSymbols(map, [{ symbol: 'pin' }, { symbol: 'circle' }], mapStyle, symbolRegistry)
+    expect(map.addImage).toHaveBeenCalledTimes(4)
+    expect(Object.keys(map._symbolImageMap)).toHaveLength(2)
+  })
+})
+
+describe('registerSymbols — null results and caching', () => {
+  it('does not call addImage when rasteriseSymbolImage returns null', async () => {
+    // getSymbolImageId (called twice — normal + selected) needs a real symbolDef to produce imageIds,
+    // but rasteriseSymbolImage must get undefined from getSymbolDef so it returns null.
+    // The registry.get call order: [1] getSymbolImageId normal, [2] getSymbolImageId selected,
+    // [3] rasteriseSymbolImage normal, [4] rasteriseSymbolImage selected.
+    const pinDef = symbolRegistry.get('pin')
+    const getSpy = jest.spyOn(symbolRegistry, 'get')
+      .mockReturnValueOnce(pinDef)
+      .mockReturnValueOnce(pinDef)
+      .mockReturnValueOnce(undefined)
+      .mockReturnValueOnce(undefined)
+    const map = makeMap()
+    await registerSymbols(map, [{ symbol: 'pin' }], mapStyle, symbolRegistry)
+    expect(map.addImage).not.toHaveBeenCalled()
+    getSpy.mockRestore()
+  })
+
+  it('skips config when symbolDef cannot be resolved', async () => {
+    const map = makeMap()
+    await registerSymbols(map, [{ symbol: 'no-such-symbol' }], mapStyle, symbolRegistry)
+    expect(map.addImage).not.toHaveBeenCalled()
+    expect(map._symbolImageMap).toEqual({})
+  })
+
+  it('reuses cached imageData when called again with the same pixelRatio', async () => {
+    // Use an unusual ratio so this test owns its cache entries
+    const uniqueRatio = 7
+
+    const map1 = makeMap()
+    const blobCallsBefore = globalThis.URL.createObjectURL.mock.calls.length
+    await registerSymbols(map1, [{ symbol: 'pin' }], mapStyle, symbolRegistry, uniqueRatio)
+    const blobCallsAfterFirst = globalThis.URL.createObjectURL.mock.calls.length
+    // Rasterisation ran — blob was created
+    expect(blobCallsAfterFirst).toBeGreaterThan(blobCallsBefore)
+
+    // Second call with a fresh map (hasImage → false) but same ratio → cache hit
+    const map2 = makeMap()
+    await registerSymbols(map2, [{ symbol: 'pin' }], mapStyle, symbolRegistry, uniqueRatio)
+    const blobCallsAfterSecond = globalThis.URL.createObjectURL.mock.calls.length
+    // No new blob created — rasterisation was skipped via cache
+    expect(blobCallsAfterSecond).toBe(blobCallsAfterFirst)
+    // addImage still called because map2 has no pre-registered images
+    expect(map2.addImage).toHaveBeenCalledTimes(2)
+  })
+})

package/src/App/components/Actions/Actions.jsx

@@ -7,11 +7,11 @@ export const Actions = ({ children }) => {
   const { openPanels, panelConfig, breakpoint } = useApp()
 
   const childArray = React.Children.toArray(children)
-  const visibleChild = childArray.find(c => c.props?.isHidden === false)
+  const visibleChild = childArray.find(c => c.props?.isHidden === false && c.props?.variant !== 'touch')
 
   // If a panel exists above we need so css adjustment
   const isBottomSlotUsed = Object.keys(openPanels).some(panelId => {
-    return breakpoint === 'mobile' && panelConfig[panelId]?.[breakpoint]?.slot === 'bottom'
+    return breakpoint === 'mobile' && panelConfig[panelId]?.[breakpoint]?.slot === 'drawer'
   })
 
   const className = [

package/src/App/components/Actions/Actions.module.scss

@@ -6,19 +6,12 @@
   padding: var(--panel-margin);
   max-height: 200px;
 
-  @media (prefers-reduced-motion: no-preference) {
-    transition: max-height var(--duration) ease, opacity var(--duration) ease,
-      padding-top var(--duration) ease, padding-bottom var(--duration) ease;
-  }
-
   &--border-top {
     border-top: 1px solid var(--app-border-color);
   }
 
   &--hidden {
     max-height: 0;
-    overflow: hidden;
-    opacity: 0;
     padding-top: 0;
     padding-bottom: 0;
     border: 0;

package/src/App/components/Actions/Actions.test.jsx

@@ -29,7 +29,7 @@ describe('Actions component', () => {
 
   it('adds the border class if a bottom slot panel is open', () => {
     mockUseApp.openPanels = { key: {} }
-    mockUseApp.panelConfig = { key: { mobile: { slot: 'bottom' } } }
+    mockUseApp.panelConfig = { key: { mobile: { slot: 'drawer' } } }
 
     render(<Actions slot='actions'>Content</Actions>)
     const container = screen.getByText('Content').closest('div')

package/src/App/components/Icon/Icon.jsx

@@ -3,8 +3,8 @@ import { getIconRegistry } from '../../registry/iconRegistry.js'
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
-export const Icon = ({ id, svgContent }) => {
-  const icon = getIconRegistry()[id] || svgContent
+export const Icon = ({ id, svgContent, isMenu }) => {
+  const icon = isMenu ? getIconRegistry().chevron : (getIconRegistry()[id] || svgContent)
 
   return (
     <svg
@@ -20,6 +20,7 @@ export const Icon = ({ id, svgContent }) => {
       aria-hidden='true'
       focusable='false'
       dangerouslySetInnerHTML={{ __html: icon }}
+      className={`im-c-icon${isMenu ? ' im-c-icon--narrow' : ''}`}
     />
   )
 }

package/src/App/components/Icon/Icon.module.scss

@@ -0,0 +1,4 @@
+.im-c-icon--narrow {
+    margin-left: -3px;
+    margin-right: -3px;
+}

package/src/App/components/Icon/Icon.test.jsx

@@ -33,27 +33,66 @@ describe('Icon component', () => {
   it('renders the SVG from the registry when id is provided', () => {
     getIconRegistry.mockReturnValue({ close: '<path d="M0 0 L10 10"/>' })
     const { container } = render(<Icon id='close' />)
-    expect(container.querySelector('svg').innerHTML).toContain('<path d="M0 0 L10 10"')
+    expect(container.querySelector('svg').innerHTML)
+      .toContain('<path d="M0 0 L10 10"')
   })
 
   it('falls back to svgContent if id not found in registry', () => {
     getIconRegistry.mockReturnValue({})
     const fallbackSVG = '<circle cx="5" cy="5" r="5"/>'
     const { container } = render(<Icon id='unknown' svgContent={fallbackSVG} />)
-    expect(container.querySelector('svg').innerHTML).toContain('<circle cx="5" cy="5" r="5"')
+    expect(container.querySelector('svg').innerHTML)
+      .toContain('<circle cx="5" cy="5" r="5"')
   })
 
   it('renders svgContent directly if no id provided', () => {
     const fallbackSVG = '<rect x="0" y="0" width="10" height="10"/>'
     getIconRegistry.mockReturnValue({})
     const { container } = render(<Icon svgContent={fallbackSVG} />)
-    expect(container.querySelector('svg').innerHTML).toContain('<rect x="0" y="0" width="10" height="10"')
+    expect(container.querySelector('svg').innerHTML)
+      .toContain('<rect x="0" y="0" width="10" height="10"')
   })
 
   it('uses registry icon if both id and svgContent provided', () => {
     getIconRegistry.mockReturnValue({ check: '<path d="M1 1 L5 5"/>' })
     const fallbackSVG = '<circle cx="5" cy="5" r="5"/>'
     const { container } = render(<Icon id='check' svgContent={fallbackSVG} />)
-    expect(container.querySelector('svg').innerHTML).toContain('<path d="M1 1 L5 5"')
+    expect(container.querySelector('svg').innerHTML)
+      .toContain('<path d="M1 1 L5 5"')
+  })
+
+  it('uses chevron icon when isMenu is true', () => {
+    getIconRegistry.mockReturnValue({
+      chevron: '<path d="M2 2 L8 8"/>',
+      close: '<path d="M0 0 L10 10"/>'
+    })
+    const { container } = render(<Icon id='close' isMenu />)
+    expect(container.querySelector('svg').innerHTML).toContain('<path d="M2 2 L8 8"')
+  })
+
+  it('ignores id and svgContent when isMenu is true', () => {
+    getIconRegistry.mockReturnValue({
+      chevron: '<path d="M2 2 L8 8"/>'
+    })
+    const fallbackSVG = '<circle cx="5" cy="5" r="5"/>'
+    const { container } = render(
+      <Icon id='close' svgContent={fallbackSVG} isMenu />
+    )
+    expect(container.querySelector('svg').innerHTML).toContain('<path d="M2 2 L8 8"')
+  })
+
+  it('adds narrow class when isMenu is true', () => {
+    getIconRegistry.mockReturnValue({
+      chevron: '<path d="M2 2 L8 8"/>'
+    })
+    const { container } = render(<Icon isMenu />)
+    const svg = container.querySelector('svg')
+    expect(svg).toHaveClass('im-c-icon--narrow')
+  })
+
+  it('renders nothing if isMenu is true and chevron is missing', () => {
+    getIconRegistry.mockReturnValue({})
+    const { container } = render(<Icon isMenu />)
+    expect(container.querySelector('svg').innerHTML).toBe('')
   })
 })

package/src/App/components/MapButton/MapButton.jsx

@@ -46,6 +46,37 @@ const handleKeyUp = (e) => {
   }
 }
 
+const captureMenuRect = (buttonRefs, buttonId, setMenuRect) => {
+  const btn = buttonRefs.current[buttonId]
+  if (!btn) {
+    return
+  }
+  setMenuRect(btn.getBoundingClientRect().toJSON())
+}
+
+/**
+ * Returns a keyup handler for buttons that control a popup menu.
+ * ArrowDown opens the menu at the first item; ArrowUp opens at the last.
+ * @param {boolean} hasMenu - Whether the button has a popup menu
+ * @param {Object} buttonRefs - React ref map of button elements
+ * @param {string} buttonId - Unique button identifier
+ * @param {Function} setMenuStartPos - State setter for menu start position
+ * @param {Function} setMenuRect - State setter for button bounding rect
+ * @param {Function} setIsPopupOpen - State setter for popup open state
+ * @returns {Function} Keyboard event handler
+ */
+const makePopupKeyUpHandler = (hasMenu, buttonRefs, buttonId, setMenuStartPos, setMenuRect, setIsPopupOpen) => (e) => {
+  if (hasMenu && ['ArrowDown', 'ArrowUp'].includes(e.key)) {
+    e.preventDefault()
+    setMenuStartPos(e.key === 'ArrowUp' ? 'last' : 'first')
+    captureMenuRect(buttonRefs, buttonId, setMenuRect)
+    setIsPopupOpen(true)
+  }
+}
+
+const getButtonSlot = (panelId, buttonId) =>
+  panelId ? `${stringToKebab(buttonId)}-button` : undefined
+
 /**
  * Determines the controlled element (panel or popup menu) for ARIA attributes.
  * @param {Object} options - Configuration options
@@ -177,10 +208,13 @@ export const MapButton = ({
   const { buttonRefs } = useApp()
   const [isPopupOpen, setIsPopupOpen] = useState(false)
   const [menuStartPos, setMenuStartPos] = useState(null)
+  const [menuRect, setMenuRect] = useState(null)
   const menuRef = useRef(null)
 
   const Element = href ? 'a' : 'button'
   const hasMenu = menuItems?.length >= 1
+  const showIcon = iconId || iconSvgContent || hasMenu
+  const buttonSlot = getButtonSlot(panelId, buttonId)
   const controlledElement = getControlledElement({ idPrefix, panelId, buttonId, hasMenu })
 
   /**
@@ -197,6 +231,9 @@ export const MapButton = ({
       const isKeyboard = e.nativeEvent.pointerType === ''
       /* istanbul ignore next as pointerType can't be tested in jest */
       setMenuStartPos(isKeyboard ? 'first' : null)
+      if (!isPopupOpen) {
+        captureMenuRect(buttonRefs, buttonId, setMenuRect)
+      }
       setIsPopupOpen((prev) => !prev)
     }
     if (onClick) {
@@ -204,19 +241,7 @@ export const MapButton = ({
     }
   }
 
-  /**
-   * Handles key up events on buttons that control popup menus.
-   * ArrowDown opens the menu at the first item.
-   * ArrowUp opens the menu at the last item.
-   * @param {React.KeyboardEvent} e - The keyboard event
-   */
-  const handleButtonKeyUp = e => {
-    if (hasMenu && ['ArrowDown', 'ArrowUp'].includes(e.key)) {
-      e.preventDefault()
-      setMenuStartPos(e.key === 'ArrowUp' ? 'last' : 'first')
-      setIsPopupOpen(true)
-    }
-  }
+  const handleButtonKeyUp = makePopupKeyUpHandler(hasMenu, buttonRefs, buttonId, setMenuStartPos, setMenuRect, setIsPopupOpen)
 
   const buttonProps = buildButtonProps({
     appId,
@@ -236,7 +261,7 @@ export const MapButton = ({
 
   const buttonEl = (
     <Element {...buttonProps}>
-      {(iconId || iconSvgContent) && <Icon id={iconId} svgContent={iconSvgContent} />}
+      {showIcon && <Icon id={iconId} svgContent={iconSvgContent} isMenu={hasMenu} />}
       {showLabel && <span>{label}</span>}
     </Element>
   )
@@ -244,12 +269,12 @@ export const MapButton = ({
   return (
     <div
       className={buildWrapperClassNames(buttonId, showLabel)}
-      data-button-slot={panelId ? `${stringToKebab(buttonId)}-button` : undefined}
+      data-button-slot={buttonSlot}
       style={isHidden ? { display: 'none' } : undefined}
     >
       {showLabel ? buttonEl : <Tooltip content={label}>{buttonEl}</Tooltip>}
-      {panelId && <SlotRenderer slot={`${stringToKebab(buttonId)}-button`} />}
-      {isPopupOpen && <PopupMenu popupMenuId={controlledElement.id} buttonId={buttonId} startPos={menuStartPos} menuRef={menuRef} items={menuItems} setIsOpen={setIsPopupOpen} />}
+      {buttonSlot && <SlotRenderer slot={buttonSlot} />}
+      {isPopupOpen && <PopupMenu popupMenuId={controlledElement.id} buttonId={buttonId} startPos={menuStartPos} menuRef={menuRef} items={menuItems} setIsOpen={setIsPopupOpen} buttonRect={menuRect} />}
     </div>
   )
 }

package/src/App/components/MapButton/MapButton.module.scss

@@ -124,19 +124,6 @@
     }
 }
 
-.im-c-map-button--touch {
-    background-color: var(--map-overlay-foreground-color);
-    color: var(--map-overlay-halo-color);
-
-    width: var(--touch-button-size);
-    height: var(--touch-button-size);
-    border-radius: 100%;
-
-    &::before {
-        box-shadow: none;
-    }
-}
-
 .im-o-app__right {
     .im-c-button-group {
         display: flex;
@@ -185,6 +172,10 @@
 }
 
 // 4. State styles
+.im-c-map-button[aria-haspopup="true"][aria-expanded="true"] svg {
+    transform: rotate(180deg);
+}
+
 .im-c-map-button[aria-disabled="true"]:not(.im-c-map-button--primary):not(.im-c-map-button--tertiary) {
     svg, span {
         opacity: var(--disabled-button-opacity);