feat(reverseGeocoder): migrate plugin

examples/snowbox/index.js

@@ -13,14 +13,15 @@
 import pluginLayerChooser from '@polar/polar/plugins/layerChooser'
 import pluginLoadingIndicator from '@polar/polar/plugins/loadingIndicator'
 import pluginPins from '@polar/polar/plugins/pins'
+import pluginReverseGeocoder from '@polar/polar/plugins/reverseGeocoder'
 import pluginToast from '@polar/polar/plugins/toast'
-import EmptyComponent from './EmptyComponent.vue'
-import styleJsonUrl from './style.json?url'
-import services from './services.js'
-import YetAnotherEmptyComponent from './YetAnotherEmptyComponent.vue'
-import MockPointerPosition from './MockPointerPosition.ce.vue'
-import MockScale from './MockScale.ce.vue'
 import MockAttributions from './MockAttributions.ce.vue'
+import MockScale from './MockScale.ce.vue'
+import MockPointerPosition from './MockPointerPosition.ce.vue'
+import YetAnotherEmptyComponent from './YetAnotherEmptyComponent.vue'
+import services from './services.js'
+import styleJsonUrl from './style.json?url'
+import EmptyComponent from './EmptyComponent.vue'
 
 const basemapId = '23420'
 const basemapGreyId = '23421'
@@ -63,7 +64,7 @@
 	},
 }
 
 // TODO: Re-enable with isSelectable
 /*
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
@@ -83,7 +84,7 @@
 		colorScheme,
 		startCenter: [573364, 6028874],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -163,14 +164,14 @@
 						stroke: '#FFFFFF',
 						fill: '#333333',
 					},
 					// TODO(dopenguin): Has some HMR issues, needs to be fixed
 					// isSelectable: isReportSelectable,
 				},
 			],
 			clusterClickZoom: true,
 		},
 		// theme: dataportTheme,
 		/*
 			TODO(dopenguin): Surrounding application should be able give information about dark or light mode via update of a state parameter; light mode by default
 		 */
 		locales: [
@@ -249,6 +250,24 @@
 		toZoomLevel: 7,
 	})
 )
