diff --git a/docs/componentsguide/sources/vector/index.md b/docs/componentsguide/sources/vector/index.md
index 70e6c5f3..a50dbdb5 100644
--- a/docs/componentsguide/sources/vector/index.md
+++ b/docs/componentsguide/sources/vector/index.md
@@ -4,8 +4,6 @@ ol-source-vector can be used together with ol-vector-layer to draw any vector da
 
 [[toc]]
 
-## Demo
-
 <script setup>
 import GeomPoint from "@demos/GeomPoint.vue"
 import VectorSourceDemo1 from "@demos/VectorSourceDemo1.vue"
diff --git a/package-lock.json b/package-lock.json
index cec42d87..c217c8ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "@release-it/conventional-changelog": "^8.0.1",
         "@types/file-saver": "^2.0.7",
         "@types/node": "^22.1.0",
-        "@types/ol-ext": "npm:@siedlerchr/types-ol-ext@^3.4.0",
+        "@types/ol-ext": "npm:@siedlerchr/types-ol-ext@^3.6.1",
         "@types/proj4": "^2.5.5",
         "@vitejs/plugin-vue": "^5.1.2",
         "@vitest/coverage-v8": "^2.0.5",
@@ -47,7 +47,8 @@
         "vite": "^5.3.5",
         "vite-plugin-dts": "^3.9.1",
         "vitepress": "1.3.1",
-        "vitest": "2.0.5"
+        "vitest": "2.0.5",
+        "vue-tsc": "^2.1.10"
       },
       "engines": {
         "node": ">=18.0.0"
@@ -2364,12 +2365,13 @@
     },
     "node_modules/@types/ol-ext": {
       "name": "@siedlerchr/types-ol-ext",
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@siedlerchr/types-ol-ext/-/types-ol-ext-3.4.0.tgz",
-      "integrity": "sha512-LtS9YNitiQ2UZV+RHVOS0Pehlkpcsp6qX9Sa2I33l4ZNqFCRB0T8YefGj0Se4SP8cPr1jc9+q1UU86BjFpg8ww==",
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@siedlerchr/types-ol-ext/-/types-ol-ext-3.6.1.tgz",
+      "integrity": "sha512-CSqgXdS1d028TvnVXf2/dgnU66lRGHM9+R5E8lL2ilmm6ktHVZtsIhRR8rWSXu4Ybt1rGdMbwbDxofIbilWIyQ==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
-        "jspdf": "^2.5.1"
+        "jspdf": "^2.5.2"
       }
     },
     "node_modules/@types/proj4": {
@@ -2839,15 +2841,34 @@
       }
     },
     "node_modules/@volar/typescript": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
-      "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.11.tgz",
+      "integrity": "sha512-2DT+Tdh88Spp5PyPbqhyoYavYCPDsqbHLFwcUI9K1NlY1YgUJvujGdrqUp0zWxnW7KWNTr3xSpMuv2WnaTKDAw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "1.11.1",
-        "path-browserify": "^1.0.1"
+        "@volar/language-core": "2.4.11",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
       }
     },
+    "node_modules/@volar/typescript/node_modules/@volar/language-core": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.11.tgz",
+      "integrity": "sha512-lN2C1+ByfW9/JRPpqScuZt/4OrUUse57GLI6TbLgTIqBVemdl1wNcZ1qYGEo2+Gw8coYLgCy7SuKqn6IrQcQgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.11"
+      }
+    },
+    "node_modules/@volar/typescript/node_modules/@volar/source-map": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.11.tgz",
+      "integrity": "sha512-ZQpmafIGvaZMn/8iuvCFGrW3smeqkq/IIh9F1SdSx9aUl0J4Iurzd6/FhmjNO5g2ejF3rT45dKskgXWiofqlZQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.35.tgz",
@@ -2894,6 +2915,17 @@
         "@vue/shared": "3.4.35"
       }
     },
+    "node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
+      "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
     "node_modules/@vue/devtools-api": {
       "version": "7.3.7",
       "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.3.7.tgz",
@@ -3317,6 +3349,13 @@
         "@algolia/transporter": "4.22.1"
       }
     },
+    "node_modules/alien-signals": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-0.2.2.tgz",
+      "integrity": "sha512-cZIRkbERILsBOXTQmMrxc9hgpxglstn69zm+F1ARf4aPAzdAFYd6sBq87ErO0Fj3DV94tglcyHG5kQz9nDC/8A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@@ -4845,9 +4884,10 @@
       "integrity": "sha512-+NH+KEuFLJKVVS2NvStB+W2jOs3prDTzzEhvB/6xTh8SU/g4kqlRjbqyAIwZsOHmljR/pkgSBLHteeKIH40nBA=="
     },
     "node_modules/dompurify": {
-      "version": "2.4.7",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.7.tgz",
-      "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==",
+      "version": "2.5.8",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.8.tgz",
+      "integrity": "sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
       "optional": true
     },
     "node_modules/dot-prop": {
@@ -5571,9 +5611,10 @@
       }
     },
     "node_modules/fflate": {
-      "version": "0.4.8",
-      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
-      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
     },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
@@ -7372,19 +7413,20 @@
       }
     },
     "node_modules/jspdf": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
-      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.2.tgz",
+      "integrity": "sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.14.0",
+        "@babel/runtime": "^7.23.2",
         "atob": "^2.1.2",
         "btoa": "^1.2.1",
-        "fflate": "^0.4.8"
+        "fflate": "^0.8.1"
       },
       "optionalDependencies": {
         "canvg": "^3.0.6",
         "core-js": "^3.6.0",
-        "dompurify": "^2.2.0",
+        "dompurify": "^2.5.4",
         "html2canvas": "^1.0.0-rc.5"
       }
     },
@@ -10781,6 +10823,48 @@
         }
       }
     },
+    "node_modules/vite-plugin-dts/node_modules/@volar/typescript": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
+      "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "1.11.1",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/vite-plugin-dts/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/vite-plugin-dts/node_modules/vue-tsc": {
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
+      "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "~1.11.1",
+        "@vue/language-core": "1.8.27",
+        "semver": "^7.5.4"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      }
+    },
     "node_modules/vite/node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -10898,6 +10982,13 @@
         }
       }
     },
+    "node_modules/vscode-uri": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
+      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.35.tgz",
@@ -11023,22 +11114,97 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "1.8.27",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
-      "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.10.tgz",
+      "integrity": "sha512-RBNSfaaRHcN5uqVqJSZh++Gy/YUzryuv9u1aFWhsammDJXNtUiJMNoJ747lZcQ68wUQFx6E73y4FY3D8E7FGMA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@volar/typescript": "~1.11.1",
-        "@vue/language-core": "1.8.27",
+        "@volar/typescript": "~2.4.8",
+        "@vue/language-core": "2.1.10",
         "semver": "^7.5.4"
       },
       "bin": {
         "vue-tsc": "bin/vue-tsc.js"
       },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
+    "node_modules/vue-tsc/node_modules/@volar/language-core": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.11.tgz",
+      "integrity": "sha512-lN2C1+ByfW9/JRPpqScuZt/4OrUUse57GLI6TbLgTIqBVemdl1wNcZ1qYGEo2+Gw8coYLgCy7SuKqn6IrQcQgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.11"
+      }
+    },
+    "node_modules/vue-tsc/node_modules/@volar/source-map": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.11.tgz",
+      "integrity": "sha512-ZQpmafIGvaZMn/8iuvCFGrW3smeqkq/IIh9F1SdSx9aUl0J4Iurzd6/FhmjNO5g2ejF3rT45dKskgXWiofqlZQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue-tsc/node_modules/@vue/compiler-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.13",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/vue-tsc/node_modules/@vue/compiler-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/vue-tsc/node_modules/@vue/language-core": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.10.tgz",
+      "integrity": "sha512-DAI289d0K3AB5TUG3xDp9OuQ71CnrujQwJrQnfuZDwo6eGNf0UoRlPuaVNO+Zrn65PC3j0oB2i7mNmVPggeGeQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "~2.4.8",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/compiler-vue2": "^2.7.16",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^0.2.0",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1"
+      },
       "peerDependencies": {
         "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
+    "node_modules/vue-tsc/node_modules/@vue/shared": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue-tsc/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -11051,6 +11217,13 @@
         "node": ">=10"
       }
     },
+    "node_modules/vue-tsc/node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue-tsc/node_modules/semver": {
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
diff --git a/package.json b/package.json
index f5649df1..dc562e3f 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,8 @@
     "test:e2e:debug": "npm run test:e2e -- --debug --workers=1",
     "test:e2e:trace": "npm run test:e2e -- --trace on",
     "test:e2e:report": "playwright show-report",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
     "@turf/buffer": "^7.0.0",
@@ -130,6 +131,7 @@
     "vite": "^5.3.5",
     "vite-plugin-dts": "^3.9.1",
     "vitepress": "1.3.1",
-    "vitest": "2.0.5"
+    "vitest": "2.0.5",
+    "vue-tsc": "^2.1.10"
   }
 }
diff --git a/src/components/animations/AnimationCommonProps.ts b/src/components/animations/AnimationCommonProps.ts
index a0f2103c..9913fee3 100644
--- a/src/components/animations/AnimationCommonProps.ts
+++ b/src/components/animations/AnimationCommonProps.ts
@@ -1,11 +1,6 @@
 import { easeOut } from "ol/easing";
-
-export type AnimationCommonProps = {
-  duration?: number;
-  revers?: boolean;
-  repeat?: number;
-  easing?: (t: number) => number;
-};
+import { type Options } from "ol-ext/featureanimation/FeatureAnimation";
+import type { KeysMatching } from "@/types";
 
 export const animationCommonDefaultProps = {
   duration: 1000,
@@ -13,3 +8,9 @@ export const animationCommonDefaultProps = {
   repeat: 0,
   easing: easeOut,
 };
+
+export function useDefaults<T extends Options>(
+  overrides?: T,
+): Omit<T, KeysMatching<T, object>> {
+  return { ...animationCommonDefaultProps, ...overrides } as T;
+}
diff --git a/src/components/animations/OlAnimationDrop.vue b/src/components/animations/OlAnimationDrop.vue
index 66c898eb..b3cef096 100644
--- a/src/components/animations/OlAnimationDrop.vue
+++ b/src/components/animations/OlAnimationDrop.vue
@@ -3,20 +3,16 @@
 </template>
 
 <script setup lang="ts">
-import Drop from "ol-ext/featureanimation/Drop";
+import Drop, { type Options } from "ol-ext/featureanimation/Drop";
 import useAnimation from "@/composables/useAnimation";
-import {
-  animationCommonDefaultProps,
-  type AnimationCommonProps,
-} from "@/components/animations/AnimationCommonProps";
+import { useDefaults } from "@/components/animations/AnimationCommonProps";
 
 const props = withDefaults(
-  defineProps<AnimationCommonProps & { speed?: number; side?: number }>(),
-  {
-    ...animationCommonDefaultProps,
-    side: 0,
+  defineProps<Options>(),
+  useDefaults<Options>({
+    side: "top",
     speed: 0,
-  },
+  }),
 );
 
 const exposed = useAnimation(Drop, props);
diff --git a/src/components/animations/OlAnimationFade.vue b/src/components/animations/OlAnimationFade.vue
index 54fec544..2bd3204d 100644
--- a/src/components/animations/OlAnimationFade.vue
+++ b/src/components/animations/OlAnimationFade.vue
@@ -3,17 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import Fade from "ol-ext/featureanimation/Fade";
+import Fade, { type Options } from "ol-ext/featureanimation/Fade";
 import useAnimation from "@/composables/useAnimation";
-import {
-  animationCommonDefaultProps,
-  type AnimationCommonProps,
-} from "@/components/animations/AnimationCommonProps";
+import { useDefaults } from "@/components/animations/AnimationCommonProps";
 
-const props = withDefaults(
-  defineProps<AnimationCommonProps>(),
-  animationCommonDefaultProps,
-);
+const props = withDefaults(defineProps<Options>(), useDefaults<Options>());
 
 const exposed = useAnimation(Fade, props);
 
diff --git a/src/components/animations/OlAnimationPath.vue b/src/components/animations/OlAnimationPath.vue
index 0be6d366..b3cf3da7 100644
--- a/src/components/animations/OlAnimationPath.vue
+++ b/src/components/animations/OlAnimationPath.vue
@@ -3,28 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import Path from "ol-ext/featureanimation/Path";
+import Path, { type Options } from "ol-ext/featureanimation/Path";
 import useAnimation from "@/composables/useAnimation";
-import {
-  animationCommonDefaultProps,
-  type AnimationCommonProps,
-} from "@/components/animations/AnimationCommonProps";
-import type { LineString } from "ol/geom";
+import { useDefaults } from "@/components/animations/AnimationCommonProps";
 
-const props = withDefaults(
-  defineProps<
-    AnimationCommonProps & {
-      rotate?: boolean;
-      speed?: number;
-      path: LineString;
-    }
-  >(),
-  {
-    ...animationCommonDefaultProps,
-    rotate: false,
-    speed: 0,
-  },
-);
+const props = withDefaults(defineProps<Options>(), useDefaults<Options>());
 
 const exposed = useAnimation(Path, props);
 
diff --git a/src/components/animations/OlAnimationShake.vue b/src/components/animations/OlAnimationShake.vue
index 21dd8993..9f21124d 100644
--- a/src/components/animations/OlAnimationShake.vue
+++ b/src/components/animations/OlAnimationShake.vue
@@ -3,28 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import Shake from "ol-ext/featureanimation/Shake";
+import Shake, { type Options } from "ol-ext/featureanimation/Shake";
 import useAnimation from "@/composables/useAnimation";
-import {
-  animationCommonDefaultProps,
-  type AnimationCommonProps,
-} from "@/components/animations/AnimationCommonProps";
+import { useDefaults } from "@/components/animations/AnimationCommonProps";
 
-const props = withDefaults(
-  defineProps<
-    AnimationCommonProps & {
-      bounce?: number;
-      amplitude?: number;
-      horizontal?: boolean;
-    }
-  >(),
-  {
-    ...animationCommonDefaultProps,
-    bounce: 6,
-    amplitude: 40,
-    horizontal: false,
-  },
-);
+const props = withDefaults(defineProps<Options>(), useDefaults<Options>());
 
 const exposed = useAnimation(Shake, props);
 
diff --git a/src/components/animations/OlAnimationSlide.vue b/src/components/animations/OlAnimationSlide.vue
index c2beafb2..fcd9a64b 100644
--- a/src/components/animations/OlAnimationSlide.vue
+++ b/src/components/animations/OlAnimationSlide.vue
@@ -3,20 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import Slide from "ol-ext/featureanimation/Slide";
+import Slide, { type Options } from "ol-ext/featureanimation/Slide";
 import useAnimation from "@/composables/useAnimation";
-import {
-  animationCommonDefaultProps,
-  type AnimationCommonProps,
-} from "@/components/animations/AnimationCommonProps";
+import { useDefaults } from "@/components/animations/AnimationCommonProps";
 
-const props = withDefaults(
-  defineProps<AnimationCommonProps & { speed?: number }>(),
-  {
-    ...animationCommonDefaultProps,
-    speed: 0,
-  },
-);
+const props = withDefaults(defineProps<Options>(), useDefaults<Options>());
 
 const exposed = useAnimation(Slide, props);
 
diff --git a/src/components/animations/OlAnimationTeleport.vue b/src/components/animations/OlAnimationTeleport.vue
index b9f84311..3ed56c13 100644
--- a/src/components/animations/OlAnimationTeleport.vue
+++ b/src/components/animations/OlAnimationTeleport.vue
@@ -4,16 +4,11 @@
 
 <script setup lang="ts">
 import Teleport from "ol-ext/featureanimation/Teleport";
+import { type Options } from "ol-ext/featureanimation/FeatureAnimation";
 import useAnimation from "@/composables/useAnimation";
-import {
-  animationCommonDefaultProps,
-  type AnimationCommonProps,
-} from "@/components/animations/AnimationCommonProps";
+import { useDefaults } from "@/components/animations/AnimationCommonProps";
 
-const props = withDefaults(
-  defineProps<AnimationCommonProps>(),
-  animationCommonDefaultProps,
-);
+const props = withDefaults(defineProps<Options>(), useDefaults<Options>());
 
 const exposed = useAnimation(Teleport, props);
 
diff --git a/src/components/animations/OlAnimationZoom.vue b/src/components/animations/OlAnimationZoom.vue
index c070e635..c07589b8 100644
--- a/src/components/animations/OlAnimationZoom.vue
+++ b/src/components/animations/OlAnimationZoom.vue
@@ -3,24 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import Zoom from "ol-ext/featureanimation/Zoom";
+import Zoom, { type Options } from "ol-ext/featureanimation/Zoom";
 import useAnimation from "@/composables/useAnimation";
-import {
-  type AnimationCommonProps,
-  animationCommonDefaultProps,
-} from "@/components/animations/AnimationCommonProps";
+import { useDefaults } from "@/components/animations/AnimationCommonProps";
 
-const props = withDefaults(
-  defineProps<
-    AnimationCommonProps & {
-      zoomOut?: boolean;
-    }
-  >(),
-  {
-    ...animationCommonDefaultProps,
-    zoomOut: false,
-  },
-);
+const props = withDefaults(defineProps<Options>(), useDefaults<Options>());
 
 const exposed = useAnimation(Zoom, props);
 
diff --git a/src/components/geometries/OlGeomCircle.vue b/src/components/geometries/OlGeomCircle.vue
index 69c5fbf7..7c9f3538 100644
--- a/src/components/geometries/OlGeomCircle.vue
+++ b/src/components/geometries/OlGeomCircle.vue
@@ -5,17 +5,17 @@
 <script setup lang="ts">
 import Circle from "ol/geom/Circle";
 import useGeometry from "@/composables/useGeometry";
+import type { TypedClassArgs } from "@/types";
 
-const props = withDefaults(
-  defineProps<{
-    center: number[];
-    radius: number;
-    opt_layout?: string;
-  }>(),
-  {
-    opt_layout: "XY",
-  },
-);
+type Args = TypedClassArgs<typeof Circle, ["center", "radius", "layout"]>;
+type Props = {
+  center: Args["center"];
+  radius?: Args["radius"];
+  layout?: Args["layout"];
+};
+const props = withDefaults(defineProps<Props>(), {
+  layout: "XY",
+});
 
 const geometry = useGeometry(Circle, props);
 
diff --git a/src/components/geometries/OlGeomLineString.vue b/src/components/geometries/OlGeomLineString.vue
index 836e435a..e1549c06 100644
--- a/src/components/geometries/OlGeomLineString.vue
+++ b/src/components/geometries/OlGeomLineString.vue
@@ -4,16 +4,17 @@
 <script setup lang="ts">
 import LineString from "ol/geom/LineString";
 import useGeometry from "@/composables/useGeometry";
+import type { TypedClassArgs } from "@/types";
 
-const props = withDefaults(
-  defineProps<{
-    coordinates: number[][];
-    opt_layout?: string;
-  }>(),
-  {
-    opt_layout: "XY",
-  },
-);
+type Args = TypedClassArgs<typeof LineString, ["coordinates", "layout"]>;
+type Props = {
+  coordinates: Args["coordinates"];
+  layout?: Args["layout"];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: "XY",
+});
 
 const geometry = useGeometry(LineString, props);
 
diff --git a/src/components/geometries/OlGeomMultiLineString.vue b/src/components/geometries/OlGeomMultiLineString.vue
index 265d7d5b..6a369574 100644
--- a/src/components/geometries/OlGeomMultiLineString.vue
+++ b/src/components/geometries/OlGeomMultiLineString.vue
@@ -4,16 +4,21 @@
 <script setup lang="ts">
 import MultiLineString from "ol/geom/MultiLineString";
 import useGeometry from "@/composables/useGeometry";
+import type { TypedClassArgs } from "@/types";
 
-const props = withDefaults(
-  defineProps<{
-    coordinates: number[][][];
-    opt_layout?: string;
-  }>(),
-  {
-    opt_layout: "XY",
-  },
-);
+type Args = TypedClassArgs<
+  typeof MultiLineString,
+  ["coordinates", "layout", "ends"]
+>;
+type Props = {
+  coordinates: Args["coordinates"];
+  layout?: Args["layout"];
+  ends?: Args["ends"];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: "XY",
+});
 
 const geometry = useGeometry(MultiLineString, props);
 
diff --git a/src/components/geometries/OlGeomMultiPoint.vue b/src/components/geometries/OlGeomMultiPoint.vue
index 56bcd371..eb99f1b3 100644
--- a/src/components/geometries/OlGeomMultiPoint.vue
+++ b/src/components/geometries/OlGeomMultiPoint.vue
@@ -4,16 +4,17 @@
 <script setup lang="ts">
 import MultiPoint from "ol/geom/MultiPoint";
 import useGeometry from "@/composables/useGeometry";
+import type { TypedClassArgs } from "@/types";
 
-const props = withDefaults(
-  defineProps<{
-    coordinates: number[][];
-    opt_layout?: string;
-  }>(),
-  {
-    opt_layout: "XY",
-  },
-);
+type Args = TypedClassArgs<typeof MultiPoint, ["coordinates", "layout"]>;
+type Props = {
+  coordinates: Args["coordinates"];
+  layout?: Args["layout"];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: "XY",
+});
 
 const geometry = useGeometry(MultiPoint, props);
 
diff --git a/src/components/geometries/OlGeomMultiPolygon.vue b/src/components/geometries/OlGeomMultiPolygon.vue
index a8191a2d..c26e719d 100644
--- a/src/components/geometries/OlGeomMultiPolygon.vue
+++ b/src/components/geometries/OlGeomMultiPolygon.vue
@@ -4,16 +4,21 @@
 <script setup lang="ts">
 import MultiPolygon from "ol/geom/MultiPolygon";
 import useGeometry from "@/composables/useGeometry";
+import type { TypedClassArgs } from "@/types";
 
