Vue3/migrate plugin export

examples/iceberg/components/IcebergMap.vue

@@ -21,6 +21,15 @@
 				darkMode ? 'Exit dark mode' : 'Enter dark mode'
 			}}</span>
 		</button>
+		<button
+			class="kern-btn kern-btn--secondary"
+			@click="exportPluginActive = !exportPluginActive"
+		>
+			<span class="kern-icon kern-icon--photo-camera" />
+			<span class="kern-label">{{
+				exportPluginActive ? 'Deactivate export' : 'Activate export'
+			}}</span>
+		</button>
 	</div>
 	<polar-map
 		v-if="store.serviceRegister.length"
@@ -34,9 +43,10 @@
 <script setup lang="ts">
 import type { PolarContainer } from '@polar/polar'
 
-import { addPlugins, getStore, subscribe } from '@polar/polar'
+import { addPlugins, removePlugin, getStore, subscribe } from '@polar/polar'
 import pluginAddressSearch from '@polar/polar/plugins/addressSearch'
 import pluginAttributions from '@polar/polar/plugins/attributions'
+import pluginExport from '@polar/polar/plugins/export'
 import pluginFilter from '@polar/polar/plugins/filter'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
 import pluginIconMenu from '@polar/polar/plugins/iconMenu'
@@ -153,6 +163,12 @@ watch(map, (map) => {
 			displayComponent: true,
 			layoutTag: 'BOTTOM_LEFT',
 		}),
+		pluginExport({
+			displayComponent: true,
+			layoutTag: 'MIDDLE_LEFT',
+			download: true,
+			formats: ['pdf', 'jpeg', 'png'],
+		}),
 	])
 
 	subscribe(map, 'core', 'language', (newLanguage) => {
@@ -177,6 +193,32 @@ const darkMode = computed({
 	},
 })
 
+const exportPluginActive = computed({
+	get: () => {
+		if (!map.value) {
+			return
+		}
+		return Boolean(getStore(map.value, 'export'))
+	},
+	set: (value: boolean) => {
+		if (!map.value) {
+			return
+		}
+		if (value) {
+			addPlugins(map.value, [
+				pluginExport({
+					displayComponent: true,
+					layoutTag: 'MIDDLE_LEFT',
+					download: true,
+					formats: ['pdf', 'jpeg', 'png'],
+				}),
+			])
+		} else {
+			removePlugin(map.value, 'export')
+		}
+	},
+})
+
 function switchLanguage() {
 	if (!map.value) {
 		return

examples/snowbox/index.js

@@ -9,6 +9,7 @@
 } from '@polar/polar'
 import pluginAddressSearch from '@polar/polar/plugins/addressSearch'
 import pluginAttributions from '@polar/polar/plugins/attributions'
+import pluginExport from '@polar/polar/plugins/export'
 import pluginFilter from '@polar/polar/plugins/filter'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
 import pluginGeoLocation from '@polar/polar/plugins/geoLocation'
@@ -90,7 +91,7 @@
 		colorScheme,
 		startCenter: [565874, 5934140],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -260,6 +261,16 @@
 	additionalMaps.length = 0
 })
 
+addPlugin(
+	map,
+	pluginExport({
+		displayComponent: true,
+		layoutTag: 'MIDDLE_LEFT',
+		download: true,
+		formats: ['pdf', 'jpeg', 'png'],
+	})
+)
+
 addPlugin(
 	map,
 	pluginAttributions({