feat(routing): migrate plugin

examples/snowbox/index.js

@@ -19,6 +19,7 @@
 import pluginPins from '@polar/polar/plugins/pins'
 import pluginPointerPosition from '@polar/polar/plugins/pointerPosition'
 import pluginReverseGeocoder from '@polar/polar/plugins/reverseGeocoder'
+import pluginRouting from '@polar/polar/plugins/routing'
 import pluginScale from '@polar/polar/plugins/scale'
 import pluginToast from '@polar/polar/plugins/toast'
 import pluginZoom from '@polar/polar/plugins/zoom'
@@ -92,7 +93,7 @@
 		colorScheme,
 		startCenter: [565874, 5934140],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -488,6 +489,16 @@
 						}, */
 					}),
 				},
+				{
+					plugin: pluginRouting({
+						type: 'ors',
+						url: 'https://api.openrouteservice.org/v2/directions/',
+						apiKey: '',
+						displayPreferences: true,
+						displayRouteTypesToAvoid: true,
+					}),
+					icon: 'kern-icon-fill--assistant-direction',
+				},
 			],
 			[
 				{

src/client.ts

@@ -20,6 +20,7 @@ import LoadingIndicator from '@/plugins/loadingIndicator'
 import Pins from '@/plugins/pins'
 import PointerPosition from '@/plugins/pointerPosition'
 import ReverseGeocoder from '@/plugins/reverseGeocoder'
+import Routing from '@/plugins/routing'
 import Scale from '@/plugins/scale'
 import Toast from '@/plugins/toast'
 
@@ -39,6 +40,9 @@ function addPlugins(map: typeof PolarContainer, enabledPlugins: string[]) {
 				enabledPlugins.includes('geoLocation') && {
 					plugin: GeoLocation({ renderType: 'iconMenu' }),
 				},
+				enabledPlugins.includes('geoLocation') && {
+					plugin: Routing({ type: 'ors', url: '' }),
+				},
 			].filter((x) => x) as Menu[],
 		],
 	})