+addPlugin(
+	map,
+	pluginReverseGeocoder({
+		url: 'https://geodienste.hamburg.de/HH_WPS',
+		coordinateSources: [
+			{
+				plugin: 'pins',
+				key: 'coordinate',
+			},
+		],
+		// TODO: Check if this works when addressSearch is implemented
+		addressTarget: {
+			plugin: 'addressSearch',
+			key: 'selectResult',
+		},
+		zoomTo: 7,
+	})
+)
 addPlugin(
 	map,
 	pluginIconMenu({
@@ -266,7 +285,7 @@
 			},
 		],
 		menus: [
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: pluginGeoLocation({

package.json

@@ -87,6 +87,7 @@
 		"@repositoryname/noop": "^1.0.6",
 		"@types/geojson": "7946.0.16",
 		"@types/node": "^24.10.3",
+		"@types/xml2js": "^0.4.14",
 		"@vitejs/plugin-vue": "^6.0.3",
 		"@vitest/coverage-v8": "^4.0.15",
 		"@vue/test-utils": "^2.4.6",
@@ -128,6 +129,7 @@
 		"vite-plugin-vue-devtools": "^8.0.1",
 		"vitest": "^4.0.15",
 		"vue": "^3.5.21",
-		"vue-tsc": "^3.1.8"
+		"vue-tsc": "^3.1.8",
+		"xml2js": "^0.6.2"
 	}
 }

src/core/types/main.ts

@@ -4,6 +4,7 @@
 import type { LayerConfiguration } from './layer'
 import type { PolarTheme } from './theme'
 import type { LocaleOverride } from './locales'
+import type { PluginId } from './plugin'
 import type { FooterPluginOptions } from '@/plugins/footer'
 import type { FullscreenPluginOptions } from '@/plugins/fullscreen'
 import type { GeoLocationPluginOptions } from '@/plugins/geoLocation'
@@ -18,6 +19,11 @@
 	serviceName: string
 }
 
+export interface StoreReference {
+	key: string
+	plugin?: PluginId
+}
+
 export type InitialLanguage = 'de' | 'en'
 
 export interface PolarMapOptions {
@@ -288,7 +294,7 @@
 	theme?: PolarTheme
 	// Plugins are not sorted alphabetical, but listed last.
 	// Remember to sort them alphabetical inside their space.
 	// TODO: Generate this section via types/plugin.ts
 	/* eslint-disable perfectionist/sort-interfaces */
 
 	/** Configuration for footer plugin. */

src/core/types/plugin.ts

@@ -30,6 +30,9 @@ import type { PluginId as PinsPluginId } from '@/plugins/pins'
 import type { usePinsStore as PinsStore } from '@/plugins/pins/store'
 import type { resourcesEn as PinsResources } from '@/plugins/pins/locales'
 
+import type { PluginId as ReverseGeocoderPluginId } from '@/plugins/reverseGeocoder'
+import type { useReverseGeocoderStore as ReverseGeocoderStore } from '@/plugins/reverseGeocoder/store'
+
 import type { PluginId as ToastPluginId } from '@/plugins/toast'
 import type { useToastStore as ToastStore } from '@/plugins/toast/store'
 import type { resourcesEn as ToastResources } from '@/plugins/toast/locales'
@@ -92,6 +95,7 @@ export type BundledPluginId =
 	| typeof LayerChooserPluginId
 	| typeof LoadingIndicatorId
 	| typeof PinsPluginId
+	| typeof ReverseGeocoderPluginId
 	| typeof ToastPluginId
 
 type GetPluginStore<
@@ -112,6 +116,11 @@ export type BundledPluginStores<T extends BundledPluginId> =
 	| GetPluginStore<T, typeof LayerChooserPluginId, typeof LayerChooserStore>
 	| GetPluginStore<T, typeof LoadingIndicatorId, typeof LoadingIndicatorStore>
 	| GetPluginStore<T, typeof PinsPluginId, typeof PinsStore>
+	| GetPluginStore<
+			T,
+			typeof ReverseGeocoderPluginId,
+			typeof ReverseGeocoderStore
+	  >
 	| GetPluginStore<T, typeof ToastPluginId, typeof ToastStore>
 
 type GetPluginResources<

src/lib/indicateLoading.ts

@@ -0,0 +1,16 @@
+import { useCoreStore } from '@/core/stores/export'
+let loaderKeyCounter = 0
+
+export function indicateLoading() {
+	const coreStore = useCoreStore()
+	const loadingIndicatorStore = coreStore.getPluginStore('loadingIndicator')
+	if (!loadingIndicatorStore) {
+		return () => {}
+	}
+
+	const loaderKey = `lib-indicate-loading-${loaderKeyCounter++}`
+	loadingIndicatorStore.addLoadingKey(loaderKey)
+	return () => {
+		loadingIndicatorStore.removeLoadingKey(loaderKey)
+	}
+}

src/plugins/reverseGeocoder/index.ts

@@ -0,0 +1,26 @@
+/* eslint-disable tsdoc/syntax */
+/**
+ * @module \@polar/polar/plugins/reverseGeocoder
+ */
+/* eslint-enable tsdoc/syntax */
+
+import { useReverseGeocoderStore } from './store'
+import { PluginId, type ReverseGeocoderPluginOptions } from './types'
+import type { PluginContainer, PolarPluginStore } from '@/core'
+
+/**
+ * Creates a plugin which converts coordinates into addresses.
+ *
+ * @returns Plugin for use with {@link addPlugin}
+ */
+export default function pluginReverseGeocoder(
+	options: ReverseGeocoderPluginOptions
+): PluginContainer {
+	return {
+		id: PluginId,
+		storeModule: useReverseGeocoderStore as PolarPluginStore,
+		options,
+	}
+}
+
+export * from './types'