feat(ol-geolocation): pass-through original events

BREAKING CHANGE: pass-through original events from Openlayers directly and remove legacy events
The following events are not emitted anymore and replaced with the events from Openlayers. Please refer to [the official Openlayers docs for Geolocation](https://openlayers.org/en/latest/apidoc/module-ol_Geolocation-Geolocation.html) for details of the emitted event data format:
- `positionChanged` -> `change:position`
- `speedChanged` -> `change:speed`
- `headingChanged` -> `change:heading`
- `altitudeChanged` -> `change:altitude`
- `altitudeAccuracyChanged` -> `change:altitudeAccuracy`
- `accuracyGeometryChanged` -> `change:accuracyGeometry`

closes #209

Author: d-koppenhagen

docs/componentsguide/geolocation/index.md

@@ -22,32 +22,53 @@ import GeoLocationDemo from "@demos/GeoLocationDemo.vue"
 
 ## Properties
 
-### tracking
+### Props from OpenLayers
 
-- **Type**: `boolean`
-- **Default**: `true`
+Properties are passed-trough from OpenLayers directly.
+Their types and default values can be checked-out [in the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_Geolocation-Geolocation.html).
+Only some properties deviate caused by reserved keywords from Vue / HTML.
+This deviating props are described in the section below.
 
-Enables / disables tracking.
+### Deviating Properties
 
-### tracking-options
+None.
 
-- **Type**: `Object`
-- **Default**: `undefined`
+## Events
 
-Tracking options. See [PositionOptions](https://www.w3.org/TR/geolocation-API/#position_options_interface) documentation.
+You have access to all Events from the underlying Openlayers Geolocation API.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_Geolocation-Geolocation.html) to see the available events tht will be fired.
 
-### projection
+```html
+<ol-geolocation :projection="projection" @change:position="geoLocChange" />
+```
 
-- **Type**: `string`
-- **Default**: `EPSG:3857`
+## Methods
 
-Projection of the current position.
+You have access to all Methods from the underlying Openlayers Geolocation API.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_Geolocation-Geolocation.html) to see the available methods.
 
-## Emits
+To access the source, you can use a `ref()` as shown below:
 
-- `positionChanged`
-- `speedChanged`
-- `headingChanged`
-- `altitudeChanged`
-- `altitudeAccuracyChanged`
-- `accuracyGeometryChanged`
+```vue
+<template>
+  <!-- ... -->
+  <ol-geolocation
+    :projection="projection"
+    @change:position="geoLocChange"
+    ref="geoLocRef"
+  />
+  <!-- ... -->
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type Geolocation from "ol/Geolocation";
+
+const geoLocRef = ref<{ geoLoc: Geolocation }>(null);
+
+onMounted(() => {
+  const geoLocation: Geolocation = geoLocRef.value?.geoLoc;
+  // call your method on `geoLocation`
+});
+</script>
+```

src/components/map/OlGeoLocation.vue

@@ -11,46 +11,37 @@
 </template>
 
 <script setup lang="ts">
-import { watch, computed, ref } from "vue";
-import Geolocation from "ol/Geolocation";
+import { computed, ref } from "vue";
+import Geolocation, { type Options } from "ol/Geolocation";
 import type { Coordinate } from "ol/coordinate";
 import type Polygon from "ol/geom/Polygon";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import type { ProjectionLike } from "ol/proj";
+import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
 
-const emit = defineEmits([
-  "positionChanged",
-  "speedChanged",
-  "headingChanged",
-  "altitudeChanged",
-  "altitudeAccuracyChanged",
-  "accuracyGeometryChanged",
-]);
-
-const props = withDefaults(
-  defineProps<{
-    projection: ProjectionLike;
-    tracking?: boolean;
-    trackingOptions?: {
-      enableHighAccuracy: boolean;
-    };
-  }>(),
-  {
-    projection: "EPSG:3857",
-    tracking: true,
-    trackingOptions: () => ({
-      enableHighAccuracy: true,
-    }),
-  }
-);
+const props = withDefaults(defineProps<Options>(), {
+  projection: "EPSG:3857",
+  tracking: true,
+  trackingOptions: () => ({
+    enableHighAccuracy: true,
+  }),
+});
 
 const { properties } = usePropsAsObjectProperties(props);
 
-const geoLoc = computed(() => {
-  const g = new Geolocation(properties);
-  g.on("change", changeEvt);
-  return g;
-});
+const geoLoc = computed(() => new Geolocation(properties));
+
+useOpenLayersEvents(geoLoc, [
+  "change:accuracy",
+  "change:accuracyGeometry",
+  "change:altitude",
+  "change:altitudeAccuracy",
+  "change:heading",
+  "change:position",
+  "change:projection",
+  "change:speed",
+  "change:tracking",
+  "change:trackingOptions",
+]);
 
 const position = ref<Coordinate | undefined>([]);
 const accuracy = ref<number | undefined>(0);
@@ -60,45 +51,6 @@ const speed = ref<number | undefined>(0);
 const heading = ref<number | undefined>(0);
 const accuracyGeometry = ref<Polygon | null>(null);
 
-watch(position, () => {
-  emit("positionChanged", position.value);
-});
-
-watch(speed, () => {
-  emit("speedChanged", speed.value);
-});
-
-watch(heading, () => {
-  emit("headingChanged", heading.value);
-});
-
-watch(altitude, () => {
-  emit("altitudeChanged", altitude.value);
-});
-
-watch(altitudeAccuracy, () => {
-  emit("altitudeAccuracyChanged", altitudeAccuracy.value);
-});
-
-watch(accuracyGeometry, () => {
-  emit("accuracyGeometryChanged", accuracyGeometry.value);
-});
-
-const changeEvt = () => {
-  position.value = geoLoc.value.getPosition();
-  speed.value = geoLoc.value.getSpeed();
-  heading.value = geoLoc.value.getHeading();
-  accuracy.value = geoLoc.value.getAccuracy();
-  altitude.value = geoLoc.value.getAltitude();
-  altitudeAccuracy.value = geoLoc.value.getAltitudeAccuracy();
-  accuracyGeometry.value = geoLoc.value.getAccuracyGeometry();
-};
-
-watch(geoLoc, (newVal, oldVal) => {
-  oldVal.un("change", changeEvt);
-  newVal.on("change", changeEvt);
-});
-
 defineExpose({
   geoLoc,
   position,

src/demos/GeoLocationDemo.vue

@@ -17,7 +17,7 @@
       <ol-source-osm />
     </ol-tile-layer>
 
-    <ol-geolocation :projection="projection" @positionChanged="geoLocChange">
+    <ol-geolocation :projection="projection" @change:position="geoLocChange">
       <template v-slot="slotProps">
         <!-- SlotProps: {{ slotProps }} -->
         <ol-vector-layer :zIndex="2">
@@ -39,18 +39,16 @@
 import hereIcon from "@/assets/here.png";
 import { ref } from "vue";
 import type { View } from "ol";
+import type { ObjectEvent } from "ol/Object";
 
 const center = ref([40, 40]);
 const projection = ref("EPSG:4326");
-const zoom = ref(8);
+const zoom = ref(12);
 const rotation = ref(0);
 const view = ref<View>();
 const map = ref(null);
 
-const geoLocChange = (loc: number[]) => {
-  console.log(loc);
-  view.value?.fit([loc[0], loc[1], loc[0], loc[1]], {
-    maxZoom: 14,
-  });
+const geoLocChange = (event: ObjectEvent) => {
+  view.value?.setCenter(event.target?.getPosition());
 };
 </script>