From c26eb98bd955cf9b58173e23e6fe43e6c4612c3d Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 16 Sep 2026 23:23:34 +1000
Subject: [PATCH 1/3] fix(maplibre): replace default attribution through public
 API

The attribution control found the map default by reading `map._controls`.
A MapLibre release can rename that field. The component would then show
attribution twice, or fail to restore required attribution on unmount.

`<ScriptMapLibreMap>` now adds the default attribution control itself and
shares the instance through the map context. The attribution component
removes and restores that instance with `hasControl`, `removeControl` and
`addControl`, and tracks map removal with the public `remove` event.

Attribution controls that consumer code adds are no longer removed.
---
 .../maplibre/2.api/10.attribution-control.md  |   2 +
 .../ScriptMapLibreAttributionControl.vue      |  57 +++++-----
 .../components/MapLibre/ScriptMapLibreMap.vue |  11 ++
 .../MapLibre/useMapLibreResource.ts           |   5 +
 test/e2e/maplibre.test.ts                     |  28 +++++
 test/fixtures/maplibre/pages/attribution.vue  |  48 ++++++++
 .../maplibre-controls.nuxt.test.ts            | 106 ++++++++++--------
 test/nuxt-runtime/maplibre-map.nuxt.test.ts   |  27 +++++
 test/unit/maplibre-lifecycle.test.ts          |   2 +-
 9 files changed, 212 insertions(+), 74 deletions(-)
 create mode 100644 test/fixtures/maplibre/pages/attribution.vue

diff --git a/docs/content/scripts/maplibre/2.api/10.attribution-control.md b/docs/content/scripts/maplibre/2.api/10.attribution-control.md
index 45dd17c2f..34b3ca06c 100644
--- a/docs/content/scripts/maplibre/2.api/10.attribution-control.md
+++ b/docs/content/scripts/maplibre/2.api/10.attribution-control.md
@@ -30,6 +30,8 @@ The map therefore shows attribution exactly once. Unmounting the component does
 
 If you set `attributionControl: false` in the map `options`, the map has no control to restore. The component then adds its own control, and unmounting removes it.
 
+The component replaces only the control that `<ScriptMapLibreMap>`{lang="html"} adds. If your code adds an attribution control with `map.addControl()`{lang="ts"}, that control stays on the map.
+
 Use one `<ScriptMapLibreAttributionControl>`{lang="html"} per map. The map's control returns to its default position, bottom-right, when the component unmounts.
 
 ## Attribution text
diff --git a/packages/script/src/runtime/components/MapLibre/ScriptMapLibreAttributionControl.vue b/packages/script/src/runtime/components/MapLibre/ScriptMapLibreAttributionControl.vue
index 95b3d54e3..6816fc4b6 100644
--- a/packages/script/src/runtime/components/MapLibre/ScriptMapLibreAttributionControl.vue
+++ b/packages/script/src/runtime/components/MapLibre/ScriptMapLibreAttributionControl.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type * as MapLibre from 'maplibre-gl'
 import type { ScriptMapLibreAttributionControlProps } from './types'
-import { useMapLibreResource } from './useMapLibreResource'
+import { inject } from 'vue'
+import { MAPLIBRE_MAP_INJECTION_KEY, useMapLibreResource } from './useMapLibreResource'
 
 // Renders no DOM of its own. A render function that returns `null` gives a
 // comment node on the server and the client. A comment-only template does not:
@@ -12,56 +13,56 @@ defineOptions({ render: () => null })
 const props = defineProps<ScriptMapLibreAttributionControlProps>()
 
 /**
- * MapLibre adds its own attribution control unless the map sets
- * `attributionControl: false`. This component replaces that control, so the
- * map shows attribution once. Unmounting restores the replaced control, so
- * required attribution never disappears.
+ * `<ScriptMapLibreMap>` adds the default attribution control and shares it
+ * through the map context. This component replaces that control, so the map
+ * shows attribution once. Unmounting restores it, so required attribution never
+ * disappears. Only public MapLibre APIs touch the control list.
  */
-let replaced: MapLibre.AttributionControl[] = []
+const defaultControl = inject(MAPLIBRE_MAP_INJECTION_KEY, undefined)?.defaultAttributionControl
 