-const props = withDefaults(
-  defineProps<{
-    coordinates: number[][][][];
-    opt_layout?: string;
-  }>(),
-  {
-    opt_layout: "XY",
-  },
-);
+type Args = TypedClassArgs<
+  typeof MultiPolygon,
+  ["coordinates", "layout", "endss"]
+>;
+type Props = {
+  coordinates: Args["coordinates"];
+  layout?: Args["layout"];
+  endss?: Args["endss"];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: "XY",
+});
 
 const geometry = useGeometry(MultiPolygon, props);
 
diff --git a/src/components/geometries/OlGeomPoint.vue b/src/components/geometries/OlGeomPoint.vue
index 942e6309..d2b8dec4 100644
--- a/src/components/geometries/OlGeomPoint.vue
+++ b/src/components/geometries/OlGeomPoint.vue
@@ -4,16 +4,17 @@
 <script setup lang="ts">
 import Point from "ol/geom/Point";
 import useGeometry from "@/composables/useGeometry";
+import type { TypedClassArgs } from "@/types";
 
-const props = withDefaults(
-  defineProps<{
-    coordinates: number[];
-    opt_layout?: string;
-  }>(),
-  {
-    opt_layout: "XY",
-  },
-);
+type Args = TypedClassArgs<typeof Point, ["coordinates", "layout"]>;
+type Props = {
+  coordinates: Args["coordinates"];
+  layout?: Args["layout"];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: "XY",
+});
 
 const geometry = useGeometry(Point, props);
 
diff --git a/src/components/geometries/OlGeomPolygon.vue b/src/components/geometries/OlGeomPolygon.vue
index cb4feb1a..5c7a01fd 100644
--- a/src/components/geometries/OlGeomPolygon.vue
+++ b/src/components/geometries/OlGeomPolygon.vue
@@ -4,16 +4,18 @@
 <script setup lang="ts">
 import Polygon from "ol/geom/Polygon";
 import useGeometry from "@/composables/useGeometry";
+import type { TypedClassArgs } from "@/types";
 
-const props = withDefaults(
-  defineProps<{
-    coordinates: number[][][];
-    opt_layout?: string;
-  }>(),
-  {
-    opt_layout: "XY",
-  },
-);
+type Args = TypedClassArgs<typeof Polygon, ["coordinates", "layout", "ends"]>;
+type Props = {
+  coordinates: Args["coordinates"];
+  layout?: Args["layout"];
+  ends?: Args["ends"];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: "XY",
+});
 
 const geometry = useGeometry(Polygon, props);
 
diff --git a/src/components/interaction/OlInteractionClusterselect.vue b/src/components/interaction/OlInteractionClusterselect.vue
index fc21214d..2b85cbf0 100644
--- a/src/components/interaction/OlInteractionClusterselect.vue
+++ b/src/components/interaction/OlInteractionClusterselect.vue
@@ -8,7 +8,11 @@ import SelectCluster, { type Options } from "ol-ext/interaction/SelectCluster";
 import Style from "ol/style/Style";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  type CommonEvents,
+  useOpenLayersEvents,
+} from "@/composables/useOpenLayersEvents";
+import type { SelectEvent } from "ol/interaction/Select";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -24,6 +28,11 @@ const props = withDefaults(defineProps<Options>(), {
   selectCluster: true,
   autoClose: true,
 });
+defineEmits<
+  CommonEvents & {
+    (e: "select", event: SelectEvent): void;
+  }
+>();
 
 const map = inject<Map>("map");
 
diff --git a/src/components/interaction/OlInteractionDragbox.vue b/src/components/interaction/OlInteractionDragbox.vue
index 75066cdc..b824a8aa 100644
--- a/src/components/interaction/OlInteractionDragbox.vue
+++ b/src/components/interaction/OlInteractionDragbox.vue
@@ -5,18 +5,32 @@
 <script setup lang="ts">
 import { inject, watch, onMounted, onUnmounted, computed } from "vue";
 
-import DragBox, { type Options } from "ol/interaction/DragBox";
+import DragBox, {
+  type DragBoxEvent,
+  type Options,
+} from "ol/interaction/DragBox";
 
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import type { Map } from "ol";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  useOpenLayersEvents,
+  type CommonEvents,
+} from "@/composables/useOpenLayersEvents";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<Options>(), {});
+const props = defineProps<Options>();
+defineEmits<
+  CommonEvents & {
+    (e: "boxcancel", event: DragBoxEvent): void;
+    (e: "boxdrag", event: DragBoxEvent): void;
+    (e: "boxend", event: DragBoxEvent): void;
+    (e: "boxstart", event: DragBoxEvent): void;
+  }
+>();
 
 const map = inject<Map>("map");
 
diff --git a/src/components/interaction/OlInteractionDragrotate.vue b/src/components/interaction/OlInteractionDragrotate.vue
index 54581941..b8b04cf5 100644
--- a/src/components/interaction/OlInteractionDragrotate.vue
+++ b/src/components/interaction/OlInteractionDragrotate.vue
@@ -5,20 +5,12 @@
 <script setup lang="ts">
 import { inject, watch, onMounted, onUnmounted, computed } from "vue";
 
-import DragRotate from "ol/interaction/DragRotate";
+import DragRotate, { type Options } from "ol/interaction/DragRotate";
 
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import type { Map } from "ol";
 
-const props = withDefaults(
-  defineProps<{
-    condition?: () => boolean;
-    duration?: number;
-  }>(),
-  {
-    duration: 250,
-  },
-);
+const props = defineProps<Options>();
 
 const map = inject<Map>("map");
 
diff --git a/src/components/interaction/OlInteractionDragrotatezoom.vue b/src/components/interaction/OlInteractionDragrotatezoom.vue
index 5f880439..3a84881a 100644
--- a/src/components/interaction/OlInteractionDragrotatezoom.vue
+++ b/src/components/interaction/OlInteractionDragrotatezoom.vue
@@ -4,19 +4,13 @@
 
 <script setup lang="ts">
 import { inject, watch, onMounted, onUnmounted, computed } from "vue";
-import DragRotateAndZoom from "ol/interaction/DragRotateAndZoom";
+import DragRotateAndZoom, {
+  type Options,
+} from "ol/interaction/DragRotateAndZoom";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 
-const props = withDefaults(
-  defineProps<{
-    condition?: () => boolean;
-    duration?: number;
-  }>(),
-  {
-    duration: 400,
-  },
-);
+const props = defineProps<Options>();
 
 const map = inject<Map>("map");
 const properties = usePropsAsObjectProperties(props);
diff --git a/src/components/interaction/OlInteractionDraw.vue b/src/components/interaction/OlInteractionDraw.vue
index d2c20c33..8407e91a 100644
--- a/src/components/interaction/OlInteractionDraw.vue
+++ b/src/components/interaction/OlInteractionDraw.vue
@@ -13,50 +13,32 @@ import {
   toRefs,
   watch,
 } from "vue";
-import type { GeometryFunction } from "ol/interaction/Draw";
-import Draw from "ol/interaction/Draw";
+import Draw, { type DrawEvent, type Options } from "ol/interaction/Draw";
 import type Map from "ol/Map";
 import type VectorSource from "ol/source/Vector";
-import type { Type as GeometryType } from "ol/geom/Geometry";
-import type { Condition } from "ol/events/condition";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  type CommonEvents,
+  useOpenLayersEvents,
+} from "@/composables/useOpenLayersEvents";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(
-  defineProps<{
-    type: GeometryType;
-    clickTolerance?: number;
-    dragVertexDelay?: number;
-    snapTolerance?: number;
-    stopClick?: boolean;
-    maxPoints?: number;
-    minPoints?: number;
-    finishCondition?: () => boolean;
-    geometryFunction?: GeometryFunction;
-    geometryName?: string;
-    condition?: () => boolean;
-    freehand?: boolean;
-    freehandCondition?: Condition;
-    wrapX?: boolean;
-  }>(),
-  {
-    clickTolerance: 6,
-    dragVertexDelay: 500,
-    snapTolerance: 12,
-    stopClick: false,
-    freehand: false,
-    wrapX: false,
-  },
-);
+const props = defineProps<Options>();
+defineEmits<
+  CommonEvents & {
+    (e: "drawstart", event: DrawEvent): void;
+    (e: "drawend", event: DrawEvent): void;
+  }
+>();
 
 const map = inject<Map>("map");