@@ -85,10 +89,10 @@ function addPlugins(map: typeof PolarContainer, enabledPlugins: string[]) {
  *
  * @param containerId - ID of the container the map will render itself in.
  * @param serviceRegister - Service register given as an array, or a URL to fetch this from.
- * @param mapConfiguration - Configuration options. Only plugins that have a configuration will be created. To
- * 													enable a plugin with default configuration, add its key with an empty object. The
- * 													plugins with the ids 'fullscreen', 'geoLocation' and 'layerChooser' are added to the iconMenu.
- * 													IconMenu. The IconMenu, Toast, LayerChooser and LoadingIndicator are enabled by default.
+ * @param mapConfiguration - Configuration options. Only plugins that have a configuration will be created.
+ * 													To enable a plugin with default configuration, add its key with an empty object.
+ * 													The plugins with the ids 'fullscreen', 'geoLocation', 'routing' and 'layerChooser' are added
+ * 													to the IconMenu. The IconMenu, Toast, LayerChooser and LoadingIndicator are enabled by default.
  * @param modifyServiceRegister - Optionally modify the serviceRegister. This may be useful if a pre-existing register is used.
  *
  * @example

src/components/PolarSelect.ce.vue

@@ -30,12 +30,14 @@
 </template>
 
 <script setup lang="ts">
+import type { Ref } from 'vue'
+
 import { computed, useId } from 'vue'
 
 const props = defineProps<{
 	options: {
 		value: string | number
-		label: string
+		label: string | Ref<string>
 		ariaLabel?: string
 		[key: string]: unknown
 	}[]

src/core/types/main.ts

@@ -11,6 +11,7 @@
 import type { PinsPluginOptions } from '@/plugins/pins'
 import type { PointerPositionPluginOptions } from '@/plugins/pointerPosition'
 import type { ReverseGeocoderPluginOptions } from '@/plugins/reverseGeocoder'
+import type { RoutingPluginOptions } from '@/plugins/routing'
 import type { ScalePluginOptions } from '@/plugins/scale'
 import type { ToastPluginOptions } from '@/plugins/toast'
 import type defaults from '../utils/defaults'
@@ -304,7 +305,7 @@
 
 	// 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 addressSearch plugin. */
@@ -343,6 +344,9 @@
 	/** Configuration for reverseGeocoder plugin. */
 	reverseGeocoder?: ReverseGeocoderPluginOptions
 
+	/** Configuration for routing plugin. */
+	routing?: RoutingPluginOptions
+
 	/** Configuration for scale plugin. */
 	scale?: ScalePluginOptions
 

src/core/types/plugin.ts

@@ -38,6 +38,9 @@
 import type { usePointerPositionStore as PointerPositionStore } from '@/plugins/pointerPosition/store'
 import type { PluginId as ReverseGeocoderPluginId } from '@/plugins/reverseGeocoder'
 import type { useReverseGeocoderStore as ReverseGeocoderStore } from '@/plugins/reverseGeocoder/store'
+import type { PluginId as RoutingPluginId } from '@/plugins/routing'
+import type { resourcesEn as RoutingResources } from '@/plugins/routing/locales'
+import type { useRoutingStore as RoutingStore } from '@/plugins/routing/store'
 import type { PluginId as ScalePluginId } from '@/plugins/scale'
 import type { resourcesEn as ScaleResources } from '@/plugins/scale/locales'
 import type { useScaleStore as ScaleStore } from '@/plugins/scale/store'
@@ -151,6 +154,7 @@
 	| typeof PinsPluginId
 	| typeof PointerPositionPluginId
 	| typeof ReverseGeocoderPluginId
+	| typeof RoutingPluginId
 	| typeof ScalePluginId
 	| typeof ToastPluginId
 	| typeof ZoomPluginId
@@ -158,7 +162,7 @@
 type GetPluginStore<
 	T extends BundledPluginId,
 	I extends BundledPluginId,
 	// TODO: This fixes the type error, but relaxes type-checking for the plugin store too much.
 	// However, it is not clear if Pinia's type system allows for stronger checks at the moment.
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	S extends PolarPluginStore<any>,
@@ -187,6 +191,7 @@
 			typeof ReverseGeocoderPluginId,
 			typeof ReverseGeocoderStore
 	  >
+	| GetPluginStore<T, typeof RoutingPluginId, typeof RoutingStore>
 	| GetPluginStore<T, typeof ScalePluginId, typeof ScaleStore>
 	| GetPluginStore<T, typeof ToastPluginId, typeof ToastStore>
 	| GetPluginStore<T, typeof ZoomPluginId, typeof ZoomStore>
@@ -230,6 +235,7 @@
 			typeof PointerPositionPluginId,
 			typeof PointerPositionResources
 	  >
+	| GetPluginResources<T, typeof RoutingPluginId, typeof RoutingResources>
 	| GetPluginResources<T, typeof ScalePluginId, typeof ScaleResources>
 	| GetPluginResources<T, typeof ToastPluginId, typeof ToastResources>
 	| GetPluginResources<T, typeof ZoomPluginId, typeof ZoomResources>

src/plugins/routing/components/RoutingDetails.ce.vue

@@ -0,0 +1,193 @@
+<template>
+	<div class="routing-live-region">
+		<hr class="kern-divider" aria-hidden="true" />
+		<span role="status" aria-live="polite">
+			{{
+				$t(($) => $.ariaLive, {
+					ns: PluginId,
+					steps: steps.length,
+					duration: formatDuration(duration),
+					distance: formatDistance(distance),
+				})
+			}}
+		</span>
+	</div>
+	<section v-show="showDetails">
+		<div class="routing-details-header">
+			<h3>{{ $t(($) => $.label.details, { ns: PluginId }) }}</h3>
+			<span aria-hidden="true">
+				{{
+					$t(($) => $.duration, {
+						ns: PluginId,
+						duration: formatDuration(duration),
+					})
+				}}
+			</span>
+			<span aria-hidden="true">
+				{{
+					$t(($) => $.distance, {
+						ns: PluginId,
+						distance: formatDistance(distance),
+					})
+				}}
+			</span>
+		</div>
+		<ol :aria-label="$t(($) => $.label.steps, { ns: PluginId })">
+			<li v-for="(step, i) in steps" :key="i">
+				<span class="routing-instruction">
+					{{ step.instruction }}
+				</span>
+				<div class="routing-badges">
+					<span
+						class="kern-badge"
+						:aria-label="
+							$t(($) => $.duration, {
+								ns: PluginId,
+								duration: formatDuration(step.duration),
+							})
+						"
+					>
+						<span class="kern-icon kern-icon--pace" aria-hidden="true" />
+						<span class="kern-label" aria-hidden="true">
+							{{ formatDuration(step.duration) }}
+						</span>
+					</span>
+					<span
+						class="kern-badge"
+						:aria-label="
+							$t(($) => $.distance, {
+								ns: PluginId,
+								distance: formatDistance(step.distance),
+							})
+						"
+					>
+						<span class="kern-icon kern-icon--arrow-range" aria-hidden="true" />
+						<span class="kern-label" aria-hidden="true">
+							{{ formatDistance(step.distance) }}
+						</span>
+					</span>
+				</div>
+			</li>
+		</ol>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+import { useRoutingStore } from '../store'
+import { PluginId } from '../types'
+
+const routingStore = useRoutingStore()
+const { showDetails } = storeToRefs(routingStore)
+
+const segments = computed(
+	() => routingStore.routeFeature?.properties.segments ?? []
+)
+const distance = computed(() =>
+	segments.value.reduce((acc, segment) => acc + segment.distance, 0)
+)
+const duration = computed(() =>
+	segments.value.reduce((acc, segment) => acc + segment.duration, 0)
+)
+const steps = computed(() => segments.value.flatMap((segment) => segment.steps))
+
+function formatDistance(distance: number) {
+	if (distance >= 1000) {
+		return `${(distance / 1000).toFixed(1)} km`
+	}
+	return `${distance} m`
+}
+function formatDuration(duration: number) {
+	if (duration >= 3600) {
+		return `${(duration / 3600).toFixed(2)} h`
+	} else if (duration >= 60) {
+		return `${(duration / 60).toFixed(1)} min`
+	}
+	return `${duration} sec`
+}
+</script>
+
+<style scoped>
+.routing-live-region {
+	position: relative;
+	width: 100%;
+
+	hr {
+		width: 100%;
+	}
+
+	span {
+		position: absolute;
+		inset: 0;
+		opacity: 0;
+		pointer-events: none;
+		margin: calc(-1 * var(--kern-metric-space-small)) 0;
+	}
+}
+
+section {
+	margin-top: var(--kern-metric-space-small);
+
+	.routing-details-header {
+		position: relative;
+		display: flex;
+		justify-content: center;
+		gap: var(--kern-metric-space-small);
+		margin-bottom: var(--kern-metric-space-small);
+
+		h3 {
+			position: absolute;
+			inset: 0;
+			opacity: 0;
+			pointer-events: none;
+			margin: 0;
+		}
+
+		span {
+			font-size: var(--kern-typography-font-size-medium-static);
+		}
+	}
+
+	ol {
+		display: flex;
+		flex-direction: column;
+		gap: var(--kern-metric-space-small);
+		padding: 0;
+
+		li {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: var(--kern-metric-space-small);
+			padding: var(--kern-metric-space-small);
+			padding-left: var(--kern-metric-space-default);
+			border-radius: var(--kern-metric-border-radius-default);
+			background-color: var(--kern-color-layout-background-hued);
+			white-space: break-spaces;
+			overflow-wrap: break-word;
+
+			.routing-instruction {
+				font-weight: var(--kern-typography-font-weight-label-default);
+				color: var(--kern-color-layout-text-default);
+			}
+
+			.routing-badges {
+				display: flex;
+				gap: var(--kern-metric-space-small);
+				width: 100%;
+				color: var(--kern-color-layout-text-default);
+
+				.kern-badge {
+					box-sizing: content-box;
+					justify-content: center;
+					width: var(--kern-metric-dimension-5x-large);
+					border: var(--kern-metric-border-width-light) solid
+						var(--kern-color-decorative-border-contextual);
+				}
+			}
+		}
+	}
+}
+</style>