-function restore(map: MapLibre.Map): void {
-  for (const existing of replaced) {
-    if (!map.hasControl(existing))
-      map.addControl(existing)
-  }
-  replaced = []
+/** The default control this component removed. Only this control is restored. */
+let replaced: MapLibre.AttributionControl | undefined
+/** A removed map has already dropped every control, and adding to it throws. */
+let mapRemoved = false
+function onMapRemove(): void {
+  mapRemoved = true
 }
 
-function mergeCredits(controls: MapLibre.AttributionControl[]): string[] | undefined {
-  const credits = [...new Set(controls.flatMap(existing => existing.options.customAttribution ?? []))]
-  return credits.length ? credits : undefined
+function restore(map: MapLibre.Map): void {
+  if (replaced && !mapRemoved && !map.hasControl(replaced))
+    map.addControl(replaced)
+  replaced = undefined
 }
 
 const control = useMapLibreResource<MapLibre.AttributionControl>({
   create({ maplibre, map }) {
-    // `_controls` is the list that `hasControl()` reads. `filter` copies it before removal.
-    replaced = map._controls.filter((existing): existing is MapLibre.AttributionControl => existing instanceof maplibre.AttributionControl)
-    // The component options override the map's `attributionControl` options.
-    // Credits from every replaced control stay unless the component sets its own.
-    const inherited = replaced[0]?.options
+    const builtIn = defaultControl?.value
+    replaced = builtIn && map.hasControl(builtIn) ? builtIn : undefined
+    // The component options override the options of the map default.
+    // The credits of the map default stay unless the component sets its own.
+    const inherited = replaced?.options
     const options = inherited || props.options
-      ? { ...inherited, ...props.options, customAttribution: props.options?.customAttribution ?? mergeCredits(replaced) }
+      ? { ...inherited, ...props.options, customAttribution: props.options?.customAttribution ?? inherited?.customAttribution }
       : undefined
     const instance = new maplibre.AttributionControl(options)
-    for (const existing of replaced)
-      map.removeControl(existing)
+    map.on('remove', onMapRemove)
+    if (replaced)
+      map.removeControl(replaced)
     try {
       map.addControl(instance, props.position)
     }
     catch (error) {
       restore(map)
+      map.off('remove', onMapRemove)
       throw error
     }
     return instance
   },
   cleanup(instance, { map }) {
+    map.off('remove', onMapRemove)
     if (map.hasControl(instance))
       map.removeControl(instance)
-    // A removed map has already dropped every control, and adding to it throws.
-    if (map._removed)
-      replaced = []
-    else
-      restore(map)
+    restore(map)
   },
 })
 
diff --git a/packages/script/src/runtime/components/MapLibre/ScriptMapLibreMap.vue b/packages/script/src/runtime/components/MapLibre/ScriptMapLibreMap.vue
index e5d4a48bc..1e16e1bb6 100644
--- a/packages/script/src/runtime/components/MapLibre/ScriptMapLibreMap.vue
+++ b/packages/script/src/runtime/components/MapLibre/ScriptMapLibreMap.vue
@@ -47,6 +47,7 @@ const { load, status, onLoaded, onError } = useScriptMapLibre({
 
 const maplibre = shallowRef() as VueShallowRef<typeof MapLibre | undefined>
 const map = shallowRef<MapLibre.Map>()
+const defaultAttributionControl = shallowRef<MapLibre.AttributionControl>()
 const isMapReady = shallowRef(false)
 const loadError = shallowRef(new Error('MapLibre failed to load'))
 const initializationError = shallowRef<Error>()
@@ -78,6 +79,7 @@ defineExpose<ScriptMapLibreMapExpose>(exposed)
 provide(MAPLIBRE_MAP_INJECTION_KEY, {
   maplibre: maplibre as unknown as MapLibreMapContext['maplibre'],
   map,
+  defaultAttributionControl,
 })
 
 function bindMapEvents(instance: MapLibre.Map): void {
@@ -137,8 +139,12 @@ onMounted(() => {
     maplibre.value = instance.maplibregl
     let mapInstance: MapLibre.Map | undefined
     try {
+      const attributionOptions = toRaw(props.options)?.attributionControl
       mapInstance = new instance.maplibregl.Map({
         ...toRaw(props.options),
+        // The component adds the default attribution control itself, so
+        // `<ScriptMapLibreAttributionControl>` can replace it through the public API.
+        attributionControl: false,
         container: mapEl.value,
         style: toRaw(props.mapStyle),
         center: toRaw(props.center),
@@ -147,6 +153,10 @@ onMounted(() => {
         pitch: props.pitch,
         interactive: props.interactive,
       })
+      if (attributionOptions !== false) {
+        defaultAttributionControl.value = new instance.maplibregl.AttributionControl(typeof attributionOptions === 'object' ? attributionOptions : undefined)
+        mapInstance.addControl(defaultAttributionControl.value)
+      }
       configureCanvasAccessibility(mapInstance)
       bindMapEvents(mapInstance)
       map.value = mapInstance
@@ -160,6 +170,7 @@ onMounted(() => {
     }
     catch (error) {
       mapInstance?.remove()
+      defaultAttributionControl.value = undefined
       const cause = error instanceof Error ? error : new Error('MapLibre map initialization failed')
       initializationError.value = cause
       loadError.value = cause
diff --git a/packages/script/src/runtime/components/MapLibre/useMapLibreResource.ts b/packages/script/src/runtime/components/MapLibre/useMapLibreResource.ts
index 49e5df4d0..13ab2b51a 100644
--- a/packages/script/src/runtime/components/MapLibre/useMapLibreResource.ts
+++ b/packages/script/src/runtime/components/MapLibre/useMapLibreResource.ts
@@ -5,6 +5,11 @@ import { inject, onUnmounted, shallowRef, watch } from 'vue'
 export interface MapLibreMapContext {
   map: ShallowRef<MapLibre.Map | undefined>
   maplibre: ShallowRef<typeof MapLibre | undefined>
+  /**
+   * The attribution control that `<ScriptMapLibreMap>` adds for the
+   * `attributionControl` map option. It is `undefined` when that option is `false`.
+   */
+  defaultAttributionControl: ShallowRef<MapLibre.AttributionControl | undefined>
 }
 
 export const MAPLIBRE_MAP_INJECTION_KEY = Symbol('maplibre-map') as InjectionKey<MapLibreMapContext>
diff --git a/test/e2e/maplibre.test.ts b/test/e2e/maplibre.test.ts
index c71296398..a81d2958f 100644
--- a/test/e2e/maplibre.test.ts
+++ b/test/e2e/maplibre.test.ts
@@ -161,6 +161,34 @@ describe('maplibre in a real browser', { timeout: 60000 }, async () => {
     expect(center[0]).toBeCloseTo(-1.2, 3)
   })
 
+  it('shows the default attribution once on a map without an attribution control', async () => {
+    const page = await openMap('/style-swap')
+    const readAttribution = () => page.evaluate(() => [...document.querySelectorAll('.maplibregl-ctrl-attrib')].map(control => control.textContent!.trim()))
+    await expect.poll(readAttribution).toEqual([expect.stringContaining('MapLibre')])
+  })
+
+  it('shows attribution exactly once while the attribution control mounts, unmounts and remounts', async () => {
+    const page = await openMap('/attribution')
+    const readAttribution = () => page.evaluate(() => [...document.querySelectorAll('.maplibregl-ctrl-attrib')].map(control => ({
+      corner: [...control.parentElement!.classList].find(name => name.startsWith('maplibregl-ctrl-bottom') || name.startsWith('maplibregl-ctrl-top')),
+      text: control.textContent!.trim(),
+    })))
+    const toggle = () => page.click('#toggle-control')
+    // The component inherits the credits of the map default, and the style source adds its own.
+    const credits = expect.stringMatching(/^(?=.*Map credits)(?=.*Source credits)/)
+
+    await expect.poll(readAttribution).toEqual([{ corner: 'maplibregl-ctrl-bottom-left', text: credits }])
+
+    await toggle()
+    await expect.poll(readAttribution).toEqual([{ corner: 'maplibregl-ctrl-bottom-right', text: credits }])
+
+    await toggle()
+    await expect.poll(readAttribution).toEqual([{ corner: 'maplibregl-ctrl-bottom-left', text: credits }])
+
+    await toggle()
+    await expect.poll(readAttribution).toEqual([{ corner: 'maplibregl-ctrl-bottom-right', text: credits }])
+  })
+
   it.each(['diff', 'full'])('emits sourceready after a %s style swap so feature state can be restored', async (mode) => {
     const page = await openMap('/style-swap')
     const readLog = async () => JSON.parse(await page.locator('#log').textContent() ?? '{}') as { styleload: boolean[], sourceready: string[] }
diff --git a/test/fixtures/maplibre/pages/attribution.vue b/test/fixtures/maplibre/pages/attribution.vue
new file mode 100644
index 000000000..e3bb6111f
--- /dev/null
+++ b/test/fixtures/maplibre/pages/attribution.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { ScriptMapLibreMapExpose } from '@nuxt/scripts'
+import type { StyleSpecification } from 'maplibre-gl'
+import { shallowRef } from 'vue'
+
+// An inline GeoJSON source with its own credit, so the source attribution
+// renders without a network request.
+const style: StyleSpecification = {
+  ...blankStyle('#ffffff'),
+  sources: {
+    points: {
+      type: 'geojson',
+      attribution: 'Source credits',
+      data: points([{ id: 1, name: 'one', kind: 'site', position: [0, 0] }]),
+    },
+  },
+  layers: [
+    ...blankStyle('#ffffff').layers,
+    { id: 'sites', type: 'circle', source: 'points', paint: { 'circle-radius': 6 } },
+  ],
+}
+
+const showControl = shallowRef(true)
+
+function onReady({ map }: ScriptMapLibreMapExpose): void {
+  exposeMap(map.value)
+  ;(window as any).__ready = true
+}
+</script>
+
+<template>
+  <div>
+    <ScriptMapLibreMap
+      trigger="immediate"
+      :map-style="style"
+      :center="[0, 0]"
+      :width="400"
+      :height="300"
+      :options="{ attributionControl: { compact: false, customAttribution: 'Map credits' } }"
+      @ready="onReady"
+    >
+      <ScriptMapLibreAttributionControl v-if="showControl" position="bottom-left" :options="{ compact: false }" />
+    </ScriptMapLibreMap>
+    <button id="toggle-control" type="button" @click="showControl = !showControl">
+      Toggle attribution control
+    </button>
+  </div>
+</template>
diff --git a/test/nuxt-runtime/maplibre-controls.nuxt.test.ts b/test/nuxt-runtime/maplibre-controls.nuxt.test.ts
index 4c44e48ad..b6db79299 100644
--- a/test/nuxt-runtime/maplibre-controls.nuxt.test.ts
+++ b/test/nuxt-runtime/maplibre-controls.nuxt.test.ts
@@ -37,27 +37,38 @@ function initControl(target: object, kind: string, options: unknown): FakeContro
 
 /**
  * The control list follows MapLibre: `addControl` appends, `removeControl`
- * splices, `hasControl` reads the list, and `remove()` empties it.
+ * splices, `hasControl` reads the list, and `remove()` empties it and fires
+ * `remove`. The list is private to the fake, so a component can reach it only
+ * through the public MapLibre API.
  */
 function createMap() {
   const positions = new Map<unknown, string | undefined>()
+  const listeners = new Map<string, Set<() => void>>()
+  let controls: FakeControl[] = []
   const map = {
-    _controls: [] as FakeControl[],
-    _removed: false,
     addControl: vi.fn((control: FakeControl, position?: string) => {
-      map._controls.push(control)
+      controls.push(control)
       positions.set(control, position)
       return map
     }),
     removeControl: vi.fn((control: FakeControl) => {
-      map._controls = map._controls.filter(existing => existing !== control)
+      controls = controls.filter(existing => existing !== control)
       return map
     }),
-    hasControl: (control: FakeControl) => map._controls.includes(control),
+    hasControl: (control: FakeControl) => controls.includes(control),
+    on: (name: string, listener: () => void) => {
+      listeners.set(name, (listeners.get(name) ?? new Set()).add(listener))
+      return map
+    },
+    off: (name: string, listener: () => void) => {
+      listeners.get(name)?.delete(listener)
+      return map
+    },
     remove: () => {
-      map._controls = []
-      map._removed = true
+      controls = []
+      listeners.get('remove')?.forEach(listener => listener())
     },
+    controls: () => [...controls],
     positionOf: (control: unknown) => positions.get(control),
   }
   return map
@@ -79,19 +90,20 @@ function createMapLibre() {
   return { ScaleControl, FullscreenControl, GeolocateControl, AttributionControl }
 }
 
-function provideMap(maplibre: unknown, map: unknown) {
+function provideMap(maplibre: unknown, map: unknown, defaultAttributionControl?: unknown) {
   return {
     provide: {
       [MAPLIBRE_MAP_INJECTION_KEY as symbol]: {
         map: shallowRef(map),
         maplibre: shallowRef(maplibre),
+        defaultAttributionControl: shallowRef(defaultAttributionControl),
       },
     },
   }
 }
 
 function controlsOf(map: ReturnType<typeof createMap>, kind: string) {
-  return map._controls.filter(control => control.kind === kind)
+  return map.controls().filter(control => control.kind === kind)
 }
 
 function stubGeolocation(state: PermissionState | 'no-api' | 'rejects') {
@@ -125,7 +137,7 @@ describe('mapLibre scale control', () => {
     const mapRef = shallowRef<unknown>()
     mount(ScriptMapLibreScaleControl, {
       props: { position: 'bottom-left', options: { unit: 'metric' } },
-      global: { provide: { [MAPLIBRE_MAP_INJECTION_KEY as symbol]: { map: mapRef, maplibre: shallowRef(maplibre) } } },
+      global: { provide: { [MAPLIBRE_MAP_INJECTION_KEY as symbol]: { map: mapRef, maplibre: shallowRef(maplibre), defaultAttributionControl: shallowRef() } } },
     })
     await nextTick()
     expect(map.addControl).not.toHaveBeenCalled()
@@ -152,7 +164,7 @@ describe('mapLibre scale control', () => {
     expect(map.addControl).toHaveBeenCalledOnce()
 
     wrapper.unmount()
-    expect(map._controls).toEqual([])
+    expect(map.controls()).toEqual([])
   })
 })
 
@@ -174,7 +186,7 @@ describe('mapLibre fullscreen control', () => {
     expect(wrapper.emitted('fullscreenend')).toEqual([[{ type: 'fullscreenend' }]])
 
     wrapper.unmount()
-    expect(map._controls).toEqual([])
+    expect(map.controls()).toEqual([])
     expect(fullscreen!.listenerCount()).toBe(0)
   })
 })
@@ -203,7 +215,7 @@ describe('mapLibre geolocate control', () => {
     expect(wrapper.emitted('unavailable')).toBeUndefined()
 
     wrapper.unmount()
-    expect(map._controls).toEqual([])
+    expect(map.controls()).toEqual([])
     expect(geolocate!.listenerCount()).toBe(0)
   })
 
@@ -241,20 +253,21 @@ describe('mapLibre geolocate control', () => {
 })
 
 describe('mapLibre attribution control', () => {
+  /** Mirrors `<ScriptMapLibreMap>`: the map adds its default control and shares it through the context. */
   function mapWithDefaultAttribution(maplibre: ReturnType<typeof createMapLibre>, options: Record<string, unknown> = { compact: true }) {
     const map = createMap()
     const builtIn = new (maplibre.AttributionControl as any)(options) as FakeControl
     map.addControl(builtIn)
     map.addControl.mockClear()
-    return { map, builtIn }
+    return { map, builtIn, global: provideMap(maplibre, map, builtIn) }
   }
 
   it('replaces the map default so attribution shows once, then restores it', async () => {
     const maplibre = createMapLibre()
-    const { map, builtIn } = mapWithDefaultAttribution(maplibre)
+    const { map, builtIn, global } = mapWithDefaultAttribution(maplibre)
     const wrapper = mount(ScriptMapLibreAttributionControl, {
       props: { position: 'bottom-left', options: { compact: false } },
-      global: provideMap(maplibre, map),
+      global,
     })
     await nextTick()
 
@@ -277,20 +290,18 @@ describe('mapLibre attribution control', () => {
     expect(controlsOf(map, 'attribution')).toHaveLength(1)
 
     wrapper.unmount()
-    expect(map._controls).toEqual([])
+    expect(map.controls()).toEqual([])
   })
 
   it('restores the map default when adding its own control throws', async () => {
     const maplibre = createMapLibre()
-    const { map, builtIn } = mapWithDefaultAttribution(maplibre)
+    const { map, builtIn, global } = mapWithDefaultAttribution(maplibre)
     const failure = new Error('onAdd failed')
     map.addControl.mockImplementationOnce(() => {
       throw failure
     })
     const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
-    mount(ScriptMapLibreAttributionControl, {
-      global: provideMap(maplibre, map),
-    })
+    mount(ScriptMapLibreAttributionControl, { global })
     await nextTick()
 
     expect(controlsOf(map, 'attribution')).toEqual([builtIn])
@@ -300,46 +311,42 @@ describe('mapLibre attribution control', () => {
 
   it('keeps credits the map default configured unless the component sets its own', async () => {
     const maplibre = createMapLibre()
-    const { map } = mapWithDefaultAttribution(maplibre, { compact: true, customAttribution: 'Data: Hobart City Council' })
+    const { map, global } = mapWithDefaultAttribution(maplibre, { compact: true, customAttribution: 'Data: Hobart City Council' })
     const inheriting = mount(ScriptMapLibreAttributionControl, {
       props: { options: { compact: false } },
-      global: provideMap(maplibre, map),
+      global,
     })
     await nextTick()
-    expect(controlsOf(map, 'attribution')[0]!.options).toEqual({ compact: false, customAttribution: ['Data: Hobart City Council'] })
+    expect(controlsOf(map, 'attribution')[0]!.options).toEqual({ compact: false, customAttribution: 'Data: Hobart City Council' })
     inheriting.unmount()
 
     const overriding = mount(ScriptMapLibreAttributionControl, {
       props: { options: { customAttribution: 'Data: Tasmania' } },
-      global: provideMap(maplibre, map),
+      global,
     })
     await nextTick()
     expect(controlsOf(map, 'attribution')[0]!.options).toEqual({ compact: true, customAttribution: 'Data: Tasmania' })
     overriding.unmount()
   })
 
-  it('keeps the credits of every replaced attribution control', async () => {
+  it('never removes an attribution control that consumer code added', async () => {
     const maplibre = createMapLibre()
-    const { map } = mapWithDefaultAttribution(maplibre, { compact: true, customAttribution: 'MapLibre' })
-    map.addControl(new (maplibre.AttributionControl as any)({ customAttribution: ['Data: Hobart City Council', 'MapLibre'] }))
-    const wrapper = mount(ScriptMapLibreAttributionControl, {
-      global: provideMap(maplibre, map),
-    })
+    const { map, builtIn, global } = mapWithDefaultAttribution(maplibre)
+    const added = new (maplibre.AttributionControl as any)({ customAttribution: 'Data: Hobart City Council' }) as FakeControl
+    map.addControl(added)
+    const wrapper = mount(ScriptMapLibreAttributionControl, { global })
     await nextTick()
 
-    const [mounted] = controlsOf(map, 'attribution')
-    expect(controlsOf(map, 'attribution')).toHaveLength(1)
-    expect((mounted!.options as { customAttribution: unknown }).customAttribution).toEqual(['MapLibre', 'Data: Hobart City Council'])
+    expect(controlsOf(map, 'attribution')).toContain(added)
+    expect(controlsOf(map, 'attribution')).not.toContain(builtIn)
     wrapper.unmount()
-    expect(controlsOf(map, 'attribution')).toHaveLength(2)
+    expect(controlsOf(map, 'attribution')).toEqual([added, builtIn])
   })
 
   it('restores the map default after consumer code removed the component control', async () => {
     const maplibre = createMapLibre()
-    const { map, builtIn } = mapWithDefaultAttribution(maplibre)
-    const wrapper = mount(ScriptMapLibreAttributionControl, {
-      global: provideMap(maplibre, map),
-    })
+    const { map, builtIn, global } = mapWithDefaultAttribution(maplibre)
+    const wrapper = mount(ScriptMapLibreAttributionControl, { global })
     await nextTick()
 
     map.removeControl(controlsOf(map, 'attribution')[0]!)
@@ -347,16 +354,25 @@ describe('mapLibre attribution control', () => {
     expect(controlsOf(map, 'attribution')).toEqual([builtIn])
   })
 
+  it('does not add back a default that consumer code removed before mount', async () => {
+    const maplibre = createMapLibre()
+    const { map, builtIn, global } = mapWithDefaultAttribution(maplibre)
+    map.removeControl(builtIn)
+    const wrapper = mount(ScriptMapLibreAttributionControl, { global })
+    await nextTick()
+
+    wrapper.unmount()
+    expect(map.controls()).toEqual([])
+  })
+
   it('does not restore onto a map that was already removed', async () => {
     const maplibre = createMapLibre()
-    const { map } = mapWithDefaultAttribution(maplibre)
-    const wrapper = mount(ScriptMapLibreAttributionControl, {
-      global: provideMap(maplibre, map),
-    })
+    const { map, global } = mapWithDefaultAttribution(maplibre)
+    const wrapper = mount(ScriptMapLibreAttributionControl, { global })
     await nextTick()
 
     map.remove()
     wrapper.unmount()
-    expect(map._controls).toEqual([])
+    expect(map.controls()).toEqual([])
   })
 })
diff --git a/test/nuxt-runtime/maplibre-map.nuxt.test.ts b/test/nuxt-runtime/maplibre-map.nuxt.test.ts
index 10cecea9b..ca6d8007f 100644
--- a/test/nuxt-runtime/maplibre-map.nuxt.test.ts
+++ b/test/nuxt-runtime/maplibre-map.nuxt.test.ts
@@ -52,6 +52,7 @@ function createMapLibreMock() {
     setStyle: vi.fn(() => map),
     resize: vi.fn(() => map),
     remove: vi.fn(),
+    addControl: vi.fn(() => map),
     getCanvas: vi.fn(() => document.createElement('canvas')),
     keyboard: { isEnabled: vi.fn(() => true) },
   }
@@ -65,6 +66,9 @@ function createMapLibreMock() {
 
   const maplibregl = {
     Map: vi.fn(MapConstructor),
+    AttributionControl: vi.fn(function (this: { options: unknown }, options: unknown) {
+      this.options = options
+    }),
     LngLat: { convert: vi.fn(value => ({ lng: value[0], lat: value[1] })) },
   }
   return {
@@ -262,4 +266,27 @@ describe('scriptMapLibreMap', () => {
     expect(wrapper.emitted('error')?.[0]).toEqual([initializationFailure])
     expect(wrapper.emitted('ready')).toBeUndefined()
   })
+
+  it.each([
+    ['omitted', undefined, [undefined]],
+    ['options', { compact: false, customAttribution: 'Data: Hobart City Council' }, [{ compact: false, customAttribution: 'Data: Hobart City Council' }]],
+    ['false', false, undefined],
+  ] as const)('adds the default attribution control itself when attributionControl is %s', async (_, attributionControl, expected) => {
+    const mocks = createMapLibreMock()
+    mount(ScriptMapLibreMap, {
+      props: {
+        mapStyle: 'https://demotiles.maplibre.org/style.json',
+        center: [0, 0],
+        options: attributionControl === undefined ? {} : { attributionControl },
+      },
+    })
+    await nextTick()
+    scriptState.callbacks[0]!({ maplibregl: mocks.maplibregl })
+    await nextTick()
+
+    // MapLibre must not add a second control of its own.
+    expect(mocks.maplibregl.Map).toHaveBeenCalledWith(expect.objectContaining({ attributionControl: false }))
+    const controls = mocks.map.addControl.mock.calls.map(([control]: [{ options: unknown }]) => control.options)
+    expect(controls).toEqual(expected ?? [])
+  })
 })
diff --git a/test/unit/maplibre-lifecycle.test.ts b/test/unit/maplibre-lifecycle.test.ts
index bf4d69aea..65c14a6d5 100644
--- a/test/unit/maplibre-lifecycle.test.ts
+++ b/test/unit/maplibre-lifecycle.test.ts
@@ -12,7 +12,7 @@ function createProvider(immediate = true, clearBeforeChildren = false) {
 
   const Provider = defineComponent({
     setup(_, { slots }) {
-      provide(MAPLIBRE_MAP_INJECTION_KEY, { map, maplibre })
+      provide(MAPLIBRE_MAP_INJECTION_KEY, { map, maplibre, defaultAttributionControl: shallowRef() })
       if (clearBeforeChildren) {
         onBeforeUnmount(() => {
           map.value = undefined

From 934239ac199c1b1969c6267eb30c2c836dfb4d76 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 16 Sep 2026 23:47:04 +1000
Subject: [PATCH 2/3] docs(maplibre): qualify the attribution count

---
 docs/content/scripts/maplibre/2.api/10.attribution-control.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/scripts/maplibre/2.api/10.attribution-control.md b/docs/content/scripts/maplibre/2.api/10.attribution-control.md
index 34b3ca06c..daf621aed 100644
--- a/docs/content/scripts/maplibre/2.api/10.attribution-control.md
+++ b/docs/content/scripts/maplibre/2.api/10.attribution-control.md
@@ -26,7 +26,7 @@ MapLibre adds an attribution control to every map by default. Two controls would
 - When the component mounts, it removes the map's attribution control and adds its own.
 - When the component unmounts, it adds the map's control back. This also happens if your code removed the component's control first.
 
-The map therefore shows attribution exactly once. Unmounting the component does not remove the default attribution.
+When no other attribution control is present, the map shows attribution exactly once. Unmounting the component does not remove the default attribution.
 
 If you set `attributionControl: false` in the map `options`, the map has no control to restore. The component then adds its own control, and unmounting removes it.
 

From 74c0314870034974608b3fcc5867a4d45f9d0bc4 Mon Sep 17 00:00:00 2001
From: Harlan GitHub Agent <harlan-github-agent[bot]@users.noreply.github.com>
Date: Thu, 17 Sep 2026 01:37:29 +1000
Subject: [PATCH 3/3] fix(maplibre): keep native logo and attribution order in
 a shared corner

---
 .../components/MapLibre/ScriptMapLibreMap.vue | 12 ++++++++--
 test/e2e/maplibre.test.ts                     | 15 ++++++++++++
 test/fixtures/maplibre/pages/logo.vue         | 24 +++++++++++++++++++
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 test/fixtures/maplibre/pages/logo.vue

diff --git a/packages/script/src/runtime/components/MapLibre/ScriptMapLibreMap.vue b/packages/script/src/runtime/components/MapLibre/ScriptMapLibreMap.vue
index 1e16e1bb6..e7071059b 100644
--- a/packages/script/src/runtime/components/MapLibre/ScriptMapLibreMap.vue
+++ b/packages/script/src/runtime/components/MapLibre/ScriptMapLibreMap.vue
@@ -139,12 +139,14 @@ onMounted(() => {
     maplibre.value = instance.maplibregl
     let mapInstance: MapLibre.Map | undefined
     try {
-      const attributionOptions = toRaw(props.options)?.attributionControl
+      const mapOptions = toRaw(props.options)
+      const attributionOptions = mapOptions?.attributionControl
       mapInstance = new instance.maplibregl.Map({
-        ...toRaw(props.options),
+        ...mapOptions,
         // The component adds the default attribution control itself, so
         // `<ScriptMapLibreAttributionControl>` can replace it through the public API.
         attributionControl: false,
+        maplibreLogo: false,
         container: mapEl.value,
         style: toRaw(props.mapStyle),
         center: toRaw(props.center),
@@ -153,10 +155,16 @@ onMounted(() => {
         pitch: props.pitch,
         interactive: props.interactive,
       })
+      // MapLibre's constructor adds the attribution control first and the logo
+      // second, and a bottom corner renders its first child on top. Adding the
+      // controls in that order here keeps the native vertical order when the
+      // logo shares the attribution corner.
       if (attributionOptions !== false) {
         defaultAttributionControl.value = new instance.maplibregl.AttributionControl(typeof attributionOptions === 'object' ? attributionOptions : undefined)
         mapInstance.addControl(defaultAttributionControl.value)
       }
+      if (mapOptions?.maplibreLogo)
+        mapInstance.addControl(new instance.maplibregl.LogoControl(), mapOptions.logoPosition)
       configureCanvasAccessibility(mapInstance)
       bindMapEvents(mapInstance)
       map.value = mapInstance
diff --git a/test/e2e/maplibre.test.ts b/test/e2e/maplibre.test.ts
index a81d2958f..e3e6c72a8 100644
--- a/test/e2e/maplibre.test.ts
+++ b/test/e2e/maplibre.test.ts
@@ -161,6 +161,21 @@ describe('maplibre in a real browser', { timeout: 60000 }, async () => {
     expect(center[0]).toBeCloseTo(-1.2, 3)
   })
 
+  it('keeps the native vertical order when the logo shares the attribution corner', async () => {
+    const page = await openMap('/logo')
+    const readCorner = () => page.evaluate(() => {
+      const corner = document.querySelector<HTMLElement>('.maplibregl-ctrl-bottom-right')
+      const logo = corner?.querySelector<HTMLElement>('.maplibregl-ctrl-logo')?.closest<HTMLElement>('.maplibregl-ctrl')
+      const attribution = corner?.querySelector<HTMLElement>('.maplibregl-ctrl-attrib')
+      if (!corner || !logo || !attribution)
+        return null
+      // A native map renders the logo above the attribution when both sit in a
+      // bottom corner, which is the DOM order inside the corner container.
+      return Boolean(logo.compareDocumentPosition(attribution) & Node.DOCUMENT_POSITION_FOLLOWING)
+    })
+    await expect.poll(readCorner).toBe(true)
+  })
+
   it('shows the default attribution once on a map without an attribution control', async () => {
     const page = await openMap('/style-swap')
     const readAttribution = () => page.evaluate(() => [...document.querySelectorAll('.maplibregl-ctrl-attrib')].map(control => control.textContent!.trim()))
diff --git a/test/fixtures/maplibre/pages/logo.vue b/test/fixtures/maplibre/pages/logo.vue
new file mode 100644
index 000000000..2eb733caa
--- /dev/null
+++ b/test/fixtures/maplibre/pages/logo.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ScriptMapLibreMapExpose } from '@nuxt/scripts'
+
+const style = blankStyle('#ffffff')
+
+function onReady({ map }: ScriptMapLibreMapExpose): void {
+  exposeMap(map.value)
+  ;(window as any).__ready = true
+}
+</script>
+
+<template>
+  <div>
+    <ScriptMapLibreMap
+      trigger="immediate"
+      :map-style="style"
+      :center="[0, 0]"
+      :width="400"
+      :height="300"
+      :options="{ maplibreLogo: true, logoPosition: 'bottom-right' }"
+      @ready="onReady"
+    />
+  </div>
+</template>