-const source = inject<Ref<VectorSource> | null>("vectorSource");
+const vectorSource = inject<Ref<VectorSource> | null>("vectorSource", null);
 
 const {
+  source,
   type,
   clickTolerance,
   dragVertexDelay,
@@ -71,25 +53,33 @@ const {
   freehand,
   freehandCondition,
   wrapX,
+  features,
+  geometryLayout,
+  trace,
+  traceSource,
 } = toRefs(props);
 
 function createDraw() {
   return new Draw({
-    source: source?.value,
+    source: source.value || vectorSource?.value,
     type: type.value,
     clickTolerance: clickTolerance.value,
     dragVertexDelay: dragVertexDelay.value,
     snapTolerance: snapTolerance.value,
     stopClick: stopClick.value,
-    maxPoints: maxPoints?.value,
-    minPoints: minPoints?.value,
-    finishCondition: finishCondition?.value,
-    geometryFunction: geometryFunction?.value,
-    geometryName: geometryName?.value,
-    condition: condition?.value,
+    maxPoints: maxPoints.value,
+    minPoints: minPoints.value,
+    finishCondition: finishCondition.value,
+    geometryFunction: geometryFunction.value,
+    geometryName: geometryName.value,
+    condition: condition.value,
     freehand: freehand.value,
-    freehandCondition: freehandCondition?.value,
+    freehandCondition: freehandCondition.value,
     wrapX: wrapX.value,
+    features: features.value,
+    geometryLayout: geometryLayout.value,
+    trace: trace.value,
+    traceSource: traceSource.value,
   });
 }
 
@@ -102,6 +92,7 @@ const { updateOpenLayersEventHandlers } = useOpenLayersEvents(draw, [
 
 watch(
   [
+    source,
     type,
     clickTolerance,
     dragVertexDelay,
@@ -116,6 +107,10 @@ watch(
     freehand,
     freehandCondition,
     wrapX,
+    features,
+    geometryLayout,
+    trace,
+    traceSource,
   ],
   () => {
     draw.value.abortDrawing();
diff --git a/src/components/interaction/OlInteractionLink.vue b/src/components/interaction/OlInteractionLink.vue
index aea4e1e0..3c57465a 100644
--- a/src/components/interaction/OlInteractionLink.vue
+++ b/src/components/interaction/OlInteractionLink.vue
@@ -14,7 +14,11 @@ import {
 import Link, { type Options } from "ol/interaction/Link";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  type CommonEvents,
+  useOpenLayersEvents,
+} from "@/composables/useOpenLayersEvents";
+import type { ObjectEvent } from "ol/Object";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -23,10 +27,15 @@ defineOptions({
 
 const props = withDefaults(defineProps<Options>(), {
   animate: true,
-  params: ["x", "y", "z", "r", "l"],
+  params: () => ["x", "y", "z", "r", "l"],
   replace: false,
   prefix: "",
 });
+defineEmits<
+  CommonEvents & {
+    (e: "change:active", event: ObjectEvent): void;
+  }
+>();
 
 const map = inject<Map>("map");
 const properties = usePropsAsObjectProperties(props);
diff --git a/src/components/interaction/OlInteractionModify.vue b/src/components/interaction/OlInteractionModify.vue
index dd0ab34c..a49ee2b5 100644
--- a/src/components/interaction/OlInteractionModify.vue
+++ b/src/components/interaction/OlInteractionModify.vue
@@ -13,36 +13,26 @@ import {
   toRefs,
   watch,
 } from "vue";
-import type Collection from "ol/Collection";
-import Modify from "ol/interaction/Modify";
+import Modify, { ModifyEvent, type Options } from "ol/interaction/Modify";
 import type Map from "ol/Map";
 import type VectorSource from "ol/source/Vector";
-import type Geometry from "ol/geom/Geometry";
-import type Feature from "ol/Feature";
-import type { Condition } from "ol/events/condition";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  useOpenLayersEvents,
+  type CommonEvents,
+} from "@/composables/useOpenLayersEvents";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(
-  defineProps<{
-    condition?: Condition;
-    deleteCondition?: Condition;
-    insertVertexCondition?: Condition;
-    pixelTolerance?: number;
-    wrapX?: boolean;
-    hitDetection?: boolean;
-    features?: Collection<Feature<Geometry>>;
-    source?: VectorSource;
-  }>(),
-  {
-    pixelTolerance: 10,
-    wrapX: false,
-  },
-);
+const props = defineProps<Options>();
+defineEmits<
+  CommonEvents & {
+    (e: "modifystart", event: ModifyEvent): void;
+    (e: "modifyend", event: ModifyEvent): void;
+  }
+>();
 
 const map = inject<Map>("map");
 const vectorSource = inject<Ref<VectorSource> | null>("vectorSource", null);
@@ -56,6 +46,7 @@ const {
   pixelTolerance,
   wrapX,
   hitDetection,
+  snapToPointer,
 } = toRefs(props);
 
 function createModify() {
@@ -66,14 +57,15 @@ function createModify() {
     );
   }
   return new Modify({
-    source: source?.value || vectorSource?.value,
-    features: features?.value,
-    condition: condition?.value,
-    deleteCondition: deleteCondition?.value,
-    insertVertexCondition: insertVertexCondition?.value,
+    source: source.value || vectorSource?.value,
+    features: features.value,
+    condition: condition.value,
+    deleteCondition: deleteCondition.value,
+    insertVertexCondition: insertVertexCondition.value,
     pixelTolerance: pixelTolerance.value,
     wrapX: wrapX.value,
     hitDetection: hitDetection.value,
+    snapToPointer: snapToPointer.value,
   });
 }
 
@@ -89,6 +81,7 @@ watch(
     pixelTolerance,
     wrapX,
     hitDetection,
+    snapToPointer,
   ],
   () => {
     modify.dispose();
diff --git a/src/components/interaction/OlInteractionMouseWheelZoom.vue b/src/components/interaction/OlInteractionMouseWheelZoom.vue
index da252782..3bf8c918 100644
--- a/src/components/interaction/OlInteractionMouseWheelZoom.vue
+++ b/src/components/interaction/OlInteractionMouseWheelZoom.vue
@@ -8,14 +8,7 @@ import MouseWheelZoom, { type Options } from "ol/interaction/MouseWheelZoom";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 
-const props = withDefaults(defineProps<Options>(), {
-  onFocusOnly: false,
-  maxDelta: 1,
-  duration: 250,
-  timeout: 80,
-  useAnchor: true,
-  constrainResolution: false,
-});
+const props = withDefaults(defineProps<Options>(), { useAnchor: true });
 
 const map = inject<Map>("map");
 const properties = usePropsAsObjectProperties(props);
diff --git a/src/components/interaction/OlInteractionPointer.vue b/src/components/interaction/OlInteractionPointer.vue
index 3638d05c..3a472468 100644
--- a/src/components/interaction/OlInteractionPointer.vue
+++ b/src/components/interaction/OlInteractionPointer.vue
@@ -7,35 +7,32 @@ import { inject, watch, onMounted, onUnmounted, shallowRef } from "vue";
 import Pointer, { type Options } from "ol/interaction/Pointer";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  type CommonEvents,
+  useOpenLayersEvents,
+} from "@/composables/useOpenLayersEvents";
 import type { MapBrowserEvent } from "ol";
+import type { ObjectEvent } from "ol/Object";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
   inheritAttrs: false,
 });
 
-const emit = defineEmits<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (e: "down", data: MapBrowserEvent<any>): void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (e: "move", data: MapBrowserEvent<any>): void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (e: "up", data: MapBrowserEvent<any>): void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (e: "drag", data: MapBrowserEvent<any>): void;
-}>();
+type Props = Omit<
+  Options,
+  "handleDownEvent" | "handleDragEvent" | "handleMoveEvent" | "handleUpEvent"
+>;
+const props = defineProps<Props>();
 
-const props =
-  defineProps<
-    Omit<
-      Options,
-      | "handleDownEvent"
-      | "handleDragEvent"
-      | "handleMoveEvent"
-      | "handleUpEvent"
-    >
-  >();
+type Emits = CommonEvents & {
+  (e: "down", data: MapBrowserEvent<UIEvent>): void;
+  (e: "move", data: MapBrowserEvent<UIEvent>): void;
+  (e: "up", data: MapBrowserEvent<UIEvent>): void;
+  (e: "drag", data: MapBrowserEvent<UIEvent>): void;
+  (e: "change:active", event: ObjectEvent): void;
+};
+const emit = defineEmits<Emits>();
 
 const map = inject<Map>("map");
 const properties = usePropsAsObjectProperties(props);
diff --git a/src/components/interaction/OlInteractionSelect.vue b/src/components/interaction/OlInteractionSelect.vue
index 6c8c4529..a2421770 100644
--- a/src/components/interaction/OlInteractionSelect.vue
+++ b/src/components/interaction/OlInteractionSelect.vue
@@ -4,35 +4,26 @@
 
 <script setup lang="ts">
 import { computed, inject, onMounted, onUnmounted, provide, watch } from "vue";
-import Select, { type FilterFunction } from "ol/interaction/Select";
+import Select, { SelectEvent, type Options } from "ol/interaction/Select";
 import Style from "ol/style/Style";
-import type Collection from "ol/Collection";
-import type { Condition } from "ol/events/condition";
-import type Feature from "ol/Feature";
-import type Geometry from "ol/geom/Geometry";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  type CommonEvents,
+  useOpenLayersEvents,
+} from "@/composables/useOpenLayersEvents";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(
-  defineProps<{
-    multi?: boolean;
-    condition?: Condition;
-    filter?: FilterFunction;
-    features?: Collection<Feature<Geometry>>;
-    hitTolerance?: number;
-    removeCondition?: Condition;
-  }>(),
-  {
-    multi: false,
-    hitTolerance: 0,
-  },
-);
+const props = defineProps<Options>();
+
+type Emits = CommonEvents & {
+  (e: "select", event: SelectEvent): void;
+};
+defineEmits<Emits>();
 
 const map = inject<Map>("map");
 const properties = usePropsAsObjectProperties(props);
@@ -40,7 +31,7 @@ const properties = usePropsAsObjectProperties(props);
 const select = computed(
   () =>
     new Select({
-      ...properties,
+      ...(properties as Options),
       style: new Style(),
     }),
 );
diff --git a/src/components/interaction/OlInteractionSnap.vue b/src/components/interaction/OlInteractionSnap.vue
index 468c0350..3957703d 100644
--- a/src/components/interaction/OlInteractionSnap.vue
+++ b/src/components/interaction/OlInteractionSnap.vue
@@ -5,33 +5,25 @@
 <script setup lang="ts">
 import type { Ref } from "vue";
 import { inject, watch, onMounted, onUnmounted } from "vue";
-import Snap from "ol/interaction/Snap";
+import Snap, { type Options } from "ol/interaction/Snap";
 import type Map from "ol/Map";
 import type VectorSource from "ol/source/Vector";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 
-const props = withDefaults(
-  defineProps<{
-    vertex?: boolean;
-    edge?: boolean;
-    pixelTolerance?: number;
-  }>(),
-  {
-    vertex: true,
-    edge: true,
-    pixelTolerance: 10,
-  },
-);
+const props = withDefaults(defineProps<Options>(), {
+  vertex: true,
+  edge: true,
+});
 
 const map = inject<Map>("map");
-const source = inject<Ref<VectorSource> | null>("vectorSource");
+const vectorSource = inject<Ref<VectorSource> | null>("vectorSource");
 
 const properties = usePropsAsObjectProperties(props);
 
 const createSnap = () =>
   new Snap({
-    ...properties,
-    source: source?.value,
+    ...(properties as Options),
+    source: props.source || vectorSource?.value,
   });
 let snap = createSnap();
 
diff --git a/src/components/interaction/OlInteractionTransform.vue b/src/components/interaction/OlInteractionTransform.vue
index e6dbd5da..83db5c31 100644
--- a/src/components/interaction/OlInteractionTransform.vue
+++ b/src/components/interaction/OlInteractionTransform.vue
@@ -4,37 +4,43 @@
 
 <script setup lang="ts">
 import { provide, inject, watch, onMounted, onUnmounted, computed } from "vue";
-import Transform from "ol-ext/interaction/Transform";
-import type { Condition } from "ol/events/condition";
+import Transform, {
+  type RotateEvent,
+  type ScaleEvent,
+  type SelectEvent,
+  type TranslateEvent,
+  type Options,
+} from "ol-ext/interaction/Transform";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  useOpenLayersEvents,
+  type CommonEvents,
+} from "@/composables/useOpenLayersEvents";
+import { always } from "ol/events/condition";
 
-const props = withDefaults(
-  defineProps<{
-    enableRotatedTransform?: boolean;
-    condition?: Condition;
-    addCondition?: Condition;
-    filter?: () => boolean;
-    hitTolerance?: number;
-    translateFeature?: boolean;
-    scale?: boolean;
-    rotate?: boolean;
-    keepAspectRatio?: Condition;
-    translate?: boolean;
-    stretch?: boolean;
-  }>(),
-  {
-    enableRotatedTransform: false,
-    hitTolerance: 2,
-    translateFeature: true,
-    scale: true,
-    rotate: true,
-    keepAspectRatio: () => false,
-    translate: true,
-    stretch: true,
-  },
-);
+const props = withDefaults(defineProps<Options>(), {
+  translateFeature: true,
+  scale: true,
+  rotate: true,
+  keepAspectRatio: always,
+  translate: true,
+  stretch: true,
+});
+
+type Emits = CommonEvents & {
+  (e: "select", event: SelectEvent): void;
+  (e: "rotatestart", event: RotateEvent): void;
+  (e: "rotating", event: RotateEvent): void;
+  (e: "rotateend", event: RotateEvent): void;
+  (e: "translatestart", event: TranslateEvent): void;
+  (e: "translating", event: TranslateEvent): void;
+  (e: "translateend", event: TranslateEvent): void;
+  (e: "scalestart", event: ScaleEvent): void;
+  (e: "scaling", event: ScaleEvent): void;
+  (e: "scaleend", event: ScaleEvent): void;
+};
+defineEmits<Emits>();
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -45,7 +51,7 @@ const map = inject<Map>("map");
 
 const properties = usePropsAsObjectProperties(props);
 
-const transform = computed(() => new Transform(properties));
+const transform = computed(() => new Transform(properties as Options));
 
 useOpenLayersEvents(transform, [
   "select",
diff --git a/src/components/layers/LayersCommonProps.ts b/src/components/layers/LayersCommonProps.ts
index 7c7da85c..aa5432ac 100644
--- a/src/components/layers/LayersCommonProps.ts
+++ b/src/components/layers/LayersCommonProps.ts
@@ -1,25 +1,22 @@
-import type { Extent } from "ol/extent";
+import type { KeysMatching, ObjectToFactory } from "@/types";
+import type { Options } from "ol/layer/Layer";
+import type { Source } from "ol/source";
+import type VectorSource from "ol/source/Vector";
 
-export type LayersCommonProps = {
-  className?: string;
-  opacity?: number;
-  visible?: boolean;
-  extent?: Extent;
-  zIndex?: number;
-  minResolution?: number;
-  maxResolution?: number;
-  minZoom?: number;
-  maxZoom?: number;
-  title?: string;
-  name?: string;
-  preview?: string;
-  baseLayer?: boolean;
-  properties?: () => Record<string, unknown>;
-};
+export type LayersCommonProps<T extends Source = VectorSource> = Partial<
+  Options<T>
+>;
 
-export const layersCommonDefaultProps = {
+export const layersCommonDefaultProps: Options<Source> = {
   className: "ol-layer",
   opacity: 1,
   visible: true,
   properties: () => ({}),
 };
+
+export function useDefaults<
+  T extends LayersCommonProps<S>,
+  S extends Source = VectorSource,
+>(overrides?: ObjectToFactory<T>): Omit<T, KeysMatching<T, object>> {
+  return { ...layersCommonDefaultProps, ...overrides } as T;
+}
diff --git a/src/components/layers/OlAnimatedClusterLayer.vue b/src/components/layers/OlAnimatedClusterLayer.vue
index 799da183..bd1ec0a8 100644
--- a/src/components/layers/OlAnimatedClusterLayer.vue
+++ b/src/components/layers/OlAnimatedClusterLayer.vue
@@ -7,49 +7,39 @@
 <script setup lang="ts">
 import { provide, shallowRef, watch } from "vue";
 import { Cluster } from "ol/source";
-import { easeOut } from "ol/easing";
 import AnimatedCluster from "ol-ext/layer/AnimatedCluster";
-import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import useLayer from "@/composables/useLayer";
-import {
-  layersCommonDefaultProps,
-  type LayersCommonProps,
-} from "@/components/layers/LayersCommonProps";
 import type { Point } from "ol/geom";
-import { FEATURE_EVENTS } from "@/composables/useOpenLayersEvents";
+import {
+  VECTOR_SOURCE_EVENTS,
+  type LayerEvents,
+  type VectorSourceEvents,
+} from "@/composables/useOpenLayersEvents";
+import type { Options } from "ol/layer/Vector";
+import { useDefaults } from "./LayersCommonProps";
+import type VectorSource from "ol/source/Vector";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(
-  defineProps<
-    LayersCommonProps & {
-      animationDuration?: number;
-      distance?: number;
-      animationMethod?: (t: number) => number;
-      updateWhileAnimating?: boolean;
-      updateWhileInteracting?: boolean;
-    }
-  >(),
-  {
-    ...layersCommonDefaultProps,
-    opacity: 1,
-    visible: true,
-    animationDuration: 700,
-    distance: 20,
-    animationMethod: easeOut,
-    updateWhileAnimating: false,
-    updateWhileInteracting: false,
-  },
-);
+// Copied from ol-ext; vue compiler chokes if we try to use the one in the library
+interface ClusterOptions extends Options<VectorSource> {
+  animationDuration?: number;
+  easingFunction?: (t: number) => number;
+  animationMethod?: (t: number) => number;
+}
 
-const properties = usePropsAsObjectProperties(props);
+type Props = {
+  distance?: number;
+} & ClusterOptions;
+const props = withDefaults(defineProps<Props>(), useDefaults<Props>());
+defineEmits<LayerEvents & VectorSourceEvents>();
 
 const clusterSource = shallowRef(
   new Cluster({
-    distance: properties.distance,
+    distance: props.distance,
     geometryFunction: (feature) => feature.getGeometry() as Point,
   }),
 );
@@ -60,13 +50,13 @@ const { layer, map } = useLayer(
     ...props,
     source: clusterSource.value,
   },
-  FEATURE_EVENTS,
+  VECTOR_SOURCE_EVENTS,
 );
 
 watch(
   () => props.distance,
   (newValue) => {
-    clusterSource.value.setDistance(newValue);
+    clusterSource.value.setDistance(newValue!);
   },
 );
 
diff --git a/src/components/layers/OlAnimatedClusterlayer.vue b/src/components/layers/OlAnimatedClusterlayer.vue
index 799da183..bd1ec0a8 100644
--- a/src/components/layers/OlAnimatedClusterlayer.vue
+++ b/src/components/layers/OlAnimatedClusterlayer.vue
@@ -7,49 +7,39 @@
 <script setup lang="ts">
 import { provide, shallowRef, watch } from "vue";
 import { Cluster } from "ol/source";
-import { easeOut } from "ol/easing";
 import AnimatedCluster from "ol-ext/layer/AnimatedCluster";
-import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import useLayer from "@/composables/useLayer";
-import {
-  layersCommonDefaultProps,
-  type LayersCommonProps,
-} from "@/components/layers/LayersCommonProps";
 import type { Point } from "ol/geom";
-import { FEATURE_EVENTS } from "@/composables/useOpenLayersEvents";
+import {
+  VECTOR_SOURCE_EVENTS,
+  type LayerEvents,
+  type VectorSourceEvents,
+} from "@/composables/useOpenLayersEvents";
+import type { Options } from "ol/layer/Vector";
+import { useDefaults } from "./LayersCommonProps";
+import type VectorSource from "ol/source/Vector";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(
-  defineProps<
-    LayersCommonProps & {
-      animationDuration?: number;
-      distance?: number;
-      animationMethod?: (t: number) => number;
-      updateWhileAnimating?: boolean;
-      updateWhileInteracting?: boolean;
-    }
-  >(),
-  {
-    ...layersCommonDefaultProps,
-    opacity: 1,
-    visible: true,
-    animationDuration: 700,
-    distance: 20,
-    animationMethod: easeOut,
-    updateWhileAnimating: false,
-    updateWhileInteracting: false,
-  },
-);
+// Copied from ol-ext; vue compiler chokes if we try to use the one in the library
+interface ClusterOptions extends Options<VectorSource> {
+  animationDuration?: number;
+  easingFunction?: (t: number) => number;
+  animationMethod?: (t: number) => number;
+}
 
-const properties = usePropsAsObjectProperties(props);
+type Props = {
+  distance?: number;
+} & ClusterOptions;
+const props = withDefaults(defineProps<Props>(), useDefaults<Props>());
+defineEmits<LayerEvents & VectorSourceEvents>();
 
 const clusterSource = shallowRef(
   new Cluster({
-    distance: properties.distance,
+    distance: props.distance,
     geometryFunction: (feature) => feature.getGeometry() as Point,
   }),
 );
@@ -60,13 +50,13 @@ const { layer, map } = useLayer(
     ...props,
     source: clusterSource.value,
   },
-  FEATURE_EVENTS,
+  VECTOR_SOURCE_EVENTS,
 );
 
 watch(
   () => props.distance,
   (newValue) => {
-    clusterSource.value.setDistance(newValue);
+    clusterSource.value.setDistance(newValue!);
   },
 );
 
diff --git a/src/components/layers/OlHeatmapLayer.vue b/src/components/layers/OlHeatmapLayer.vue
index 785845d1..4f8dab18 100644
--- a/src/components/layers/OlHeatmapLayer.vue
+++ b/src/components/layers/OlHeatmapLayer.vue
@@ -6,36 +6,32 @@
 
 <script setup lang="ts">
 import { provide } from "vue";
-import HeatmapLayer from "ol/layer/Heatmap";
-import type { Extent } from "ol/extent";
+import HeatmapLayer, { type Options } from "ol/layer/Heatmap";
 import useLayer from "@/composables/useLayer";
 import {
-  layersCommonDefaultProps,
+  useDefaults,
   type LayersCommonProps,
 } from "@/components/layers/LayersCommonProps";
+import type { LayerEvents } from "@/composables";
+import type { ObjectEvent } from "ol/Object";
 
-type WeightFunction = () => number;
+type Props = LayersCommonProps & Options;
+const props = withDefaults(defineProps<Props>(), useDefaults<Props>());
 
-const props = withDefaults(
-  defineProps<
-    LayersCommonProps & {
-      weight?: string | WeightFunction;
-      extent?: Extent;
-      blur?: number;
-      radius?: number;
-      gradient?: string[];
-    }
-  >(),
-  {
-    ...layersCommonDefaultProps,
-    weight: "weight",
-    radius: 8,
-    blur: 15,
-    gradient: () => ["#00f", "#0ff", "#0f0", "#ff0", "#f00"],
-  },
-);
+type Emits = LayerEvents & {
+  (e: "change:blur", event: ObjectEvent): void;
+  (e: "change:extent", event: ObjectEvent): void;
+  (e: "change:gradient", event: ObjectEvent): void;
+  (e: "change:radius", event: ObjectEvent): void;
+};
+defineEmits<Emits>();
 
-const { layer } = useLayer(HeatmapLayer, props);
+const { layer } = useLayer(HeatmapLayer, props, [
+  "change:blur",
+  "change:extent",
+  "change:gradient",
+  "change:radius",
+]);
 
 provide("heatmapLayer", layer);
 provide("stylable", layer);
diff --git a/src/components/layers/OlImageLayer.vue b/src/components/layers/OlImageLayer.vue
index 3bd40dd6..9b316d5c 100644
--- a/src/components/layers/OlImageLayer.vue
+++ b/src/components/layers/OlImageLayer.vue
@@ -8,15 +8,17 @@
 import { provide } from "vue";
 import ImageLayer from "ol/layer/Image";
 import useLayer from "@/composables/useLayer";
-import {
-  layersCommonDefaultProps,
-  type LayersCommonProps,
-} from "@/components/layers/LayersCommonProps";
+import { useDefaults } from "@/components/layers/LayersCommonProps";
+import type { Options } from "ol/layer/BaseImage";
+import type ImageSource from "ol/source/Image";
+import type { LayerEvents } from "@/composables";
 
+type Props = Options<ImageSource>;
 const props = withDefaults(
-  defineProps<LayersCommonProps>(),
-  layersCommonDefaultProps,
+  defineProps<Props>(),
+  useDefaults<Props, ImageSource>(),
 );
+defineEmits<LayerEvents>();
 
 const { layer } = useLayer(ImageLayer, props);
 
diff --git a/src/components/layers/OlLayerGroup.vue b/src/components/layers/OlLayerGroup.vue
index 5567f70c..e14a6c9a 100644
--- a/src/components/layers/OlLayerGroup.vue
+++ b/src/components/layers/OlLayerGroup.vue
@@ -16,31 +16,42 @@ import {
 import LayerGroup, { type Options } from "ol/layer/Group";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import { layersCommonDefaultProps } from "@/components/layers/LayersCommonProps";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  useOpenLayersEvents,
+  type CommonEvents,
+  type LayerChangeEvents,
+  type LayerRenderEvents,
+} from "@/composables/useOpenLayersEvents";
+import type { ObjectEvent } from "ol/Object";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(
-  defineProps<
-    Options & {
-      className?: string;
-      openInLayerSwitcher?: boolean;
-      title?: string;
-    }
-  >(),
-  layersCommonDefaultProps,
-);
+type Props = Options & {
+  openInLayerSwitcher?: boolean;
+  title?: string;
+};
+const props = withDefaults(defineProps<Props>(), {
+  opacity: 1,
+  visible: true,
+  properties: () => ({}),
+});
+
+type Emits = CommonEvents &
+  LayerChangeEvents &
+  LayerRenderEvents & {
+    (e: "change:layers", event: ObjectEvent): void;
+  };
+defineEmits<Emits>();
 
 const map = inject<Map>("map");
 const properties = usePropsAsObjectProperties(props);
 
-const layerGroup = shallowRef(new LayerGroup(properties));
+const layerGroup = shallowRef(new LayerGroup(properties as Options));
 useOpenLayersEvents(layerGroup, [
-  "change:extend",
+  "change:extent",
   "change:layers",
   "change:maxResolution",
   "change:maxZoom",
diff --git a/src/components/layers/OlTileLayer.vue b/src/components/layers/OlTileLayer.vue
index 067085b5..ecd2ae3c 100644
--- a/src/components/layers/OlTileLayer.vue
+++ b/src/components/layers/OlTileLayer.vue
@@ -7,25 +7,30 @@
 <script setup lang="ts">
 import { provide, toRefs } from "vue";
 import TileLayer from "ol/layer/Tile";
+import type { Options } from "ol/layer/BaseTile";
 import useLayer from "@/composables/useLayer";
-import {
-  layersCommonDefaultProps,
-  type LayersCommonProps,
-} from "@/components/layers/LayersCommonProps";
+import { useDefaults } from "@/components/layers/LayersCommonProps";
+import TileSource from "ol/source/Tile";
+import type { LayerEvents } from "@/composables";
+import type { ObjectEvent } from "ol/Object";
 
+type Props = Options<TileSource>;
+type Emits = LayerEvents & {
+  (e: "change:useInterimTilesOnError", event: ObjectEvent): void;
+  (e: "change:preload", event: ObjectEvent): void;
+};
 const props = withDefaults(
-  defineProps<
-    LayersCommonProps & {
-      preload?: number;
-    }
-  >(),
-  {
-    ...layersCommonDefaultProps,
+  defineProps<Props>(),
+  useDefaults<Props, TileSource>({
     preload: 1,
-  },
+  }),
 );
+defineEmits<Emits>();
 
-const { layer } = useLayer(TileLayer, toRefs(props));
+const { layer } = useLayer(TileLayer, toRefs(props), [
+  "change:useInterimTilesOnError",
+  "change:preload",
+]);
 
 provide("tileLayer", layer);
 
diff --git a/src/components/layers/OlVectorImageLayer.vue b/src/components/layers/OlVectorImageLayer.vue
index 002de731..e2d0cd8a 100644
--- a/src/components/layers/OlVectorImageLayer.vue
+++ b/src/components/layers/OlVectorImageLayer.vue
@@ -7,29 +7,13 @@
 <script setup lang="ts">
 import { provide } from "vue";
 
-import VectorImageLayer from "ol/layer/VectorImage";
+import VectorImageLayer, { type Options } from "ol/layer/VectorImage";
 import useLayer from "@/composables/useLayer";
-import {
-  layersCommonDefaultProps,
-  type LayersCommonProps,
-} from "@/components/layers/LayersCommonProps";
+import { useDefaults } from "@/components/layers/LayersCommonProps";
+import type { LayerEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<
-    LayersCommonProps & {
-      renderBuffer?: number;
-      updateWhileAnimating?: boolean;
-      styles?: () => unknown;
-      updateWhileInteracting?: boolean;
-    }
-  >(),
-  {
-    ...layersCommonDefaultProps,
-    renderBuffer: 100,
-    updateWhileAnimating: false,
-    updateWhileInteracting: false,
-  },
-);
+const props = withDefaults(defineProps<Options>(), useDefaults<Options>());
+defineEmits<LayerEvents>();
 
 const { layer } = useLayer(VectorImageLayer, props);
 
diff --git a/src/components/layers/OlVectorLayer.vue b/src/components/layers/OlVectorLayer.vue
index 7ae95681..cd815f71 100644
--- a/src/components/layers/OlVectorLayer.vue
+++ b/src/components/layers/OlVectorLayer.vue
@@ -6,33 +6,13 @@
 
 <script setup lang="ts">
 import { provide } from "vue";
-import VectorLayer from "ol/layer/Vector";
+import VectorLayer, { type Options } from "ol/layer/Vector";
 import useLayer from "@/composables/useLayer";
-import {
-  layersCommonDefaultProps,
-  type LayersCommonProps,
-} from "@/components/layers/LayersCommonProps";
-import type { StyleLike } from "ol/style/Style";
-import type { FlatStyleLike } from "ol/style/flat";
-import type { BackgroundColor } from "ol/layer/Base";
+import { useDefaults } from "@/components/layers/LayersCommonProps";
+import type { LayerEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<
-    LayersCommonProps & {
-      background?: BackgroundColor;
-      renderBuffer?: number;
-      updateWhileAnimating?: boolean;
-      styles?: StyleLike | FlatStyleLike | null;
-      updateWhileInteracting?: boolean;
-    }
-  >(),
-  {
-    ...layersCommonDefaultProps,
-    renderBuffer: 100,
-    updateWhileAnimating: false,
-    updateWhileInteracting: false,
-  },
-);
+const props = withDefaults(defineProps<Options>(), useDefaults<Options>());
+defineEmits<LayerEvents>();
 
 const { layer } = useLayer(VectorLayer, props);
 
diff --git a/src/components/layers/OlVectorTileLayer.vue b/src/components/layers/OlVectorTileLayer.vue
index 28ec9882..be492d96 100644
--- a/src/components/layers/OlVectorTileLayer.vue
+++ b/src/components/layers/OlVectorTileLayer.vue
@@ -6,35 +6,18 @@
 
 <script setup lang="ts">
 import { provide } from "vue";
-import VectorTileLayer, {
-  type VectorTileRenderType,
-} from "ol/layer/VectorTile";
+import VectorTileLayer, { type Options } from "ol/layer/VectorTile";
 import useLayer from "@/composables/useLayer";
-import {
-  layersCommonDefaultProps,
-  type LayersCommonProps,
-} from "@/components/layers/LayersCommonProps";
-import type { StyleLike } from "ol/style/Style";
-import type { FlatStyleLike } from "ol/style/flat";
+import { useDefaults } from "@/components/layers/LayersCommonProps";
+import type { LayerEvents } from "@/composables";
+import type { VectorTile } from "ol/source";
 
+type Props = Options;
 const props = withDefaults(
-  defineProps<
-    LayersCommonProps & {
-      renderBuffer?: number;
-      updateWhileAnimating?: boolean;
-      styles?: StyleLike | FlatStyleLike | null;
-      updateWhileInteracting?: boolean;
-      renderMode?: VectorTileRenderType;
-    }
-  >(),
-  {
-    ...layersCommonDefaultProps,
-    renderBuffer: 100,
-    updateWhileAnimating: false,
-    updateWhileInteracting: false,
-    renderMode: "hybrid",
-  },
+  defineProps<Props>(),
+  useDefaults<Props, VectorTile>(),
 );
+defineEmits<LayerEvents>();
 
 const { layer } = useLayer(VectorTileLayer, props);
 
diff --git a/src/components/layers/OlWebglTileLayer.vue b/src/components/layers/OlWebglTileLayer.vue
index df0c1714..2c85de4f 100644
--- a/src/components/layers/OlWebglTileLayer.vue
+++ b/src/components/layers/OlWebglTileLayer.vue
@@ -8,11 +8,24 @@
 import { provide } from "vue";
 import TileLayer, { type Options } from "ol/layer/WebGLTile";
 import useLayer from "@/composables/useLayer";
-import { layersCommonDefaultProps } from "./LayersCommonProps";
+import { useDefaults } from "./LayersCommonProps";
+import type { LayerEvents } from "@/composables";
+import type { ObjectEvent } from "ol/Object";
+import type { Tile } from "ol/source";
 
-const props = withDefaults(defineProps<Options>(), layersCommonDefaultProps);
+type Props = Options;
+const props = withDefaults(defineProps<Props>(), useDefaults<Props, Tile>());
 
-const { layer } = useLayer(TileLayer, props);
+type Emits = LayerEvents & {
+  (e: "change:useInterimTilesOnError", event: ObjectEvent): void;
+  (e: "change:preload", event: ObjectEvent): void;
+};
+defineEmits<Emits>();
+
+const { layer } = useLayer(TileLayer, props, [
+  "change:useInterimTilesOnError",
+  "change:preload",
+]);
 
 provide("tileLayer", layer);
 
diff --git a/src/components/layers/OlWebglVectorLayer.vue b/src/components/layers/OlWebglVectorLayer.vue
index eb2d348f..a459f643 100644
--- a/src/components/layers/OlWebglVectorLayer.vue
+++ b/src/components/layers/OlWebglVectorLayer.vue
@@ -7,31 +7,25 @@
 <script setup lang="ts">
 import { provide } from "vue";
 import useLayer from "@/composables/useLayer";
-import {
-  layersCommonDefaultProps,
-  type LayersCommonProps,
-} from "@/components/layers/LayersCommonProps";
+import { type LayersCommonProps } from "@/components/layers/LayersCommonProps";
 import { WebGLVectorLayer } from "./WebGLVectorLayerClass";
 import type { WebGLStyle } from "ol/style/webgl";
+import type { LayerEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<
-    LayersCommonProps & {
-      disableHitDetection?: boolean;
-      styles: WebGLStyle;
-    }
-  >(),
-  {
-    ...layersCommonDefaultProps,
-    disableHitDetection: false,
-    styles: () => ({
-      "shape-points": 1,
-      "shape-radius": 10,
-      "shape-opacity": 0.5,
-      "shape-fill-color": "blue",
-    }),
-  },
-);
+type Props = LayersCommonProps & {
+  disableHitDetection?: boolean;
+  styles: WebGLStyle;
+};
+const props = withDefaults(defineProps<Props>(), {
+  disableHitDetection: false,
+  styles: () => ({
+    "shape-points": 1,
+    "shape-radius": 10,
+    "shape-opacity": 0.5,
+    "shape-fill-color": "blue",
+  }),
+});
+defineEmits<LayerEvents>();
 
 const { layer } = useLayer(WebGLVectorLayer, props);
 
diff --git a/src/components/map/OlFeature.vue b/src/components/map/OlFeature.vue
index 346d932a..6a5602f6 100644
--- a/src/components/map/OlFeature.vue
+++ b/src/components/map/OlFeature.vue
@@ -13,24 +13,20 @@ import {
   ref,
   nextTick,
 } from "vue";
-import Feature from "ol/Feature";
-import type Geometry from "ol/geom/Geometry";
+import Feature, { type ObjectWithGeometry } from "ol/Feature";
+import Geometry from "ol/geom/Geometry";
 import type VectorSource from "ol/source/Vector";
 import type VectorLayer from "ol/layer/Vector";
 import type HeatmapLayer from "ol/layer/Heatmap";
 import type { FeatureAnimation } from "@/components/animations/AnimationTypes";
 
-const props = withDefaults(
-  defineProps<{
-    properties?: Geometry | Record<string, unknown> | unknown[];
-  }>(),
-  {
-    properties: () => [] as unknown[],
-  },
-);
+type Props = {
+  properties?: Geometry | ObjectWithGeometry<Geometry>;
+};
+const props = defineProps<Props>();
 
 const vectorSource = inject<Ref<VectorSource> | null>("vectorSource");
-const vectorLayer = inject<Ref<VectorLayer<VectorSource<Geometry>>> | null>(
+const vectorLayer = inject<Ref<VectorLayer<VectorSource<Feature>>> | null>(
   "vectorLayer",
   null,
 );
@@ -41,13 +37,24 @@ const animation = inject<Ref<FeatureAnimation | null> | null>(
   null,
 );
 
-const feature = ref<Feature<Geometry>>(new Feature({ ...props.properties }));
+const feature = ref<Feature<Geometry>>(
+  new Feature({ ...props.properties }),
+) as Ref<Feature<Geometry>>;
 
 watch(
   () => props.properties, // Needed as props.properties is optional
-  () => {
+  (properties) => {
     // Ensure the feature's properties are updated on change
-    feature.value.setProperties(props.properties);
+    if (properties instanceof Geometry) {
+      feature.value.setGeometry(properties);
+      feature.value.setProperties({});
+    } else if (typeof properties !== "undefined") {
+      feature.value.setGeometry(undefined);
+      feature.value.setProperties(properties);
+    } else {
+      feature.value.setGeometry(undefined);
+      feature.value.setProperties({});
+    }
   },
 );
 
@@ -62,7 +69,7 @@ watch(
 
 onMounted(() => {
   if (animation?.value) {
-    // @ts-ignore
+    // @ts-expect-error because of extra prototype function
     layer?.value?.animateFeature(feature.value, animation.value);
   }
   nextTick(() => {
diff --git a/src/components/map/OlGeoLocation.vue b/src/components/map/OlGeoLocation.vue
index 9c4d6be7..b79ea664 100644
--- a/src/components/map/OlGeoLocation.vue
+++ b/src/components/map/OlGeoLocation.vue
@@ -16,7 +16,11 @@ 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 { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  useOpenLayersEvents,
+  type CommonEvents,
+} from "@/composables/useOpenLayersEvents";
+import type { ObjectEvent } from "ol/Object";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -30,10 +34,23 @@ const props = withDefaults(defineProps<Options>(), {
     enableHighAccuracy: true,
   }),
 });
+type Emits = CommonEvents & {
+  (e: "change:accuracy", event: ObjectEvent): void;
+  (e: "change:accuracyGeometry", event: ObjectEvent): void;
+  (e: "change:altitude", event: ObjectEvent): void;
+  (e: "change:altitudeAccuracy", event: ObjectEvent): void;
+  (e: "change:heading", event: ObjectEvent): void;
+  (e: "change:position", event: ObjectEvent): void;
+  (e: "change:projection", event: ObjectEvent): void;
+  (e: "change:speed", event: ObjectEvent): void;
+  (e: "change:tracking", event: ObjectEvent): void;
+  (e: "change:trackingOptions", event: ObjectEvent): void;
+};
+defineEmits<Emits>();
 
 const properties = usePropsAsObjectProperties(props);
 
-const geoLoc = computed(() => new Geolocation(properties));
+const geoLoc = computed(() => new Geolocation(properties as Options));
 
 useOpenLayersEvents(geoLoc, [
   "change:accuracy",
diff --git a/src/components/map/OlGeolocation.vue b/src/components/map/OlGeolocation.vue
index 9c4d6be7..b79ea664 100644
--- a/src/components/map/OlGeolocation.vue
+++ b/src/components/map/OlGeolocation.vue
@@ -16,7 +16,11 @@ 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 { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  useOpenLayersEvents,
+  type CommonEvents,
+} from "@/composables/useOpenLayersEvents";
+import type { ObjectEvent } from "ol/Object";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -30,10 +34,23 @@ const props = withDefaults(defineProps<Options>(), {
     enableHighAccuracy: true,
   }),
 });
+type Emits = CommonEvents & {
+  (e: "change:accuracy", event: ObjectEvent): void;
+  (e: "change:accuracyGeometry", event: ObjectEvent): void;
+  (e: "change:altitude", event: ObjectEvent): void;
+  (e: "change:altitudeAccuracy", event: ObjectEvent): void;
+  (e: "change:heading", event: ObjectEvent): void;
+  (e: "change:position", event: ObjectEvent): void;
+  (e: "change:projection", event: ObjectEvent): void;
+  (e: "change:speed", event: ObjectEvent): void;
+  (e: "change:tracking", event: ObjectEvent): void;
+  (e: "change:trackingOptions", event: ObjectEvent): void;
+};
+defineEmits<Emits>();
 
 const properties = usePropsAsObjectProperties(props);
 
-const geoLoc = computed(() => new Geolocation(properties));
+const geoLoc = computed(() => new Geolocation(properties as Options));
 
 useOpenLayersEvents(geoLoc, [
   "change:accuracy",
diff --git a/src/components/map/OlMap.vue b/src/components/map/OlMap.vue
index a5ecaea5..4112dfc1 100644
--- a/src/components/map/OlMap.vue
+++ b/src/components/map/OlMap.vue
@@ -16,26 +16,34 @@ import type { Source } from "ol/source";
 import type { Coordinate } from "ol/coordinate";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import { mergeProperties } from "@/helpers/properties";
+import type { CommonEvents } from "@/composables";
+import type { MapBrowserEvent, MapEvent } from "ol";
+import type { ObjectEvent } from "ol/Object";
+import type RenderEvent from "ol/render/Event";
 
-const props = defineProps<MapOptions & { instance?: Map }>();
+type Props = MapOptions & { instance?: Map };
+const props = defineProps<Props>();
 
-const emit = defineEmits([
-  "change:layerGroup",
-  "change:size",
-  "change:target",
-  "change:view",
-  "click",
-  "dblclick",
-  "singleclick",
-  "pointerdrag",
-  "pointermove",
-  "movestart",
-  "moveend",
-  "postrender",
-  "precompose",
-  "postcompose",
-  "rendercomplete",
-]);
+type Emits = CommonEvents & {
+  (e: "change:layerGroup", event: ObjectEvent): void;
+  (e: "change:size", event: ObjectEvent): void;
+  (e: "change:target", event: ObjectEvent): void;
+  (e: "change:view", event: ObjectEvent): void;
+  (e: "click", event: MapBrowserEvent<UIEvent>): void;
+  (e: "dblclick", event: MapBrowserEvent<UIEvent>): void;
+  (e: "singleclick", event: MapBrowserEvent<UIEvent>): void;
+  (e: "loadstart", event: MapEvent): void;
+  (e: "loadend", event: MapEvent): void;
+  (e: "pointerdrag", event: MapBrowserEvent<UIEvent>): void;
+  (e: "pointermove", event: MapBrowserEvent<UIEvent>): void;
+  (e: "movestart", event: MapEvent): void;
+  (e: "moveend", event: MapEvent): void;
+  (e: "postrender", event: MapEvent): void;
+  (e: "precompose", event: RenderEvent): void;
+  (e: "postcompose", event: RenderEvent): void;
+  (e: "rendercomplete", event: RenderEvent): void;
+};
+const emit = defineEmits<Emits>();
 
 const properties = usePropsAsObjectProperties({
   ...props,
@@ -43,8 +51,8 @@ const properties = usePropsAsObjectProperties({
 });
 
 const mapRef = ref<string | HTMLElement | undefined>(undefined);
-let map: Map =
-  props.instance || new Map({ ...properties, instance: undefined });
+let map: Map | undefined =
+  props.instance || new Map({ ...(properties as MapOptions) });
 
 watch(
   properties,
@@ -87,6 +95,9 @@ const getCoordinateFromPixel = (pixel: Coordinate) =>
 const render = () => map?.render();
 const updateSize = () => map?.updateSize();
 
+map.on("change", (event) => emit("change", event));
+map.on("error", (event) => emit("error", event));
+map.on("propertychange", (event) => emit("propertychange", event));
 map.on("click", (event) => emit("click", event));
 map.on("change:size", (event) => emit("change:size", event));
 map.on("change:target", (event) => emit("change:target", event));
@@ -101,14 +112,16 @@ map.on("postrender", (event) => emit("postrender", event));
 map.on("precompose", (event) => emit("precompose", event));
 map.on("postcompose", (event) => emit("postcompose", event));
 map.on("rendercomplete", (event) => emit("rendercomplete", event));
-map.on("loadstart", () => {
+map.on("loadstart", (event) => {
   map?.getTargetElement().classList.add("ol-map");
   map?.getTargetElement().classList.add("ol-map-loading");
   map?.getTargetElement().classList.remove("ol-map-fully-loaded");
+  emit("loadstart", event);
 });
-map.on("loadend", () => {
+map.on("loadend", (event) => {
   map?.getTargetElement().classList.add("ol-map-fully-loaded");
   map?.getTargetElement().classList.remove("ol-map-loading");
+  emit("loadend", event);
 });
 
 defineExpose({
diff --git a/src/components/map/OlOverlay.vue b/src/components/map/OlOverlay.vue
index 62418d0d..ceaa9275 100644
--- a/src/components/map/OlOverlay.vue
+++ b/src/components/map/OlOverlay.vue
@@ -20,7 +20,11 @@ import {
 import type Map from "ol/Map";
 import type { Coordinate } from "ol/coordinate";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  useOpenLayersEvents,
+  type CommonEvents,
+} from "@/composables/useOpenLayersEvents";
+import type { ObjectEvent } from "ol/Object";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -28,13 +32,19 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<Options>(), {
-  positioning: "top-left",
   stopEvent: true,
   insertFirst: true,
-  autoPan: false,
-  className: "ol-overlay-container ol-selectable",
 });
 
+type Emits = CommonEvents & {
+  (e: "change:element", event: ObjectEvent): void;
+  (e: "change:map", event: ObjectEvent): void;
+  (e: "change:offset", event: ObjectEvent): void;
+  (e: "change:position", event: ObjectEvent): void;
+  (e: "change:positioning", event: ObjectEvent): void;
+};
+defineEmits<Emits>();
+
 const map = inject<Map>("map");
 
 const htmlContent = ref<HTMLElement>();
diff --git a/src/components/map/OlProjectionRegister.vue b/src/components/map/OlProjectionRegister.vue
index e331acba..ab818a35 100644
--- a/src/components/map/OlProjectionRegister.vue
+++ b/src/components/map/OlProjectionRegister.vue
@@ -10,16 +10,11 @@ import { register } from "ol/proj/proj4";
 import Projection from "ol/proj/Projection";
 import type { Extent } from "ol/extent";
 
-const props = withDefaults(
-  defineProps<{
-    projectionName: string;
-    projectionDef: string | ProjectionDefinition;
-    projectionExtent?: Extent;
-  }>(),
-  {
-    projectionExtent: undefined,
-  },
-);
+const props = defineProps<{
+  projectionName: string;
+  projectionDef: string | ProjectionDefinition;
+  projectionExtent?: Extent;
+}>();
 
 const { projectionName, projectionDef, projectionExtent } = toRefs(props);
 
diff --git a/src/components/map/OlView.vue b/src/components/map/OlView.vue
index 5688af8c..e243d32f 100644
--- a/src/components/map/OlView.vue
+++ b/src/components/map/OlView.vue
@@ -15,8 +15,12 @@ import type BaseEvent from "ol/events/Event";
 import type { SimpleGeometry } from "ol/geom";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import projectionFromProperties from "@/helpers/projection";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  useOpenLayersEvents,
+  type CommonEvents,
+} from "@/composables/useOpenLayersEvents";
 import type { ProjectionLike } from "ol/proj";
+import type { ObjectEvent } from "ol/Object";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -25,6 +29,8 @@ defineOptions({
 
 const props = withDefaults(defineProps<ViewOptions>(), {
   enableRotation: true,
+  smoothExtentConstraint: true,
+  smoothResolutionConstraint: true,
 });
 
 const map = inject<Map>("map");
@@ -36,6 +42,12 @@ const createProp = () => ({
 });
 const view = new View(createProp());
 
+type Emits = CommonEvents & {
+  (e: "change:center", event: ObjectEvent): void;
+  (e: "change:resolution", event: ObjectEvent): void;
+  (e: "change:rotation", event: ObjectEvent): void;
+};
+defineEmits<Emits>();
 useOpenLayersEvents(view, [
   "change:center",
   "change:resolution",
diff --git a/src/components/mapControls/OlAttributionControl.vue b/src/components/mapControls/OlAttributionControl.vue
index 4ac9486e..07c0819e 100644
--- a/src/components/mapControls/OlAttributionControl.vue
+++ b/src/components/mapControls/OlAttributionControl.vue
@@ -2,34 +2,14 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import { Attribution } from "ol/control";
+import Attribution, { type Options } from "ol/control/Attribution";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<{
-    className?: string;
-    target?: HTMLElement;
-    collapsible?: boolean;
-    collapsed?: boolean;
-    tipLabel?: string;
-    label?: string;
-    expandClassName?: string;
-    collapseLabel?: string;
-    collapseClassName?: string;
-    render?: () => void;
-  }>(),
-  {
-    className: "ol-attribution",
-    collapsed: true,
-    tipLabel: "Attributions",
-    label: "i",
-    expandClassName: "ol-attribution-expand",
-    collapseLabel: "»",
-    collapseClassName: "ol-attribution-collapse",
-  },
-);
+const props = withDefaults(defineProps<Options>(), { collapsed: true });
+defineEmits<CommonEvents>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
diff --git a/src/components/mapControls/OlButtonControl.vue b/src/components/mapControls/OlButtonControl.vue
index d8cbf93a..d2c00e81 100644
--- a/src/components/mapControls/OlButtonControl.vue
+++ b/src/components/mapControls/OlButtonControl.vue
@@ -2,26 +2,17 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import Button from "ol-ext/control/Button";
-
+import Button, { type Options } from "ol-ext/control/Button";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<{
-    html?: string;
-    name?: string;
-    className?: string;
-    title?: string;
-    handleClick?: () => unknown;
-  }>(),
-  {},
-);
+const props = defineProps<Options>();
+defineEmits<CommonEvents>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
-
 const { control } = useControl(Button, properties, attrs);
 
 defineExpose({
diff --git a/src/components/mapControls/OlContextMenuControl.vue b/src/components/mapControls/OlContextMenuControl.vue
index 84aa91aa..465b4398 100644
--- a/src/components/mapControls/OlContextMenuControl.vue
+++ b/src/components/mapControls/OlContextMenuControl.vue
@@ -2,11 +2,15 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import ContextMenu, { type Options } from "ol-contextmenu";
+import ContextMenu, {
+  type ContextMenuEvent,
+  type Options,
+} from "ol-contextmenu";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import type { CommonEvents } from "@/composables";
+import type BaseEvent from "ol/events/Event";
 
 const props = withDefaults(defineProps<Partial<Options>>(), {
   eventType: "contextmenu",
@@ -15,6 +19,13 @@ const props = withDefaults(defineProps<Partial<Options>>(), {
   items: () => [],
 });
 
+type Emits = CommonEvents & {
+  (e: "beforeopen", event: ContextMenuEvent): void;
+  (e: "open", event: ContextMenuEvent): void;
+  (e: "close", event: BaseEvent): void;
+};
+defineEmits<Emits>();
+
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
   inheritAttrs: false,
@@ -22,9 +33,11 @@ defineOptions({
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
-
-const { control } = useControl(ContextMenu, properties, attrs);
-useOpenLayersEvents(control, ["beforeopen", "open", "close", "add-menu-entry"]);
+const { control } = useControl(ContextMenu, properties, attrs, [
+  "beforeopen",
+  "open",
+  "close",
+]);
 
 defineExpose({
   control,
diff --git a/src/components/mapControls/OlControlBar.vue b/src/components/mapControls/OlControlBar.vue
index 58153fd4..b6afe442 100644
--- a/src/components/mapControls/OlControlBar.vue
+++ b/src/components/mapControls/OlControlBar.vue
@@ -3,25 +3,20 @@
 </template>
 
 <script setup lang="ts">
-import Bar from "ol-ext/control/Bar";
+import Bar, { type Options } from "ol-ext/control/Bar";
 import { provide, useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<{
-    toggleOne?: boolean;
-    group?: boolean;
-  }>(),
-  {
-    toggleOne: true,
-    group: true,
-  },
-);
+const props = withDefaults(defineProps<Options>(), {
+  toggleOne: true,
+  group: true,
+});
+defineEmits<CommonEvents>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
-
 const { control } = useControl(Bar, properties, attrs);
 
 provide("controlBar", control);
diff --git a/src/components/mapControls/OlFullScreenControl.vue b/src/components/mapControls/OlFullScreenControl.vue
index 38a95d8a..d7fa0c41 100644
--- a/src/components/mapControls/OlFullScreenControl.vue
+++ b/src/components/mapControls/OlFullScreenControl.vue
@@ -3,38 +3,24 @@
 </template>
 <script setup lang="ts">
 import { useAttrs } from "vue";
-import { FullScreen } from "ol/control";
+import FullScreen, { type Options } from "ol/control/FullScreen";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<{
-    className?: string;
-    label?: string;
-    labelActive?: string;
-    activeClassName?: string;
-    inactiveClassName?: string;
-    tipLabel?: string;
-    keys?: boolean;
-    target?: Record<string, unknown>;
-    source?: Record<string, unknown>;
-  }>(),
-  {
-    className: "ol-full-screen",
-    label: "\u2922",
-    labelActive: "\u00d7",
-    activeClassName: "ol-full-screen-true",
-    inactiveClassName: "ol-full-screen-false",
-    tipLabel: "Toggle full-screen",
-    keys: false,
-    target: undefined,
-    source: undefined,
-  },
-);
+const props = defineProps<Options>();
+type Emits = CommonEvents & {
+  (e: "enterfullscreen"): void;
+  (e: "leavefullscreen"): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
-const { control } = useControl(FullScreen, properties, attrs);
+const { control } = useControl(FullScreen, properties as Options, attrs, [
+  "enterfullscreen",
+  "leavefullscreen",
+]);
 
 defineExpose({
   control,
diff --git a/src/components/mapControls/OlFullscreenControl.vue b/src/components/mapControls/OlFullscreenControl.vue
index 38a95d8a..d7fa0c41 100644
--- a/src/components/mapControls/OlFullscreenControl.vue
+++ b/src/components/mapControls/OlFullscreenControl.vue
@@ -3,38 +3,24 @@
 </template>
 <script setup lang="ts">
 import { useAttrs } from "vue";
-import { FullScreen } from "ol/control";
+import FullScreen, { type Options } from "ol/control/FullScreen";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<{
-    className?: string;
-    label?: string;
-    labelActive?: string;
-    activeClassName?: string;
-    inactiveClassName?: string;
-    tipLabel?: string;
-    keys?: boolean;
-    target?: Record<string, unknown>;
-    source?: Record<string, unknown>;
-  }>(),
-  {
-    className: "ol-full-screen",
-    label: "\u2922",
-    labelActive: "\u00d7",
-    activeClassName: "ol-full-screen-true",
-    inactiveClassName: "ol-full-screen-false",
-    tipLabel: "Toggle full-screen",
-    keys: false,
-    target: undefined,
-    source: undefined,
-  },
-);
+const props = defineProps<Options>();
+type Emits = CommonEvents & {
+  (e: "enterfullscreen"): void;
+  (e: "leavefullscreen"): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
-const { control } = useControl(FullScreen, properties, attrs);
+const { control } = useControl(FullScreen, properties as Options, attrs, [
+  "enterfullscreen",
+  "leavefullscreen",
+]);
 
 defineExpose({
   control,
diff --git a/src/components/mapControls/OlLayerSwitcherControl.vue b/src/components/mapControls/OlLayerSwitcherControl.vue
index 7ef22799..6f1431ad 100644
--- a/src/components/mapControls/OlLayerSwitcherControl.vue
+++ b/src/components/mapControls/OlLayerSwitcherControl.vue
@@ -2,24 +2,41 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import LayerSwitcher, { type Options } from "ol-ext/control/LayerSwitcher";
+import LayerSwitcher from "ol-ext/control/LayerSwitcher";
+import type {
+  LayerSwitcherEvent,
+  LayerSwitcherReorderEvent,
+  Options,
+} from "ol-ext/control/LayerSwitcher";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
 const props = withDefaults(defineProps<Options>(), {
-  show_progress: false,
-  mouseover: false,
   reordering: true,
-  trash: false,
   collapsed: true,
-  noScroll: false,
 });
+type Emits = CommonEvents & {
+  (e: "drawlist", event: LayerSwitcherEvent): void;
+  (e: "layer:visible", event: LayerSwitcherEvent): void;
+  (e: "layer:opacity", event: LayerSwitcherEvent): void;
+  (e: "toggle", event: ToggleEvent): void;
+  (e: "reorder-start", event: LayerSwitcherReorderEvent): void;
+  (e: "reorder-end", event: LayerSwitcherReorderEvent): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
-
-const { control } = useControl(LayerSwitcher, properties, attrs);
+const { control } = useControl(LayerSwitcher, properties, attrs, [
+  "drawlist",
+  "layer:visible",
+  "layer:opacity",
+  "toggle",
+  "reorder-start",
+  "reorder-end",
+]);
 
 defineExpose({
   control,
diff --git a/src/components/mapControls/OlLayerSwitcherImageControl.vue b/src/components/mapControls/OlLayerSwitcherImageControl.vue
index 53a1d813..8e90c081 100644
--- a/src/components/mapControls/OlLayerSwitcherImageControl.vue
+++ b/src/components/mapControls/OlLayerSwitcherImageControl.vue
@@ -3,24 +3,41 @@
 </template>
 <script setup lang="ts">
 import LayerSwitcherImage from "ol-ext/control/LayerSwitcherImage";
-import { type Options } from "ol-ext/control/LayerSwitcher";
+import type {
+  LayerSwitcherEvent,
+  LayerSwitcherReorderEvent,
+  Options,
+} from "ol-ext/control/LayerSwitcher";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
 const props = withDefaults(defineProps<Options>(), {
-  show_progress: false,
-  mouseover: false,
-  reordering: true,
-  trash: false,
   collapsed: true,
-  noScroll: false,
+  reordering: true,
 });
+type Emits = CommonEvents & {
+  (e: "drawlist", event: LayerSwitcherEvent): void;
+  (e: "layer:visible", event: LayerSwitcherEvent): void;
+  (e: "layer:opacity", event: LayerSwitcherEvent): void;
+  (e: "toggle", event: ToggleEvent): void;
+  (e: "reorder-start", event: LayerSwitcherReorderEvent): void;
+  (e: "reorder-end", event: LayerSwitcherReorderEvent): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
 
-const { control } = useControl(LayerSwitcherImage, properties, attrs);
+const { control } = useControl(LayerSwitcherImage, properties, attrs, [
+  "drawlist",
+  "layer:visible",
+  "layer:opacity",
+  "toggle",
+  "reorder-start",
+  "reorder-end",
+]);
 
 defineExpose({
   control,
diff --git a/src/components/mapControls/OlLayerswitcherControl.vue b/src/components/mapControls/OlLayerswitcherControl.vue
index 7ef22799..6f1431ad 100644
--- a/src/components/mapControls/OlLayerswitcherControl.vue
+++ b/src/components/mapControls/OlLayerswitcherControl.vue
@@ -2,24 +2,41 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import LayerSwitcher, { type Options } from "ol-ext/control/LayerSwitcher";
+import LayerSwitcher from "ol-ext/control/LayerSwitcher";
+import type {
+  LayerSwitcherEvent,
+  LayerSwitcherReorderEvent,
+  Options,
+} from "ol-ext/control/LayerSwitcher";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
 const props = withDefaults(defineProps<Options>(), {
-  show_progress: false,
-  mouseover: false,
   reordering: true,
-  trash: false,
   collapsed: true,
-  noScroll: false,
 });
+type Emits = CommonEvents & {
+  (e: "drawlist", event: LayerSwitcherEvent): void;
+  (e: "layer:visible", event: LayerSwitcherEvent): void;
+  (e: "layer:opacity", event: LayerSwitcherEvent): void;
+  (e: "toggle", event: ToggleEvent): void;
+  (e: "reorder-start", event: LayerSwitcherReorderEvent): void;
+  (e: "reorder-end", event: LayerSwitcherReorderEvent): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
-
-const { control } = useControl(LayerSwitcher, properties, attrs);
+const { control } = useControl(LayerSwitcher, properties, attrs, [
+  "drawlist",
+  "layer:visible",
+  "layer:opacity",
+  "toggle",
+  "reorder-start",
+  "reorder-end",
+]);
 
 defineExpose({
   control,
diff --git a/src/components/mapControls/OlLayerswitcherimageControl.vue b/src/components/mapControls/OlLayerswitcherimageControl.vue
index 53a1d813..8e90c081 100644
--- a/src/components/mapControls/OlLayerswitcherimageControl.vue
+++ b/src/components/mapControls/OlLayerswitcherimageControl.vue
@@ -3,24 +3,41 @@
 </template>
 <script setup lang="ts">
 import LayerSwitcherImage from "ol-ext/control/LayerSwitcherImage";
-import { type Options } from "ol-ext/control/LayerSwitcher";
+import type {
+  LayerSwitcherEvent,
+  LayerSwitcherReorderEvent,
+  Options,
+} from "ol-ext/control/LayerSwitcher";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
 const props = withDefaults(defineProps<Options>(), {
-  show_progress: false,
-  mouseover: false,
-  reordering: true,
-  trash: false,
   collapsed: true,
-  noScroll: false,
+  reordering: true,
 });
+type Emits = CommonEvents & {
+  (e: "drawlist", event: LayerSwitcherEvent): void;
+  (e: "layer:visible", event: LayerSwitcherEvent): void;
+  (e: "layer:opacity", event: LayerSwitcherEvent): void;
+  (e: "toggle", event: ToggleEvent): void;
+  (e: "reorder-start", event: LayerSwitcherReorderEvent): void;
+  (e: "reorder-end", event: LayerSwitcherReorderEvent): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
 
-const { control } = useControl(LayerSwitcherImage, properties, attrs);
+const { control } = useControl(LayerSwitcherImage, properties, attrs, [
+  "drawlist",
+  "layer:visible",
+  "layer:opacity",
+  "toggle",
+  "reorder-start",
+  "reorder-end",
+]);
 
 defineExpose({
   control,
diff --git a/src/components/mapControls/OlMousePositionControl.vue b/src/components/mapControls/OlMousePositionControl.vue
index e1f45a6e..50bd731d 100644
--- a/src/components/mapControls/OlMousePositionControl.vue
+++ b/src/components/mapControls/OlMousePositionControl.vue
@@ -3,27 +3,26 @@
 </template>
 <script setup lang="ts">
 import { useAttrs } from "vue";
-import { MousePosition } from "ol/control";
+import MousePosition, { type Options } from "ol/control/MousePosition";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
+import type { ObjectEvent } from "ol/Object";
 
-const props = withDefaults(
-  defineProps<{
-    className?: string;
-    coordinateFormat?: [string, (...args: unknown[]) => unknown];
-    projection?: string;
-    render?: (...args: unknown[]) => unknown;
-    target?: HTMLElement;
-  }>(),
-  {
-    className: "ol-mouse-position",
-  },
-);
+const props = withDefaults(defineProps<Options>(), { wrapX: true });
+type Emits = CommonEvents & {
+  (e: "change:coordinateFormat", event: ObjectEvent): void;
+  (e: "change:projection", event: ObjectEvent): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
+const { control } = useControl(MousePosition, properties, attrs, [
+  "change:coordinateFormat",
+  "change:projection",
+]);
 
-const { control } = useControl(MousePosition, properties, attrs);
 defineExpose({
   control,
 });
diff --git a/src/components/mapControls/OlMousepositionControl.vue b/src/components/mapControls/OlMousepositionControl.vue
index e1f45a6e..50bd731d 100644
--- a/src/components/mapControls/OlMousepositionControl.vue
+++ b/src/components/mapControls/OlMousepositionControl.vue
@@ -3,27 +3,26 @@
 </template>
 <script setup lang="ts">
 import { useAttrs } from "vue";
-import { MousePosition } from "ol/control";
+import MousePosition, { type Options } from "ol/control/MousePosition";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
+import type { ObjectEvent } from "ol/Object";
 
-const props = withDefaults(
-  defineProps<{
-    className?: string;
-    coordinateFormat?: [string, (...args: unknown[]) => unknown];
-    projection?: string;
-    render?: (...args: unknown[]) => unknown;
-    target?: HTMLElement;
-  }>(),
-  {
-    className: "ol-mouse-position",
-  },
-);
+const props = withDefaults(defineProps<Options>(), { wrapX: true });
+type Emits = CommonEvents & {
+  (e: "change:coordinateFormat", event: ObjectEvent): void;
+  (e: "change:projection", event: ObjectEvent): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
+const { control } = useControl(MousePosition, properties, attrs, [
+  "change:coordinateFormat",
+  "change:projection",
+]);
 
-const { control } = useControl(MousePosition, properties, attrs);
 defineExpose({
   control,
 });
diff --git a/src/components/mapControls/OlOverviewMapControl.vue b/src/components/mapControls/OlOverviewMapControl.vue
index 1227b1d5..1dfc6c83 100644
--- a/src/components/mapControls/OlOverviewMapControl.vue
+++ b/src/components/mapControls/OlOverviewMapControl.vue
@@ -9,8 +9,13 @@ import OverviewMap, { type Options } from "ol/control/OverviewMap";
 import { provide, useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = defineProps<Options>();
+const props = withDefaults(defineProps<Options>(), {
+  collapsed: true,
+  collapsible: true,
+});
+defineEmits<CommonEvents>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
diff --git a/src/components/mapControls/OlOverviewmapControl.vue b/src/components/mapControls/OlOverviewmapControl.vue
index 1227b1d5..1dfc6c83 100644
--- a/src/components/mapControls/OlOverviewmapControl.vue
+++ b/src/components/mapControls/OlOverviewmapControl.vue
@@ -9,8 +9,13 @@ import OverviewMap, { type Options } from "ol/control/OverviewMap";
 import { provide, useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = defineProps<Options>();
+const props = withDefaults(defineProps<Options>(), {
+  collapsed: true,
+  collapsible: true,
+});
+defineEmits<CommonEvents>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
diff --git a/src/components/mapControls/OlPrintDialogControl.vue b/src/components/mapControls/OlPrintDialogControl.vue
index 18bfaa4d..78f3f62c 100644
--- a/src/components/mapControls/OlPrintDialogControl.vue
+++ b/src/components/mapControls/OlPrintDialogControl.vue
@@ -2,23 +2,30 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import PrintDialog, { type Options } from "ol-ext/control/PrintDialog";
-
+import PrintDialog, {
+  type PrintingEvent,
+  type Options,
+} from "ol-ext/control/PrintDialog";
 import { saveAs } from "file-saver";
 import { jsPDF as jsPDFClass } from "jspdf";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(defineProps<Options>(), {});
+const props = defineProps<Options>();
+type Emits = CommonEvents & {
+  (e: "printing", event: PrintingEvent): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
+const { control } = useControl(PrintDialog, properties, attrs, ["printing"]);
 
-const { control } = useControl(PrintDialog, properties, attrs);
-
-// @ts-ignore
-control.value.on(["print", "error"], (e: unknown) => {
+// @ts-expect-error because wrong/incomplete typings on control
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+control.value.on(["print", "error"], (e: any) => {
   // Print success
   if (e.image) {
     if (e.pdf) {
diff --git a/src/components/mapControls/OlPrintdialogControl.vue b/src/components/mapControls/OlPrintdialogControl.vue
index 18bfaa4d..78f3f62c 100644
--- a/src/components/mapControls/OlPrintdialogControl.vue
+++ b/src/components/mapControls/OlPrintdialogControl.vue
@@ -2,23 +2,30 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import PrintDialog, { type Options } from "ol-ext/control/PrintDialog";
-
+import PrintDialog, {
+  type PrintingEvent,
+  type Options,
+} from "ol-ext/control/PrintDialog";
 import { saveAs } from "file-saver";
 import { jsPDF as jsPDFClass } from "jspdf";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(defineProps<Options>(), {});
+const props = defineProps<Options>();
+type Emits = CommonEvents & {
+  (e: "printing", event: PrintingEvent): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
+const { control } = useControl(PrintDialog, properties, attrs, ["printing"]);
 
-const { control } = useControl(PrintDialog, properties, attrs);
-
-// @ts-ignore
-control.value.on(["print", "error"], (e: unknown) => {
+// @ts-expect-error because wrong/incomplete typings on control
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+control.value.on(["print", "error"], (e: any) => {
   // Print success
   if (e.image) {
     if (e.pdf) {
diff --git a/src/components/mapControls/OlProfileControl.vue b/src/components/mapControls/OlProfileControl.vue
index 6cd79001..70f9a9af 100644
--- a/src/components/mapControls/OlProfileControl.vue
+++ b/src/components/mapControls/OlProfileControl.vue
@@ -6,14 +6,30 @@ import Profile, { type Options } from "ol-ext/control/Profile";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  useOpenLayersEvents,
+  type CommonEvents,
+} from "@/composables/useOpenLayersEvents";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<Options>(), {});
+const props = defineProps<Options>();
+// Missing typings for events, use any
+/* eslint-disable @typescript-eslint/no-explicit-any */
+type Emits = CommonEvents & {
+  (e: "over", ...args: any[]): void;
+  (e: "out", ...args: any[]): void;
+  (e: "show", ...args: any[]): void;
+  (e: "dragstart", ...args: any[]): void;
+  (e: "dragging", ...args: any[]): void;
+  (e: "dragend", ...args: any[]): void;
+  (e: "dragcancel", ...args: any[]): void;
+};
+/* eslint-enable @typescript-eslint/no-explicit-any */
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
diff --git a/src/components/mapControls/OlRotateControl.vue b/src/components/mapControls/OlRotateControl.vue
index ada828b8..e70350e1 100644
--- a/src/components/mapControls/OlRotateControl.vue
+++ b/src/components/mapControls/OlRotateControl.vue
@@ -2,36 +2,19 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import Rotate from "ol/control/Rotate";
+import Rotate, { type Options } from "ol/control/Rotate";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<{
-    className?: string;
-    label?: string;
-    tipLabel?: string;
-    compassClassName?: string;
-    duration?: number;
-    autoHide?: boolean;
-    render?: (...args: unknown[]) => unknown;
-    resetNorth?: (...args: unknown[]) => unknown;
-    target?: HTMLElement;
-  }>(),
-  {
-    className: "ol-rotate",
-    label: "⇧",
-    tipLabel: "Reset rotation",
-    compassClassName: "ol-compass",
-    duration: 250,
-    autoHide: false,
-  },
-);
+const props = withDefaults(defineProps<Options>(), {
+  autoHide: true,
+});
+defineEmits<CommonEvents>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
-
 const { control } = useControl(Rotate, properties, attrs);
 
 defineExpose({
diff --git a/src/components/mapControls/OlScalelineControl.vue b/src/components/mapControls/OlScalelineControl.vue
index 37f2060d..c4c6f2d8 100644
--- a/src/components/mapControls/OlScalelineControl.vue
+++ b/src/components/mapControls/OlScalelineControl.vue
@@ -6,12 +6,13 @@ import ScaleLine, { type Options } from "ol/control/ScaleLine";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
 const props = defineProps<Options>();
+defineEmits<CommonEvents>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
-
 const { control } = useControl(ScaleLine, properties, attrs);
 
 defineExpose({
diff --git a/src/components/mapControls/OlSearchControl.vue b/src/components/mapControls/OlSearchControl.vue
index f4fdfd15..6e109881 100644
--- a/src/components/mapControls/OlSearchControl.vue
+++ b/src/components/mapControls/OlSearchControl.vue
@@ -2,24 +2,28 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import Search, { type Options } from "ol-ext/control/Search";
+import Search, { type SearchEvent, type Options } from "ol-ext/control/Search";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  useOpenLayersEvents,
+  type CommonEvents,
+} from "@/composables/useOpenLayersEvents";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<Options>(), {
-  className: "ol-search",
-});
+const props = withDefaults(defineProps<Options>(), { collapsed: true });
+type Emits = CommonEvents & {
+  (e: "select", event: SearchEvent): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
-
 const { control } = useControl(Search, properties, attrs);
 
 useOpenLayersEvents(control, ["select"]);
diff --git a/src/components/mapControls/OlSwipeControl.vue b/src/components/mapControls/OlSwipeControl.vue
index 02fc58e6..58873d5f 100644
--- a/src/components/mapControls/OlSwipeControl.vue
+++ b/src/components/mapControls/OlSwipeControl.vue
@@ -2,30 +2,30 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import Swipe from "ol-ext/control/Swipe";
+import Swipe, { type Options } from "ol-ext/control/Swipe";
 import { useAttrs } from "vue";
 import type { Layer } from "ol/layer";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<{
-    layerList?: Layer[];
-    className?: string;
-    position?: number;
-    orientation?: string;
-  }>(),
-  {
-    className: "ol-swipe",
-    position: 0.5,
-    orientation: "vertical",
-  },
-);
+// TODO: what's the point of layerList?
+type Props = Options & {
+  layerList?: Layer[];
+};
+const props = withDefaults(defineProps<Props>(), {
+  className: "ol-swipe",
+});
+type Emits = CommonEvents & {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: "moving", ...args: any[]): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
 
-const { control } = useControl(Swipe, properties, attrs);
+const { control } = useControl(Swipe, properties, attrs, ["moving"]);
 
 props.layerList?.forEach((layer, index) => {
   control.value.addLayer(layer, index === 1);
diff --git a/src/components/mapControls/OlToggleControl.vue b/src/components/mapControls/OlToggleControl.vue
index fd3accce..0371d3a4 100644
--- a/src/components/mapControls/OlToggleControl.vue
+++ b/src/components/mapControls/OlToggleControl.vue
@@ -7,13 +7,23 @@ import Toggle, { type Options } from "ol-ext/control/Toggle";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
+import type { ObjectEvent } from "ol/Object";
 
-const props = withDefaults(defineProps<Options>(), {});
+const props = defineProps<Options>();
+type Emits = CommonEvents & {
+  (e: "change:active", event: ObjectEvent): void;
+  (e: "change:disable", event: ObjectEvent): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
 
-const { control } = useControl(Toggle, properties, attrs);
+const { control } = useControl(Toggle, properties, attrs, [
+  "change:active",
+  "change:disable",
+]);
 
 defineExpose({
   control,
diff --git a/src/components/mapControls/OlVideoRecorderControl.vue b/src/components/mapControls/OlVideoRecorderControl.vue
index 598c0d35..e2c3d223 100644
--- a/src/components/mapControls/OlVideoRecorderControl.vue
+++ b/src/components/mapControls/OlVideoRecorderControl.vue
@@ -7,8 +7,8 @@ import { saveAs } from "file-saver";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
 import type { ObjectEvent } from "ol/Object";
+import type { CommonEvents } from "@/composables";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -18,15 +18,27 @@ defineOptions({
 const props = withDefaults(defineProps<Options & { downloadName?: string }>(), {
   downloadName: "mapVideo.mp4",
 });
+type Emits = CommonEvents & {
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  (e: "start", ...args: any): void;
+  (e: "stop", ...args: any): void;
+  (e: "pause", ...args: any): void;
+  (e: "result", ...args: any): void;
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
-const { control } = useControl(VideoRecorder, properties, attrs);
-
-useOpenLayersEvents(control, ["start", "stop", "pause", "resume"]);
+const { control } = useControl(VideoRecorder, properties, attrs, [
+  "start",
+  "stop",
+  "pause",
+  "resume",
+]);
 
 control.value.on(
-  // @ts-ignore
+  // @ts-expect-error because of wrong typings
   "stop",
   (event: ObjectEvent & { videoURL: string }) => {
     if (props.downloadName) {
diff --git a/src/components/mapControls/OlVideorecorderControl.vue b/src/components/mapControls/OlVideorecorderControl.vue
index 598c0d35..e2c3d223 100644
--- a/src/components/mapControls/OlVideorecorderControl.vue
+++ b/src/components/mapControls/OlVideorecorderControl.vue
@@ -7,8 +7,8 @@ import { saveAs } from "file-saver";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
 import type { ObjectEvent } from "ol/Object";
+import type { CommonEvents } from "@/composables";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -18,15 +18,27 @@ defineOptions({
 const props = withDefaults(defineProps<Options & { downloadName?: string }>(), {
   downloadName: "mapVideo.mp4",
 });
+type Emits = CommonEvents & {
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  (e: "start", ...args: any): void;
+  (e: "stop", ...args: any): void;
+  (e: "pause", ...args: any): void;
+  (e: "result", ...args: any): void;
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
-const { control } = useControl(VideoRecorder, properties, attrs);
-
-useOpenLayersEvents(control, ["start", "stop", "pause", "resume"]);
+const { control } = useControl(VideoRecorder, properties, attrs, [
+  "start",
+  "stop",
+  "pause",
+  "resume",
+]);
 
 control.value.on(
-  // @ts-ignore
+  // @ts-expect-error because of wrong typings
   "stop",
   (event: ObjectEvent & { videoURL: string }) => {
     if (props.downloadName) {
diff --git a/src/components/mapControls/OlZoneControl.vue b/src/components/mapControls/OlZoneControl.vue
index decabdf5..890b228b 100644
--- a/src/components/mapControls/OlZoneControl.vue
+++ b/src/components/mapControls/OlZoneControl.vue
@@ -6,12 +6,11 @@ import MapZone, { type Options, type Zone } from "ol-ext/control/MapZone";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
 const props = withDefaults(
   defineProps<
-    Omit<Options, "zone"> & {
-      className?: string;
-      centerOnClick?: boolean;
+    Omit<Partial<Options>, "zone"> & {
       zones: Zone[];
     }
   >(),
@@ -21,11 +20,17 @@ const props = withDefaults(
     centerOnClick: true,
   },
 );
+type Emits = CommonEvents & {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: "select", ...args: any): void;
+};
+defineEmits<Emits>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
 
-const { control } = useControl(MapZone, properties, attrs);
+/* @ts-expect-error because of wrong typings (should be optional in options, but is not) */
+const { control } = useControl(MapZone, properties, attrs, ["select"]);
 
 defineExpose({
   control,
diff --git a/src/components/mapControls/OlZoomControl.vue b/src/components/mapControls/OlZoomControl.vue
index 1e84c78a..924f4290 100644
--- a/src/components/mapControls/OlZoomControl.vue
+++ b/src/components/mapControls/OlZoomControl.vue
@@ -6,18 +6,10 @@ import Zoom, { type Options } from "ol/control/Zoom";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(defineProps<Options>(), {
-  duration: 250,
-  className: "ol-zoom",
-  zoomInClassName: "ol-zoom-in",
-  zoomOutClassName: "ol-zoom-out",
-  zoomInLabel: "+",
-  zoomOutLabel: "-",
-  zoomInTipLabel: "Zoom in",
-  zoomOutTipLabel: "Zoom Out",
-  delta: 1,
-});
+const props = defineProps<Options>();
+defineEmits<CommonEvents>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
diff --git a/src/components/mapControls/OlZoomSliderControl.vue b/src/components/mapControls/OlZoomSliderControl.vue
index 64c5c737..3fd8fffe 100644
--- a/src/components/mapControls/OlZoomSliderControl.vue
+++ b/src/components/mapControls/OlZoomSliderControl.vue
@@ -2,22 +2,14 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import ZoomSlider from "ol/control/ZoomSlider";
+import ZoomSlider, { type Options } from "ol/control/ZoomSlider";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<{
-    duration?: number;
-    className?: string;
-    render?: (...args: unknown[]) => unknown;
-  }>(),
-  {
-    duration: 200,
-    className: "ol-zoomslider",
-  },
-);
+const props = defineProps<Options>();
+defineEmits<CommonEvents>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
diff --git a/src/components/mapControls/OlZoomToExtentControl.vue b/src/components/mapControls/OlZoomToExtentControl.vue
index 3fa58fd6..2a019bc8 100644
--- a/src/components/mapControls/OlZoomToExtentControl.vue
+++ b/src/components/mapControls/OlZoomToExtentControl.vue
@@ -2,26 +2,14 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import ZoomToExtent from "ol/control/ZoomToExtent";
+import ZoomToExtent, { type Options } from "ol/control/ZoomToExtent";
 import { useAttrs } from "vue";
-import type { Extent } from "ol/extent";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<{
-    className?: string;
-    target?: HTMLElement;
-    label?: string;
-    tipLabel?: string;
-    extent?: Extent;
-  }>(),
-  {
-    className: "ol-zoom-extent",
-    label: "E",
-    tipLabel: "Fit to extent",
-  },
-);
+const props = defineProps<Options>();
+defineEmits<CommonEvents>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
diff --git a/src/components/mapControls/OlZoomsliderControl.vue b/src/components/mapControls/OlZoomsliderControl.vue
index 64c5c737..3fd8fffe 100644
--- a/src/components/mapControls/OlZoomsliderControl.vue
+++ b/src/components/mapControls/OlZoomsliderControl.vue
@@ -2,22 +2,14 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import ZoomSlider from "ol/control/ZoomSlider";
+import ZoomSlider, { type Options } from "ol/control/ZoomSlider";
 import { useAttrs } from "vue";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<{
-    duration?: number;
-    className?: string;
-    render?: (...args: unknown[]) => unknown;
-  }>(),
-  {
-    duration: 200,
-    className: "ol-zoomslider",
-  },
-);
+const props = defineProps<Options>();
+defineEmits<CommonEvents>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
diff --git a/src/components/mapControls/OlZoomtoextentControl.vue b/src/components/mapControls/OlZoomtoextentControl.vue
index 3fa58fd6..2a019bc8 100644
--- a/src/components/mapControls/OlZoomtoextentControl.vue
+++ b/src/components/mapControls/OlZoomtoextentControl.vue
@@ -2,26 +2,14 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import ZoomToExtent from "ol/control/ZoomToExtent";
+import ZoomToExtent, { type Options } from "ol/control/ZoomToExtent";
 import { useAttrs } from "vue";
-import type { Extent } from "ol/extent";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { CommonEvents } from "@/composables";
 
-const props = withDefaults(
-  defineProps<{
-    className?: string;
-    target?: HTMLElement;
-    label?: string;
-    tipLabel?: string;
-    extent?: Extent;
-  }>(),
-  {
-    className: "ol-zoom-extent",
-    label: "E",
-    tipLabel: "Fit to extent",
-  },
-);
+const props = defineProps<Options>();
+defineEmits<CommonEvents>();
 
 const attrs = useAttrs();
 const properties = usePropsAsObjectProperties(props);
diff --git a/src/components/sources/OlSourceBingMaps.vue b/src/components/sources/OlSourceBingMaps.vue
index 1ca8494e..bf768bb9 100644
--- a/src/components/sources/OlSourceBingMaps.vue
+++ b/src/components/sources/OlSourceBingMaps.vue
@@ -7,7 +7,7 @@ import BingMaps, { type Options } from "ol/source/BingMaps";
 import type { Ref } from "vue";
 import { inject } from "vue";
 import type TileLayer from "ol/layer/Tile";
-import { IMAGE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -15,19 +15,19 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = defineProps<Omit<Options, "key"> & { apiKey: string }>();
+type Props = Omit<Options, "key"> & { apiKey: string };
+const props = withDefaults(defineProps<Props>(), {
+  interpolate: true,
+  wrapX: true,
+});
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<BingMaps>> | null>("tileLayer");
 
-const { source } = useSource(
-  BingMaps,
-  layer,
-  {
-    ...props,
-    key: props.apiKey,
-  },
-  IMAGE_SOURCE_EVENTS,
-);
+const { source } = useSource(BingMaps, layer, {
+  ...props,
+  key: props.apiKey,
+});
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceBingmaps.vue b/src/components/sources/OlSourceBingmaps.vue
index 1ca8494e..bf768bb9 100644
--- a/src/components/sources/OlSourceBingmaps.vue
+++ b/src/components/sources/OlSourceBingmaps.vue
@@ -7,7 +7,7 @@ import BingMaps, { type Options } from "ol/source/BingMaps";
 import type { Ref } from "vue";
 import { inject } from "vue";
 import type TileLayer from "ol/layer/Tile";
-import { IMAGE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -15,19 +15,19 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = defineProps<Omit<Options, "key"> & { apiKey: string }>();
+type Props = Omit<Options, "key"> & { apiKey: string };
+const props = withDefaults(defineProps<Props>(), {
+  interpolate: true,
+  wrapX: true,
+});
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<BingMaps>> | null>("tileLayer");
 
-const { source } = useSource(
-  BingMaps,
-  layer,
-  {
-    ...props,
-    key: props.apiKey,
-  },
-  IMAGE_SOURCE_EVENTS,
-);
+const { source } = useSource(BingMaps, layer, {
+  ...props,
+  key: props.apiKey,
+});
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceCluster.vue b/src/components/sources/OlSourceCluster.vue
index fe3352e1..a49d0cd4 100644
--- a/src/components/sources/OlSourceCluster.vue
+++ b/src/components/sources/OlSourceCluster.vue
@@ -8,10 +8,8 @@
 import Cluster, { type Options } from "ol/source/Cluster";
 import type { Ref } from "vue";
 import { inject, provide } from "vue";
-import type Geometry from "ol/geom/Geometry";
 import type Feature from "ol/Feature";
-import type Point from "ol/geom/Point";
-import { FEATURE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { VectorSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -19,16 +17,15 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<Options>(), {
-  distance: 20,
-  geometryFunction: (feature: Feature<Geometry>): Point =>
-    feature.getGeometry() as Point,
+const props = withDefaults(defineProps<Options<Feature>>(), {
   wrapX: true,
 });
+defineEmits<VectorSourceEvents>();
+console.log("cluster props", props);
 
-const layer = inject<Ref<Cluster> | null>("vectorLayer");
+const layer = inject<Ref<Cluster<Feature>> | null>("vectorLayer");
 
-const { source } = useSource(Cluster, layer, props, FEATURE_EVENTS);
+const { source } = useSource(Cluster, layer, props);
 
 provide("vectorLayer", source);
 
diff --git a/src/components/sources/OlSourceGeoTIFF.vue b/src/components/sources/OlSourceGeoTIFF.vue
index ccbddb0c..64eff5c0 100644
--- a/src/components/sources/OlSourceGeoTIFF.vue
+++ b/src/components/sources/OlSourceGeoTIFF.vue
@@ -6,7 +6,7 @@
 import GeoTIFF, { type Options } from "ol/source/GeoTIFF";
 import { inject, type Ref } from "vue";
 import type TileLayer from "ol/layer/Tile";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -14,11 +14,15 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = defineProps<Options>();
+const props = withDefaults(defineProps<Options>(), {
+  normalize: true,
+  interpolate: true,
+});
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<GeoTIFF>> | null>("tileLayer");
 
-const { source } = useSource(GeoTIFF, layer, props, TILE_SOURCE_EVENTS);
+const { source } = useSource(GeoTIFF, layer, props);
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceGeoTiff.vue b/src/components/sources/OlSourceGeoTiff.vue
index ccbddb0c..64eff5c0 100644
--- a/src/components/sources/OlSourceGeoTiff.vue
+++ b/src/components/sources/OlSourceGeoTiff.vue
@@ -6,7 +6,7 @@
 import GeoTIFF, { type Options } from "ol/source/GeoTIFF";
 import { inject, type Ref } from "vue";
 import type TileLayer from "ol/layer/Tile";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -14,11 +14,15 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = defineProps<Options>();
+const props = withDefaults(defineProps<Options>(), {
+  normalize: true,
+  interpolate: true,
+});
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<GeoTIFF>> | null>("tileLayer");
 
-const { source } = useSource(GeoTIFF, layer, props, TILE_SOURCE_EVENTS);
+const { source } = useSource(GeoTIFF, layer, props);
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceImageStatic.vue b/src/components/sources/OlSourceImageStatic.vue
index 966de962..3867e5cf 100644
--- a/src/components/sources/OlSourceImageStatic.vue
+++ b/src/components/sources/OlSourceImageStatic.vue
@@ -5,7 +5,7 @@
 import Static, { type Options } from "ol/source/ImageStatic";
 import { inject, type Ref } from "vue";
 import type ImageLayer from "ol/layer/Image";
-import { IMAGE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { ImageSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -16,10 +16,11 @@ defineOptions({
 const props = withDefaults(defineProps<Options>(), {
   interpolate: true,
 });
+defineEmits<ImageSourceEvents>();
 
 const layer = inject<Ref<ImageLayer<Static>> | null>("imageLayer");
 
-const { source } = useSource(Static, layer, props, IMAGE_SOURCE_EVENTS);
+const { source } = useSource(Static, layer, props);
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceImageWMS.vue b/src/components/sources/OlSourceImageWMS.vue
index f2e75091..28f3a452 100644
--- a/src/components/sources/OlSourceImageWMS.vue
+++ b/src/components/sources/OlSourceImageWMS.vue
@@ -5,7 +5,7 @@
 import ImageWMS, { type Options } from "ol/source/ImageWMS";
 import { inject, type Ref } from "vue";
 import type ImageLayer from "ol/layer/Image";
-import { IMAGE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { ImageSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -13,41 +13,31 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(
-  defineProps<
-    Options & {
-      layers: string | unknown[];
-      styles?: string | unknown[];
-      time?: string;
-    }
-  >(),
-  {
-    projection: "EPSG:3857",
-    reprojectionErrorThreshold: 0.5,
-    format: "image/png",
-    version: "1.3.0",
-    serverType: "mapserver",
-    styles: "",
-    ratio: 1,
-  },
-);
+type Props = Options & {
+  layers: string | unknown[];
+  styles?: string | unknown[];
+  time?: string;
+};
+const props = withDefaults(defineProps<Props>(), {
+  hidpi: true,
+  interpolate: true,
+  serverType: "mapserver",
+  styles: "",
+  ratio: 1,
+});
+defineEmits<ImageSourceEvents>();
 
 const layer = inject<Ref<ImageLayer<ImageWMS>> | null>("imageLayer");
 
-const { source } = useSource(
-  ImageWMS,
-  layer,
-  {
-    ...props,
-    params: {
-      ...props.params,
-      LAYERS: props.layers,
-      STYLES: props.styles,
-      TIME: props.time,
-    },
+const { source } = useSource(ImageWMS, layer, {
+  ...props,
+  params: {
+    ...props.params,
+    LAYERS: props.layers,
+    STYLES: props.styles,
+    TIME: props.time,
   },
-  IMAGE_SOURCE_EVENTS,
-);
+});
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceImageWms.vue b/src/components/sources/OlSourceImageWms.vue
index f2e75091..28f3a452 100644
--- a/src/components/sources/OlSourceImageWms.vue
+++ b/src/components/sources/OlSourceImageWms.vue
@@ -5,7 +5,7 @@
 import ImageWMS, { type Options } from "ol/source/ImageWMS";
 import { inject, type Ref } from "vue";
 import type ImageLayer from "ol/layer/Image";
-import { IMAGE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { ImageSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -13,41 +13,31 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(
-  defineProps<
-    Options & {
-      layers: string | unknown[];
-      styles?: string | unknown[];
-      time?: string;
-    }
-  >(),
-  {
-    projection: "EPSG:3857",
-    reprojectionErrorThreshold: 0.5,
-    format: "image/png",
-    version: "1.3.0",
-    serverType: "mapserver",
-    styles: "",
-    ratio: 1,
-  },
-);
+type Props = Options & {
+  layers: string | unknown[];
+  styles?: string | unknown[];
+  time?: string;
+};
+const props = withDefaults(defineProps<Props>(), {
+  hidpi: true,
+  interpolate: true,
+  serverType: "mapserver",
+  styles: "",
+  ratio: 1,
+});
+defineEmits<ImageSourceEvents>();
 
 const layer = inject<Ref<ImageLayer<ImageWMS>> | null>("imageLayer");
 
-const { source } = useSource(
-  ImageWMS,
-  layer,
-  {
-    ...props,
-    params: {
-      ...props.params,
-      LAYERS: props.layers,
-      STYLES: props.styles,
-      TIME: props.time,
-    },
+const { source } = useSource(ImageWMS, layer, {
+  ...props,
+  params: {
+    ...props.params,
+    LAYERS: props.layers,
+    STYLES: props.styles,
+    TIME: props.time,
   },
-  IMAGE_SOURCE_EVENTS,
-);
+});
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceOSM.vue b/src/components/sources/OlSourceOSM.vue
index ed90e37e..0a4006b7 100644
--- a/src/components/sources/OlSourceOSM.vue
+++ b/src/components/sources/OlSourceOSM.vue
@@ -6,7 +6,7 @@ import OSM, { type Options } from "ol/source/OSM";
 import type { Ref } from "vue";
 import { inject } from "vue";
 import type TileLayer from "ol/layer/Tile";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -15,19 +15,14 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<Options>(), {
-  crossOrigin: "anonymous",
   interpolate: true,
-  maxZoom: 19,
-  reprojectionErrorThreshold: 0.5,
-  transition: 250,
-  url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
   wrapX: true,
-  zDirection: 0,
 });
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<OSM>> | null>("tileLayer");
 
-const { source } = useSource(OSM, layer, props, TILE_SOURCE_EVENTS);
+const { source } = useSource(OSM, layer, props);
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceOsm.vue b/src/components/sources/OlSourceOsm.vue
index ed90e37e..0a4006b7 100644
--- a/src/components/sources/OlSourceOsm.vue
+++ b/src/components/sources/OlSourceOsm.vue
@@ -6,7 +6,7 @@ import OSM, { type Options } from "ol/source/OSM";
 import type { Ref } from "vue";
 import { inject } from "vue";
 import type TileLayer from "ol/layer/Tile";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -15,19 +15,14 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<Options>(), {
-  crossOrigin: "anonymous",
   interpolate: true,
-  maxZoom: 19,
-  reprojectionErrorThreshold: 0.5,
-  transition: 250,
-  url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
   wrapX: true,
-  zDirection: 0,
 });
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<OSM>> | null>("tileLayer");
 
-const { source } = useSource(OSM, layer, props, TILE_SOURCE_EVENTS);
+const { source } = useSource(OSM, layer, props);
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceStadiaMaps.vue b/src/components/sources/OlSourceStadiaMaps.vue
index f772799c..c3d41df8 100644
--- a/src/components/sources/OlSourceStadiaMaps.vue
+++ b/src/components/sources/OlSourceStadiaMaps.vue
@@ -6,7 +6,7 @@
 import StadiaMaps, { type Options } from "ol/source/StadiaMaps";
 import { inject, type Ref } from "vue";
 import type TileLayer from "ol/layer/Tile";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -16,22 +16,15 @@ defineOptions({
 
 const props = withDefaults(defineProps<Options>(), {
   interpolate: true,
-  styles: "",
-  hidpi: false,
-  reprojectionErrorThreshold: 0.5,
-  transition: 250,
-  zDirection: 0,
   wrapX: true,
 });
+defineEmits<TileSourceEvents>();
 
 // NOTE: Layers from Stadia Maps do not require an API key for localhost development or most production
 // web deployments. See https://docs.stadiamaps.com/authentication/ for details.
 const layer = inject<Ref<TileLayer<StadiaMaps>> | null>("tileLayer");
 
-const { source } = useSource(StadiaMaps, layer, props, [
-  ...TILE_SOURCE_EVENTS,
-  "removefeature",
-]);
+const { source } = useSource(StadiaMaps, layer, props);
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceTianditu.vue b/src/components/sources/OlSourceTianditu.vue
index 09ffba40..41544ab6 100644
--- a/src/components/sources/OlSourceTianditu.vue
+++ b/src/components/sources/OlSourceTianditu.vue
@@ -5,9 +5,9 @@
 import type { Ref } from "vue";
 import { inject } from "vue";
 import type TileLayer from "ol/layer/Tile";
-import { type Options, Tianditu } from "@/components/sources/TiandituClass";
+import Tianditu, { type Options } from "@/components/sources/TiandituClass";
 import type { ImageTile } from "ol";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -19,10 +19,8 @@ const props = withDefaults(defineProps<Options>(), {
   layerType: "img",
   isLabel: false,
   projection: "EPSG:3857",
-  hidpi: false,
   requestEncoding: "KVP",
   version: "1.0.0",
-  culture: "en-us",
   dimensions: () => ({}),
   maxZoom: 21,
   tileLoadFunction: (imageTile, src) => {
@@ -30,10 +28,11 @@ const props = withDefaults(defineProps<Options>(), {
   },
   wrapX: true,
 });
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<Tianditu>> | null>("tileLayer");
 
-const { source } = useSource(Tianditu, layer, props, TILE_SOURCE_EVENTS);
+const { source } = useSource(Tianditu, layer, props);
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceTileArcGISRest.vue b/src/components/sources/OlSourceTileArcGISRest.vue
index a52600ee..8df4c243 100644
--- a/src/components/sources/OlSourceTileArcGISRest.vue
+++ b/src/components/sources/OlSourceTileArcGISRest.vue
@@ -7,8 +7,7 @@ import TileArcGISRest, { type Options } from "ol/source/TileArcGISRest";
 import { computed, inject, type Ref } from "vue";
 import { createXYZ } from "ol/tilegrid";
 import type TileLayer from "ol/layer/Tile";
-import type ImageTile from "ol/ImageTile";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -16,22 +15,18 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<Options>(), {
+type Props = Options & { tileSize: number[] };
+const props = withDefaults(defineProps<Props>(), {
   interpolate: true,
-  hidpi: false,
-  projection: "EPSG:3857",
-  reprojectionErrorThreshold: 0.5,
-  tileLoadFunction: (imageTile, src) => {
-    ((imageTile as ImageTile).getImage() as HTMLImageElement).src = src;
-  },
-  wrapX: false,
+  hidpi: true,
+  wrapX: true,
   tileSize: () => [256, 256],
-  zDirection: 0,
 });
+defineEmits<TileSourceEvents>();
 
 const tileLayer = inject<Ref<TileLayer<TileArcGISRest>> | null>("tileLayer");
 
-const getTileGrid = computed(() => {
+const tileGrid = computed(() => {
   return (
     props.tileGrid ||
     createXYZ({
@@ -40,15 +35,10 @@ const getTileGrid = computed(() => {
   );
 });
 
-const { source } = useSource(
-  TileArcGISRest,
-  tileLayer,
-  {
-    ...props,
-    tileGrid: getTileGrid.value,
-  },
-  TILE_SOURCE_EVENTS,
-);
+const { source } = useSource(TileArcGISRest, tileLayer, {
+  ...props,
+  tileGrid: tileGrid.value,
+});
 
 defineExpose({
   tileLayer,
diff --git a/src/components/sources/OlSourceTileArcgisRest.vue b/src/components/sources/OlSourceTileArcgisRest.vue
index a52600ee..8df4c243 100644
--- a/src/components/sources/OlSourceTileArcgisRest.vue
+++ b/src/components/sources/OlSourceTileArcgisRest.vue
@@ -7,8 +7,7 @@ import TileArcGISRest, { type Options } from "ol/source/TileArcGISRest";
 import { computed, inject, type Ref } from "vue";
 import { createXYZ } from "ol/tilegrid";
 import type TileLayer from "ol/layer/Tile";
-import type ImageTile from "ol/ImageTile";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -16,22 +15,18 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<Options>(), {
+type Props = Options & { tileSize: number[] };
+const props = withDefaults(defineProps<Props>(), {
   interpolate: true,
-  hidpi: false,
-  projection: "EPSG:3857",
-  reprojectionErrorThreshold: 0.5,
-  tileLoadFunction: (imageTile, src) => {
-    ((imageTile as ImageTile).getImage() as HTMLImageElement).src = src;
-  },
-  wrapX: false,
+  hidpi: true,
+  wrapX: true,
   tileSize: () => [256, 256],
-  zDirection: 0,
 });
+defineEmits<TileSourceEvents>();
 
 const tileLayer = inject<Ref<TileLayer<TileArcGISRest>> | null>("tileLayer");
 
-const getTileGrid = computed(() => {
+const tileGrid = computed(() => {
   return (
     props.tileGrid ||
     createXYZ({
@@ -40,15 +35,10 @@ const getTileGrid = computed(() => {
   );
 });
 
-const { source } = useSource(
-  TileArcGISRest,
-  tileLayer,
-  {
-    ...props,
-    tileGrid: getTileGrid.value,
-  },
-  TILE_SOURCE_EVENTS,
-);
+const { source } = useSource(TileArcGISRest, tileLayer, {
+  ...props,
+  tileGrid: tileGrid.value,
+});
 
 defineExpose({
   tileLayer,
diff --git a/src/components/sources/OlSourceTileDebug.vue b/src/components/sources/OlSourceTileDebug.vue
index 7b85922b..60f6ca29 100644
--- a/src/components/sources/OlSourceTileDebug.vue
+++ b/src/components/sources/OlSourceTileDebug.vue
@@ -7,21 +7,19 @@ import TileDebug, { type Options } from "ol/source/TileDebug";
 import { inject, type Ref } from "vue";
 import type TileLayer from "ol/layer/Tile";
 import useSource from "@/composables/useSource";
+import type { TileSourceEvents } from "@/composables";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<Options>(), {});
+const props = withDefaults(defineProps<Options>(), { wrapX: true });
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<TileDebug>> | null>("tileLayer");
 
-const { source } = useSource(TileDebug, layer, props, [
-  "tileloadend",
-  "tileloadstart",
-  "tileloaderror",
-]);
+const { source } = useSource(TileDebug, layer, props);
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceTileJSON.vue b/src/components/sources/OlSourceTileJSON.vue
index f06f9bd5..04a338c5 100644
--- a/src/components/sources/OlSourceTileJSON.vue
+++ b/src/components/sources/OlSourceTileJSON.vue
@@ -7,6 +7,7 @@ import TileJSON, { type Options } from "ol/source/TileJSON";
 import { inject, type Ref } from "vue";
 import type TileLayer from "ol/layer/Tile";
 import useSource from "@/composables/useSource";
+import type { TileSourceEvents } from "@/composables";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -15,21 +16,13 @@ defineOptions({
 
 const props = withDefaults(defineProps<Options>(), {
   interpolate: true,
-  jsonp: false,
-  styles: "",
-  reprojectionErrorThreshold: 0.5,
-  zDirection: 0,
   wrapX: true,
 });
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<TileJSON>> | null>("tileLayer");
 
-const { source } = useSource(TileJSON, layer, props, [
-  "removefeature",
-  "tileloadend",
-  "tileloadstart",
-  "tileloaderror",
-]);
+const { source } = useSource(TileJSON, layer, props);
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceTileJson.vue b/src/components/sources/OlSourceTileJson.vue
index f06f9bd5..04a338c5 100644
--- a/src/components/sources/OlSourceTileJson.vue
+++ b/src/components/sources/OlSourceTileJson.vue
@@ -7,6 +7,7 @@ import TileJSON, { type Options } from "ol/source/TileJSON";
 import { inject, type Ref } from "vue";
 import type TileLayer from "ol/layer/Tile";
 import useSource from "@/composables/useSource";
+import type { TileSourceEvents } from "@/composables";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -15,21 +16,13 @@ defineOptions({
 
 const props = withDefaults(defineProps<Options>(), {
   interpolate: true,
-  jsonp: false,
-  styles: "",
-  reprojectionErrorThreshold: 0.5,
-  zDirection: 0,
   wrapX: true,
 });
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<TileJSON>> | null>("tileLayer");
 
-const { source } = useSource(TileJSON, layer, props, [
-  "removefeature",
-  "tileloadend",
-  "tileloadstart",
-  "tileloaderror",
-]);
+const { source } = useSource(TileJSON, layer, props);
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceTileWMS.vue b/src/components/sources/OlSourceTileWMS.vue
index def87072..fc3ef1f6 100644
--- a/src/components/sources/OlSourceTileWMS.vue
+++ b/src/components/sources/OlSourceTileWMS.vue
@@ -6,9 +6,7 @@
 import TileWMS, { type Options } from "ol/source/TileWMS";
 import { inject, type Ref } from "vue";
 import type TileLayer from "ol/layer/Tile";
-import type { ImageTile } from "ol";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
-import type { TileGrid } from "ol/tilegrid";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -16,44 +14,31 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(
-  defineProps<
-    Options & {
-      layers: string | unknown[];
-      styles?: string | unknown[];
-    }
-  >(),
-  {
-    attributionsCollapsible: true,
-    interpolate: true,
-    styles: "",
-    gutter: 0,
-    hidpi: true,
-    projection: "EPSG:3857",
-    reprojectionErrorThreshold: 0.5,
-    tileLoadFunction: (imageTile, src) => {
-      ((imageTile as ImageTile).getImage() as HTMLImageElement).src = src;
-    },
-    wrapX: true,
-  },
-);
+type Props = Options & {
+  layers: string | unknown[];
+  styles?: string | unknown[];
+};
+const props = withDefaults(defineProps<Props>(), {
+  attributionsCollapsible: true,
+  interpolate: true,
+  hidpi: true,
+  wrapX: true,
+  styles: "",
+  projection: "EPSG:3857",
+});
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<TileWMS>> | null>("tileLayer");
 
-const { source } = useSource(
-  TileWMS,
-  layer,
-  {
-    ...props,
-    params: {
-      ...props.params,
-      LAYERS: props.layers,
-      STYLES: props.styles,
-    },
-    tileGrid: props.tileGrid as TileGrid | undefined,
+const { source } = useSource(TileWMS, layer, {
+  ...props,
+  params: {
+    ...props.params,
+    LAYERS: props.layers,
+    STYLES: props.styles,
   },
-  TILE_SOURCE_EVENTS,
-);
+  tileGrid: props.tileGrid,
+});
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceTileWms.vue b/src/components/sources/OlSourceTileWms.vue
index def87072..fc3ef1f6 100644
--- a/src/components/sources/OlSourceTileWms.vue
+++ b/src/components/sources/OlSourceTileWms.vue
@@ -6,9 +6,7 @@
 import TileWMS, { type Options } from "ol/source/TileWMS";
 import { inject, type Ref } from "vue";
 import type TileLayer from "ol/layer/Tile";
-import type { ImageTile } from "ol";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
-import type { TileGrid } from "ol/tilegrid";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -16,44 +14,31 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(
-  defineProps<
-    Options & {
-      layers: string | unknown[];
-      styles?: string | unknown[];
-    }
-  >(),
-  {
-    attributionsCollapsible: true,
-    interpolate: true,
-    styles: "",
-    gutter: 0,
-    hidpi: true,
-    projection: "EPSG:3857",
-    reprojectionErrorThreshold: 0.5,
-    tileLoadFunction: (imageTile, src) => {
-      ((imageTile as ImageTile).getImage() as HTMLImageElement).src = src;
-    },
-    wrapX: true,
-  },
-);
+type Props = Options & {
+  layers: string | unknown[];
+  styles?: string | unknown[];
+};
+const props = withDefaults(defineProps<Props>(), {
+  attributionsCollapsible: true,
+  interpolate: true,
+  hidpi: true,
+  wrapX: true,
+  styles: "",
+  projection: "EPSG:3857",
+});
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<TileWMS>> | null>("tileLayer");
 
-const { source } = useSource(
-  TileWMS,
-  layer,
-  {
-    ...props,
-    params: {
-      ...props.params,
-      LAYERS: props.layers,
-      STYLES: props.styles,
-    },
-    tileGrid: props.tileGrid as TileGrid | undefined,
+const { source } = useSource(TileWMS, layer, {
+  ...props,
+  params: {
+    ...props.params,
+    LAYERS: props.layers,
+    STYLES: props.styles,
   },
-  TILE_SOURCE_EVENTS,
-);
+  tileGrid: props.tileGrid,
+});
 
 defineExpose({
   layer,
diff --git a/src/components/sources/OlSourceVector.vue b/src/components/sources/OlSourceVector.vue
index 63096fda..8dedd7f3 100644
--- a/src/components/sources/OlSourceVector.vue
+++ b/src/components/sources/OlSourceVector.vue
@@ -11,23 +11,24 @@ import type HeatmapLayer from "ol/layer/Heatmap";
 import type { WebGLVectorLayer } from "../layers/WebGLVectorLayerClass";
 import type { Ref } from "vue";
 import { inject, provide, watch } from "vue";
-import type Geometry from "ol/geom/Geometry";
-import { FEATURE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { VectorSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
+import type Feature from "ol/Feature";
+import { Collection } from "ol";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<Options<Geometry>>(), {
+const props = withDefaults(defineProps<Options<Feature>>(), {
   overlaps: true,
-  projection: "EPSG:3857",
   useSpatialIndex: true,
   wrapX: true,
 });
+defineEmits<VectorSourceEvents>();
 
-const vectorLayer = inject<Ref<VectorLayer<VectorSource<Geometry>>> | null>(
+const vectorLayer = inject<Ref<VectorLayer<VectorSource<Feature>>> | null>(
   "vectorLayer",
   null,
 );
@@ -38,12 +39,7 @@ const webglVectorLayer = inject<Ref<WebGLVectorLayer> | null>(
 );
 const layer = heatmapLayer || vectorLayer || webglVectorLayer;
 
-const { source, updateSource } = useSource(
-  VectorSource,
-  layer,
-  props,
-  FEATURE_EVENTS,
-);
+const { source, updateSource } = useSource(VectorSource, layer, props);
 
 watch(
   () => props.features,
@@ -51,7 +47,11 @@ watch(
     if (updatedFeatures !== oldFeatures) {
       source.value.clear();
       if (updatedFeatures) {
-        source.value.addFeatures(updatedFeatures);
+        const featureArray =
+          updatedFeatures instanceof Collection
+            ? updatedFeatures.getArray()
+            : updatedFeatures;
+        source.value.addFeatures(featureArray);
       }
     }
     updateSource();
diff --git a/src/components/sources/OlSourceVectorTile.vue b/src/components/sources/OlSourceVectorTile.vue
index fa84d99f..286df929 100644
--- a/src/components/sources/OlSourceVectorTile.vue
+++ b/src/components/sources/OlSourceVectorTile.vue
@@ -9,7 +9,7 @@ import VectorTileSource, { type Options } from "ol/source/VectorTile";
 import type VectorTileLayer from "ol/layer/VectorTile";
 import type { Ref } from "vue";
 import { inject, provide } from "vue";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -18,22 +18,18 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<Options>(), {
+  attributionsCollapsible: true,
   overlaps: true,
-  projection: "EPSG:3857",
   wrapX: true,
 });
+defineEmits<TileSourceEvents>();
 
 const vectorTileLayer = inject<Ref<VectorTileLayer> | null>(
   "vectorTileLayer",
   null,
 );
 
-const { source } = useSource(
-  VectorTileSource,
-  vectorTileLayer,
-  props,
-  TILE_SOURCE_EVENTS,
-);
+const { source } = useSource(VectorTileSource, vectorTileLayer, props);
 
 provide("vectorSource", source);
 
diff --git a/src/components/sources/OlSourceWmts.vue b/src/components/sources/OlSourceWmts.vue
index 2454607d..1b0aa4d7 100644
--- a/src/components/sources/OlSourceWmts.vue
+++ b/src/components/sources/OlSourceWmts.vue
@@ -13,7 +13,7 @@ import { computed, inject } from "vue";
 import type TileSource from "ol/source/Tile";
 import type TileLayer from "ol/layer/Tile";
 import type { Coordinate } from "ol/coordinate";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
+import type { TileSourceEvents } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -21,28 +21,19 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(
-  defineProps<
-    Omit<Options, "style"> & {
-      styles?: string | unknown[];
-      tileZoomLevel?: number;
-      tileMatrixPrefix?: string;
-      tileGrid?: WMTSTileGrid;
-    }
-  >(),
-  {
-    attributionsCollapsible: true,
-    tileZoomLevel: 30,
-    projection: "EPSG:3857",
-    reprojectionErrorThreshold: 0.5,
-    tilePixelRatio: 1,
-    format: "image/jpeg",
-    version: "1.0.0",
-    requestEncoding: "KVP",
-    wrapX: false,
-    tileMatrixPrefix: "",
-  },
-);
+type Props = Omit<Options, "style" | "tileGrid"> & {
+  tileGrid?: WMTSTileGrid;
+  styles?: string | unknown[];
+  tileZoomLevel?: number;
+  tileMatrixPrefix?: string;
+};
+const props = withDefaults(defineProps<Props>(), {
+  attributionsCollapsible: true,
+  interpolate: true,
+  tileZoomLevel: 30,
+  tileMatrixPrefix: "",
+});
+defineEmits<TileSourceEvents>();
 
 const tileLayer = inject<Ref<TileLayer<TileSource>> | null>("tileLayer");
 
@@ -56,7 +47,7 @@ const size = computed(() => {
   return extent.value ? getWidth(extent.value) / 256 : 0;
 });
 
-const getTileGrid = computed(() => {
+const tileGrid = computed(() => {
   if (props.tileGrid) {
     return props.tileGrid;
   }
@@ -76,15 +67,11 @@ const getTileGrid = computed(() => {
   });
 });
 
-const { source } = useSource(
-  WMTS,
-  tileLayer,
-  {
-    ...props,
-    tileGrid: getTileGrid.value,
-  },
-  TILE_SOURCE_EVENTS,
-);
+const { source } = useSource(WMTS, tileLayer, {
+  ...props,
+  style: props.styles,
+  tileGrid: tileGrid.value,
+});
 
 defineExpose({
   tileLayer,
diff --git a/src/components/sources/OlSourceXYZ.vue b/src/components/sources/OlSourceXYZ.vue
index 45301448..0a3cbb3d 100644
--- a/src/components/sources/OlSourceXYZ.vue
+++ b/src/components/sources/OlSourceXYZ.vue
@@ -6,9 +6,8 @@ import XYZ, { type Options } from "ol/source/XYZ";
 import { type Ref, watch } from "vue";
 import { inject } from "vue";
 import type TileLayer from "ol/layer/Tile";
-import type { ImageTile } from "ol";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
+import type { TileSourceEvents } from "@/composables";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -18,34 +17,17 @@ defineOptions({
 const props = withDefaults(defineProps<Options>(), {
   attributionsCollapsible: true,
   interpolate: true,
-  maxZoom: 42,
-  minZoom: 0,
-  projection: "EPSG:3857",
-  reprojectionErrorThreshold: 0.5,
-  tileSize: () => [256, 256],
-  tilePixelRatio: 1,
-  gutter: 0,
-  tileLoadFunction: (imageTile, src) => {
-    ((imageTile as ImageTile).getImage() as HTMLImageElement).src = src;
-  },
   wrapX: true,
-  transition: 250,
-  zDirection: 0,
 });
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<XYZ>> | null>("tileLayer");
 
-const { source, updateSource } = useSource(
-  XYZ,
-  layer,
-  props,
-  TILE_SOURCE_EVENTS,
-  (source) => {
-    if (props.url) {
-      source.setUrl(props.url);
-    }
-  },
-);
+const { source, updateSource } = useSource(XYZ, layer, props, [], (source) => {
+  if (props.url) {
+    source.setUrl(props.url);
+  }
+});
 
 watch(
   () => props.url,
diff --git a/src/components/sources/OlSourceXyz.vue b/src/components/sources/OlSourceXyz.vue
index 45301448..0a3cbb3d 100644
--- a/src/components/sources/OlSourceXyz.vue
+++ b/src/components/sources/OlSourceXyz.vue
@@ -6,9 +6,8 @@ import XYZ, { type Options } from "ol/source/XYZ";
 import { type Ref, watch } from "vue";
 import { inject } from "vue";
 import type TileLayer from "ol/layer/Tile";
-import type { ImageTile } from "ol";
-import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
+import type { TileSourceEvents } from "@/composables";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -18,34 +17,17 @@ defineOptions({
 const props = withDefaults(defineProps<Options>(), {
   attributionsCollapsible: true,
   interpolate: true,
-  maxZoom: 42,
-  minZoom: 0,
-  projection: "EPSG:3857",
-  reprojectionErrorThreshold: 0.5,
-  tileSize: () => [256, 256],
-  tilePixelRatio: 1,
-  gutter: 0,
-  tileLoadFunction: (imageTile, src) => {
-    ((imageTile as ImageTile).getImage() as HTMLImageElement).src = src;
-  },
   wrapX: true,
-  transition: 250,
-  zDirection: 0,
 });
+defineEmits<TileSourceEvents>();
 
 const layer = inject<Ref<TileLayer<XYZ>> | null>("tileLayer");
 
-const { source, updateSource } = useSource(
-  XYZ,
-  layer,
-  props,
-  TILE_SOURCE_EVENTS,
-  (source) => {
-    if (props.url) {
-      source.setUrl(props.url);
-    }
-  },
-);
+const { source, updateSource } = useSource(XYZ, layer, props, [], (source) => {
+  if (props.url) {
+    source.setUrl(props.url);
+  }
+});
 
 watch(
   () => props.url,
diff --git a/src/components/sources/TiandituClass.ts b/src/components/sources/TiandituClass.ts
index 38851488..2aedc87e 100644
--- a/src/components/sources/TiandituClass.ts
+++ b/src/components/sources/TiandituClass.ts
@@ -3,14 +3,14 @@ import type { ProjectionLike } from "ol/proj";
 import WMTSSource, { type Options as WMTSOptions } from "ol/source/WMTS";
 import TileGridWMTS from "ol/tilegrid/WMTS";
 
-export type Options = WMTSOptions & {
+export type Options = Partial<WMTSOptions> & {
   tileProxy?: string;
   layerType?: string;
   tk?: string;
   isLabel?: boolean;
   maxZoom?: number;
 };
-export class Tianditu extends WMTSSource {
+export default class Tianditu extends WMTSSource {
   static layerLabelMap: Record<string, string> = {};
   static layerZoomMap: Record<string, number> = {};
   static tileProxy: string | undefined;
@@ -26,7 +26,7 @@ export class Tianditu extends WMTSSource {
       ter: 14,
       img: 18,
     };
-    const options = { ...opts } || {};
+    const options = { ...opts };
 
     options.layerType = options.layerType || "vec";
     options.layerType = options.isLabel
@@ -75,7 +75,7 @@ export class Tianditu extends WMTSSource {
           Tianditu.tileProxy + encodeURIComponent(src);
       };
     }
-    super(superOptions);
+    super(superOptions as Required<Options>);
   }
 
   static getTileGrid(projection: ProjectionLike) {
diff --git a/src/components/styles/OlStyleCircle.vue b/src/components/styles/OlStyleCircle.vue
index 51219b84..df042367 100644
--- a/src/components/styles/OlStyleCircle.vue
+++ b/src/components/styles/OlStyleCircle.vue
@@ -5,25 +5,21 @@
 </template>
 
 <script setup lang="ts">
-import type { Options } from "ol/style/Circle";
-import CircleStyle from "ol/style/Circle";
+import CircleStyle, { type Options } from "ol/style/Circle";
 import Fill from "ol/style/Fill";
 import Stroke from "ol/style/Stroke";
-
 import { type Ref } from "vue";
 import { inject, watch, onMounted, onUnmounted, provide, computed } from "vue";
 import type Draw from "ol/interaction/Draw";
 import type Modify from "ol/interaction/Modify";
 import type Style from "ol/style/Style";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import { Interaction } from "ol/interaction";
 
-const props = withDefaults(
-  defineProps<{
-    radius: number;
-    scale?: number;
-  }>(),
-  {},
-);
+const props = defineProps<{
+  radius: number;
+  scale?: number;
+}>();
 
 const style = inject<Ref<Style | null> | null>("style", null);
 const styledObj = inject<Ref<Draw | Modify | Style | null> | null>(
@@ -46,29 +42,21 @@ const createCircleStyle = (
 const circle = computed(() => createCircleStyle(properties));
 
 const applyStyle = () => {
-  // @ts-ignore
-  style?.value?.setImage(null);
   style?.value?.setImage(circle.value);
-  // @ts-ignore
-  styledObj?.value?.changed();
+  if (styledObj?.value instanceof Interaction) {
+    styledObj.value.changed();
+  }
 };
-watch(properties, () => {
-  applyStyle();
-});
+watch(properties, () => applyStyle());
 
 watch(
   () => style,
-  () => {
-    applyStyle();
-  },
+  () => applyStyle(),
 );
 
-onMounted(() => {
-  applyStyle();
-});
-
+onMounted(() => applyStyle());
 onUnmounted(() => {
-  // @ts-ignore
+  // @ts-expect-error as officially it's not allowed, but no other way to unset
   style?.value?.setImage(null);
 });
 
diff --git a/src/components/styles/OlStyleFill.vue b/src/components/styles/OlStyleFill.vue
index c769711e..d2a33f35 100644
--- a/src/components/styles/OlStyleFill.vue
+++ b/src/components/styles/OlStyleFill.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { type Ref, inject, watch, onMounted, onUnmounted, ref } from "vue";
-import Fill from "ol/style/Fill";
+import Fill, { type Options } from "ol/style/Fill";
 import type CircleStyle from "ol/style/Circle";
 import type Style from "ol/style/Style";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
@@ -47,15 +47,12 @@ export type ConicGradient = {
 export type Gradient = LinearGradient | RadialGradient | ConicGradient;
 
 // Define the props type for the component
-const props = defineProps<{
-  color?: string;
-  gradient?: Gradient;
-}>();
+const props = defineProps<Options & { gradient?: Gradient }>();
+type ColorProp = typeof props.color;
 
 // Inject possible nullable Ref objects from the parent component
 const style = inject<Ref<Style | null>>("style", ref(null));
 const circle = inject<Ref<CircleStyle | null>>("circle", ref(null));
-const styledObj = inject<Ref<Style | null>>("styledObj", ref(null));
 
 // Use a custom composable to convert props into an object
 const properties = usePropsAsObjectProperties(props);
@@ -115,7 +112,12 @@ const createGradientFill = (
 
     ctx.fillStyle = grad;
   } else {
-    ctx.fillStyle = properties.color ?? "transparent";
+    if (typeof properties.color === "string") {
+      ctx.fillStyle = properties.color ?? "transparent";
+    } else {
+      // TODO: other types?
+      ctx.fillStyle = "transparent";
+    }
   }
 
   ctx.fillRect(0, 0, width, height);
@@ -140,18 +142,10 @@ const applyFillToStyle = () => {
 };
 
 // Function to apply fill style to a CircleStyle object
-const applyFillToCircle = (color?: string) => {
+const applyFillToCircle = (color?: ColorProp) => {
   if (circle.value) {
-    // @ts-ignore
-    circle?.value?.getFill().setColor(color || null);
+    circle?.value?.getFill()?.setColor(color || null);
     circle?.value?.setRadius(circle?.value.getRadius()); // force render
-    try {
-      // @ts-ignore
-      styledObj?.value?.changed();
-    } catch (error) {
-      // @ts-ignore
-      styledObj?.value.changed();
-    }
   }
 };
 
diff --git a/src/components/styles/OlStyleFlowline.vue b/src/components/styles/OlStyleFlowline.vue
index 694e962f..59a2a84b 100644
--- a/src/components/styles/OlStyleFlowline.vue
+++ b/src/components/styles/OlStyleFlowline.vue
@@ -11,28 +11,19 @@ import { inject, watch, onUnmounted, onMounted, computed } from "vue";
 import FlowLine, { type Options } from "ol-ext/style/FlowLine";
 import Draw from "ol/interaction/Draw";
 import Modify from "ol/interaction/Modify";
-import type Feature from "ol/Feature";
+import Feature from "ol/Feature";
 import Style from "ol/style/Style";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import type { StyleLike } from "ol/style/Style";
 import type { FlatStyleLike } from "ol/style/flat";
 import type { OverrideStyleFunction } from ".";
 import type { Layer } from "ol/layer";
-import type { Select } from "ol/interaction";
+import { type Select } from "ol/interaction";
 
-const props = withDefaults(
-  defineProps<
-    Options & {
-      lineCap?: CanvasLineCap;
-      overrideStyleFunction?: OverrideStyleFunction;
-    }
-  >(),
-  {
-    visible: true,
-    lineCap: "butt",
-    arrowSize: 16,
-  },
-);
+type Props = Partial<Options> & {
+  overrideStyleFunction?: OverrideStyleFunction;
+};
+const props = withDefaults(defineProps<Props>(), { lineCap: "butt" });
 
 const styledObj = inject<Ref<Draw | Modify | Select | Feature | Layer> | null>(
   "stylable",
@@ -53,18 +44,19 @@ const setStyle = (val: StyleLike | FlatStyleLike) => {
     return;
   }
   try {
-    // @ts-ignore
-    styledObj.value.setStyle(val);
+    if (styledObj.value instanceof Feature) {
+      styledObj.value.setStyle(val as StyleLike);
+    }
     styledObj.value.changed();
-    styledObj?.value?.dispatchEvent("styleChanged");
+    styledObj.value.dispatchEvent("styleChanged");
   } catch (error) {
     if (styledObj?.value) {
-      // @ts-ignore
+      // @ts-expect-error - we're forcing stuff here
       styledObj.value.style_ = val;
-      // @ts-ignore
+      // @ts-expect-error - we're forcing stuff here
       styledObj.value.values_.style = val;
-      styledObj.value?.changed();
-      styledObj.value?.dispatchEvent("styleChanged");
+      styledObj.value.changed();
+      styledObj.value.dispatchEvent("styleChanged");
     }
   }
 };
@@ -78,17 +70,15 @@ const styleFunc = computed<StyleLike>(() => {
   };
 });
 
-watch(properties, () => {
-  setStyle(properties.overrideStyleFunction ? styleFunc.value : style.value);
-});
+watch(properties, () =>
+  setStyle(properties.overrideStyleFunction ? styleFunc.value : style.value),
+);
 
-onMounted(() => {
-  setStyle(properties.overrideStyleFunction ? styleFunc.value : style.value);
-});
+onMounted(() =>
+  setStyle(properties.overrideStyleFunction ? styleFunc.value : style.value),
+);
 
-onUnmounted(() => {
-  setStyle(new Style());
-});
+onUnmounted(() => setStyle(new Style()));
 
 defineExpose({
   style,
diff --git a/src/components/styles/OlStyleIcon.vue b/src/components/styles/OlStyleIcon.vue
index 1ed118db..ca68b4ec 100644
--- a/src/components/styles/OlStyleIcon.vue
+++ b/src/components/styles/OlStyleIcon.vue
@@ -4,7 +4,7 @@
     v-if="!srcImageUrl"
     style="display: flex; position: absolute; z-index: -1000"
   >
-    <slot />
+    <slot></slot>
   </div>
 </template>
 <script setup lang="ts">
@@ -24,17 +24,9 @@ import type Draw from "ol/interaction/Draw";
 import type Modify from "ol/interaction/Modify";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import domtoimage from "dom-to-image-more";
+import { Interaction } from "ol/interaction";
 
-const props = withDefaults(defineProps<Options>(), {
-  anchorOrigin: "top-left",
-  anchorXUnits: "fraction",
-  offset: () => [0, 0],
-  displacement: () => [0, 0],
-  offsetOrigin: "top-left",
-  opacity: 1,
-  rotateWithView: false,
-  rotation: 0,
-});
+const props = defineProps<Options>();
 
 const slots = useSlots();
 
@@ -59,20 +51,17 @@ const icon = computed(() => {
 });
 
 const applyStyle = () => {
-  // @ts-ignore
-  style?.value?.setImage(null);
   style?.value?.setImage(icon.value);
-  // @ts-ignore
-  styledObj?.value?.changed();
+  if (styledObj?.value instanceof Interaction) {
+    styledObj?.value?.changed();
+  }
 };
 
-watch(properties, () => {
-  applyStyle();
-});
-
-watch(style, () => {
-  applyStyle();
-});
+watch(properties, () => applyStyle());
+watch(
+  () => style,
+  () => applyStyle(),
+);
 
 onMounted(async () => {
   if (slots.default && htmlContent.value) {
@@ -86,7 +75,7 @@ onMounted(async () => {
 });
 
 onUnmounted(() => {
-  // @ts-ignore
+  // @ts-expect-error force it
   style?.value?.setImage(null);
 });
 </script>
diff --git a/src/components/styles/OlStyleStroke.vue b/src/components/styles/OlStyleStroke.vue
index e8b03862..20dbc15a 100644
--- a/src/components/styles/OlStyleStroke.vue
+++ b/src/components/styles/OlStyleStroke.vue
@@ -2,36 +2,19 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import type { Options } from "ol/style/Stroke";
-import Stroke from "ol/style/Stroke";
+import Stroke, { type Options } from "ol/style/Stroke";
 import type { Ref } from "vue";
 import { inject, watch, onMounted, onUnmounted } from "vue";
 import type Style from "ol/style/Style";
 import type CircleStyle from "ol/style/Circle";
 import type Draw from "ol/interaction/Draw";
 import type Modify from "ol/interaction/Modify";
-import type { ColorLike } from "ol/colorlike";
-import type { Color } from "ol/color";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import { Interaction } from "ol/interaction";
 
-const props = withDefaults(
-  defineProps<{
-    color?: Color | ColorLike;
-    lineCap?: CanvasLineCap;
-    lineJoin?: CanvasLineJoin;
-    lineDash?: number[];
-    lineDashOffset?: number;
-    miterLimit?: number;
-    width?: number;
-  }>(),
-  {
-    lineCap: "round",
-    lineJoin: "round",
-    lineDashOffset: 0,
-    miterLimit: 10,
-    width: 1,
-  },
-);
+const props = withDefaults(defineProps<Options>(), {
+  width: 1,
+});
 
 const style = inject<Ref<Style | null> | null>("style", null);
 const styledObj = inject<Ref<Draw | Modify | Style | null> | null>(
@@ -81,12 +64,8 @@ if (style != null && circle == null) {
     circle?.value?.getStroke()?.setWidth(innerProperties.width);
 
     circle?.value?.setRadius(circle?.value?.getRadius());
-    try {
-      // @ts-ignore
-      styledObj?.value?.changed();
-    } catch (error) {
-      // @ts-ignore
-      styledObj?.value?.changed();
+    if (styledObj?.value instanceof Interaction) {
+      styledObj.value.changed();
     }
   };
 
diff --git a/src/components/styles/OlStyleText.vue b/src/components/styles/OlStyleText.vue
index 1801740c..494b8e81 100644
--- a/src/components/styles/OlStyleText.vue
+++ b/src/components/styles/OlStyleText.vue
@@ -5,11 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import type { Options, TextPlacement } from "ol/style/Text";
-import Text from "ol/style/Text";
+import Text, { type Options, type TextPlacement } from "ol/style/Text";
 import Fill from "ol/style/Fill";
 import Stroke, { type Options as StrokeOptions } from "ol/style/Stroke";
-
 import type { Ref } from "vue";
 import { inject, watch, onMounted, onUnmounted, provide, computed } from "vue";
 import type Style from "ol/style/Style";
@@ -18,39 +16,27 @@ import type Modify from "ol/interaction/Modify";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import type { Color } from "ol/color";
 import type { ColorLike } from "ol/colorlike";
+import { Interaction } from "ol/interaction";
 
-const props = withDefaults(
-  defineProps<{
-    font?: string;
-    maxAngle?: number;
-    offsetX?: number;
-    offsetY?: number;
-    overflow?: boolean;
-    placement?: TextPlacement;
-    scale?: number;
-    rotateWithView?: boolean;
-    rotation?: number;
-    text?: string;
-    textAlign?: CanvasTextAlign;
-    textBaseline?: CanvasTextBaseline;
-    padding?: [number, number, number, number];
-    fill?: Color | ColorLike;
-    stroke?: StrokeOptions;
-    backgroundFill?: Color | ColorLike;
-    backgroundStroke?: StrokeOptions;
-  }>(),
-  {
-    maxAngle: Math.PI / 4,
-    offsetX: 0,
-    offsetY: 0,
-    overflow: false,
-    placement: "point",
-    rotateWithView: false,
-    rotation: 0,
-    textBaseline: "middle",
-    padding: () => [0, 0, 0, 0],
-  },
-);
+const props = defineProps<{
+  font?: string;
+  maxAngle?: number;
+  offsetX?: number;
+  offsetY?: number;
+  overflow?: boolean;
+  placement?: TextPlacement;
+  scale?: number;
+  rotateWithView?: boolean;
+  rotation?: number;
+  text?: string;
+  textAlign?: CanvasTextAlign;
+  textBaseline?: CanvasTextBaseline;
+  padding?: [number, number, number, number];
+  fill?: Color | ColorLike;
+  stroke?: StrokeOptions;
+  backgroundFill?: Color | ColorLike;
+  backgroundStroke?: StrokeOptions;
+}>();
 
 const style = inject<Ref<Style | null> | null>("style", null);
 const styledObj = inject<Ref<Draw | Modify | Style | null> | null>(
@@ -88,27 +74,18 @@ const textContent = computed(() => createText(properties));
 const applyStyle = () => {
   style?.value?.setText(new Text());
   style?.value?.setText(textContent.value);
-  // @ts-ignore
-  styledObj?.value?.changed();
+  if (styledObj?.value instanceof Interaction) {
+    styledObj.value.changed();
+  }
 };
-watch(properties, () => {
-  applyStyle();
-});
-
+watch(properties, () => applyStyle());
 watch(
   () => style?.value,
-  () => {
-    applyStyle();
-  },
+  () => applyStyle(),
 );
 
-onMounted(() => {
-  style?.value?.setText(textContent.value);
-});
-
-onUnmounted(() => {
-  style?.value?.setText(new Text());
-});
+onMounted(() => style?.value?.setText(textContent.value));
+onUnmounted(() => style?.value?.setText(new Text()));
 
 provide("style", textContent);
 provide("styledObj", styledObj);
diff --git a/src/composables/useControl.ts b/src/composables/useControl.ts
index 5a7ac51b..2d9f0347 100644
--- a/src/composables/useControl.ts
+++ b/src/composables/useControl.ts
@@ -41,6 +41,7 @@ import type ZoomSlider from "ol/control/ZoomSlider";
 import type { Options as ZoomSliderOptions } from "ol/control/ZoomSlider";
 import type ZoomToExtent from "ol/control/ZoomToExtent";
 import type { Options as ZoomToExtentOptions } from "ol/control/ZoomToExtent";
+import { useOpenLayersEvents } from "./useOpenLayersEvents";
 
 type ExtentedMap = Map & {
   controls_?: Control[];
@@ -92,6 +93,7 @@ export default function useControl<T extends InnerControlType>(
   ControlType: new (options?: Record<string, unknown>) => T,
   properties: InnerControlProperties,
   attrs: Record<string, unknown>,
+  eventsToHandle: string[] = [],
 ) {
   const map = inject<ExtentedMap>("map");
   const controlBar = inject<Ref<InnerControlType | null> | null>(
@@ -105,6 +107,8 @@ export default function useControl<T extends InnerControlType>(
     () => new ControlType({ ...(properties as Record<string, unknown>) }),
   );
 
+  useOpenLayersEvents(control, eventsToHandle);
+
   control.value.set("order", attrs.order === undefined ? 0 : attrs.order);
 
   watch(control, (newVal, oldVal) => {
diff --git a/src/composables/useOpenLayersEvents.ts b/src/composables/useOpenLayersEvents.ts
index fd88e872..88cf1c8c 100644
--- a/src/composables/useOpenLayersEvents.ts
+++ b/src/composables/useOpenLayersEvents.ts
@@ -10,8 +10,19 @@ import {
 import type BaseObject from "ol/Object";
 import type { EventTypes } from "ol/Observable";
 import type { Vue3OpenlayersGlobalOptions } from "@/types";
+import type BaseEvent from "ol/events/Event";
+import type { ObjectEvent } from "ol/Object";
+import type RenderEvent from "ol/render/Event";
+import type { TileSourceEvent } from "ol/source/Tile";
+import type { ImageSourceEvent } from "ol/source/Image";
+import type { VectorSourceEvent } from "ol/source/Vector";
 
 export const COMMON_EVENTS = ["change", "error", "propertychange"];
+export interface CommonEvents {
+  (e: "change", event: BaseEvent): void;
+  (e: "error", event: BaseEvent): void;
+  (e: "propertychange", event: ObjectEvent): void;
+}
 
 export const LAYER_EVENTS = [
   "change:extent",
@@ -27,18 +38,51 @@ export const LAYER_EVENTS = [
   "prerender",
   "sourceready",
 ];
+export interface LayerChangeEvents {
+  (e: "change:extent", event: ObjectEvent): void;
+  (e: "change:maxResolution", event: ObjectEvent): void;
+  (e: "change:maxZoom", event: ObjectEvent): void;
+  (e: "change:minResolution", event: ObjectEvent): void;
+  (e: "change:minZoom", event: ObjectEvent): void;
+  (e: "change:opacity", event: ObjectEvent): void;
+  (e: "change:source", event: ObjectEvent): void;
+  (e: "change:visible", event: ObjectEvent): void;
+  (e: "change:zIndex", event: ObjectEvent): void;
+}
+export interface LayerRenderEvents {
+  (e: "postrender", event: RenderEvent): void;
+  (e: "prerender", event: RenderEvent): void;
+}
+export interface LayerEvents
+  extends CommonEvents,
+    LayerChangeEvents,
+    LayerRenderEvents {
+  (e: "sourceready", event: BaseEvent): void;
+}
 
 export const TILE_SOURCE_EVENTS = [
   "tileloadend",
   "tileloaderror",
   "tileloadstart",
 ];
+export interface TileSourceEvents extends CommonEvents {
+  (e: "tileloadend", event: TileSourceEvent): void;
+  (e: "tileloaderror", event: TileSourceEvent): void;
+  (e: "tileloadstart", event: TileSourceEvent): void;
+}
+
 export const IMAGE_SOURCE_EVENTS = [
   "imageloadend",
   "imageloaderror",
   "imageloadstart",
 ];
-export const FEATURE_EVENTS = [
+export interface ImageSourceEvents extends CommonEvents {
+  (e: "imageloadend", event: ImageSourceEvent): void;
+  (e: "imageloaderror", event: ImageSourceEvent): void;
+  (e: "imageloadstart", event: ImageSourceEvent): void;
+}
+
+export const VECTOR_SOURCE_EVENTS = [
   "addfeature",
   "changefeature",
   "clear",
@@ -47,6 +91,15 @@ export const FEATURE_EVENTS = [
   "featuresloadstart",
   "removefeature",
 ];
+export interface VectorSourceEvents extends CommonEvents {
+  (e: "addfeature", event: VectorSourceEvent): void;
+  (e: "changefeature", event: VectorSourceEvent): void;
+  (e: "clear", event: VectorSourceEvent): void;
+  (e: "featuresloadend", event: VectorSourceEvent): void;
+  (e: "featuresloaderror", event: VectorSourceEvent): void;
+  (e: "featuresloadstart", event: VectorSourceEvent): void;
+  (e: "removefeature", event: VectorSourceEvent): void;
+}
 
 export function useOpenLayersEvents(
   feature:
@@ -61,18 +114,17 @@ export function useOpenLayersEvents(
     debug: false,
   };
   if (instance) {
-    globalOptions = inject("ol-options");
+    globalOptions = inject("ol-options", globalOptions);
   }
 
   function updateOpenLayersEventHandlers() {
     ([...COMMON_EVENTS, ...eventNames] as EventTypes[]).forEach((eventName) => {
       let unwrappedFeature: Pick<BaseObject, "on">;
 
-      if (!isRef(feature)) {
-        unwrappedFeature = feature;
+      if (isRef(feature)) {
+        unwrappedFeature = feature.value;
       } else {
-        unwrappedFeature =
-          typeof feature.value === "function" ? feature.value() : feature.value;
+        unwrappedFeature = feature;
       }
 
       unwrappedFeature.on(eventName, (...args: unknown[]) => {
diff --git a/src/composables/usePropsAsObjectProperties.ts b/src/composables/usePropsAsObjectProperties.ts
index 88dbe31e..11984553 100644
--- a/src/composables/usePropsAsObjectProperties.ts
+++ b/src/composables/usePropsAsObjectProperties.ts
@@ -34,7 +34,7 @@ export default function usePropsAsObjectProperties<
     debug: false,
   };
   if (instance) {
-    globalOptions = inject("ol-options");
+    globalOptions = inject("ol-options", globalOptions);
   }
 
   const revisedProps = checkAndUpdateStylePropDef<T>(props);
diff --git a/src/composables/useSource.ts b/src/composables/useSource.ts
index 689e7a4b..a0b6bb06 100644
--- a/src/composables/useSource.ts
+++ b/src/composables/useSource.ts
@@ -2,9 +2,19 @@ import { onUnmounted, type Ref, shallowRef, watch } from "vue";
 import { type Cluster, Source } from "ol/source";
 import usePropsAsObjectProperties from "./usePropsAsObjectProperties";
 import type { Layer } from "ol/layer";
-import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import {
+  COMMON_EVENTS,
+  IMAGE_SOURCE_EVENTS,
+  TILE_SOURCE_EVENTS,
+  useOpenLayersEvents,
+  VECTOR_SOURCE_EVENTS,
+} from "@/composables/useOpenLayersEvents";
 import projectionFromProperties from "@/helpers/projection";
 import type { ProjectionLike } from "ol/proj";
+import type { Feature } from "ol";
+import TileSource from "ol/source/Tile";
+import VectorSource from "ol/source/Vector";
+import ImageSource from "ol/source/Image";
 
 /**
  * Create a Source and watch for source, prop and layer changes
@@ -16,7 +26,7 @@ import type { ProjectionLike } from "ol/proj";
 export default function useSource<T extends Source>(
   // eslint-disable-next-line
   SourceClass: new (...args: any[]) => T,
-  layer: Ref<Layer> | Ref<Cluster> | null | undefined,
+  layer: Ref<Layer> | Ref<Cluster<Feature>> | null | undefined,
   props: ConstructorParameters<typeof SourceClass>[0],
   eventsToHandle: string[] = [],
   // eslint-disable-next-line
@@ -52,10 +62,27 @@ export default function useSource<T extends Source>(
       sourceUpdateActions(source.value);
     }
     layer?.value?.setSource(source.value);
-    useOpenLayersEvents(source, eventsToHandle);
+    useOpenLayersEvents(source, [
+      ...COMMON_EVENTS,
+      ...getSourceEvents(),
+      ...eventsToHandle,
+    ]);
     return source;
   }
 
+  function getSourceEvents() {
+    const src = source.value;
+    if (src instanceof VectorSource) {
+      return VECTOR_SOURCE_EVENTS;
+    } else if (src instanceof TileSource) {
+      return TILE_SOURCE_EVENTS;
+    } else if (src instanceof ImageSource) {
+      return IMAGE_SOURCE_EVENTS;
+    }
+
+    return [];
+  }
+
   function removeSource() {
     layer?.value?.setSource(null);
   }
diff --git a/src/demos/RotateControlDemo.vue b/src/demos/RotateControlDemo.vue
index 9d1906ac..2b5cced9 100644
--- a/src/demos/RotateControlDemo.vue
+++ b/src/demos/RotateControlDemo.vue
@@ -8,7 +8,7 @@
     <ol-tile-layer>
       <ol-source-osm />
     </ol-tile-layer>
-    <ol-rotate-control />
+    <ol-rotate-control :autoHide="false" />
   </ol-map>
 </template>
 
diff --git a/src/demos/TileLayerDemo.vue b/src/demos/TileLayerDemo.vue
index 4f600a34..dedb60c9 100644
--- a/src/demos/TileLayerDemo.vue
+++ b/src/demos/TileLayerDemo.vue
@@ -18,6 +18,7 @@
         :format="format"
         :layer="layerName"
         :styles="styleName"
+        projection="EPSG:3857"
       ></ol-source-wmts>
     </ol-tile-layer>
   </ol-map>
diff --git a/src/demos/TileWMSDemo.vue b/src/demos/TileWMSDemo.vue
index cd3a0c41..ab7eb3e3 100644
--- a/src/demos/TileWMSDemo.vue
+++ b/src/demos/TileWMSDemo.vue
@@ -37,6 +37,7 @@
       <ol-source-tile-wms
         url="https://ahocevar.com/geoserver/wms"
         :extent="[-13884991, 2870341, -7455066, 6338219]"
+        projection="EPSG:3857"
         layers="topp:states"
         serverType="geoserver"
         :transition="0"
diff --git a/src/types.ts b/src/types.ts
index 2ee10ad2..412daa33 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,3 +1,26 @@
 export type Vue3OpenlayersGlobalOptions = {
   debug: boolean;
 };
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+type TupleToObject<
+  T extends readonly any[],
+  M extends Record<Exclude<keyof T, keyof any[]>, PropertyKey>,
+> = { [K in Exclude<keyof T, keyof any[]> as M[K]]: T[K] };
+
+export type TypedClassArgs<
+  T extends abstract new (...args: any) => any,
+  M extends Record<
+    Exclude<keyof ConstructorParameters<T>, keyof any[]>,
+    PropertyKey
+  >,
+> = TupleToObject<ConstructorParameters<T>, M>;
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+export type KeysMatching<T extends object, V> = {
+  [K in keyof T]-?: T[K] extends V ? never : K;
+}[keyof T];
+
+export type ObjectToFactory<T> = {
+  [Key in keyof T]: T[Key] extends object | undefined ? () => T[Key] : T[Key];
+};