diff --git a/README.md b/README.md
index b64aa9f..38e7bc0 100644
--- a/README.md
+++ b/README.md
@@ -29,19 +29,6 @@ This is a fork of [vue-maplibre-gl](https://github.com/razorness/vue-maplibre-gl
 
 https://indoorequal.github.io/vue-maplibre-gl/
 
-# Usage
-
-See [examples/App.vue](src/App.vue) for a real world example.
-
-# Demo
-
-```shell
-git clone https://github.com/indoorequal/vue-maplibre-gl.git
-cd vue-maplibre-gl
-yarn
-yarn examples
-```
-
 ## PRs welcome ♥
 
 If you have ideas, improvements, suggestions etc. don't hesitate to open a pull request.
diff --git a/examples/App.vue b/examples/App.vue
deleted file mode 100644
index 6619fa1..0000000
--- a/examples/App.vue
+++ /dev/null
@@ -1,282 +0,0 @@
-<template>
-<div style="padding: 20px">
-  <div style="height: 400px; width: 800px; resize: both; overflow: auto; border: 1px solid #d6d6d6; margin-bottom: 20px">
-    <mgl-map
-      v-if="showMap"
-      ref="map"
-      :center="center"
-      :zoom="zoom"
-      :attribution-control="false"
-      language="fr"
-      @map:load="onLoad"
-      @map:zoomstart="isZooming = true"
-      @map:zoomend="isZooming = false"
-    >
-      <mgl-frame-rate-control/>
-      <mgl-fullscreen-control/>
-      <mgl-attribution-control/>
-      <mgl-navigation-control/>
-      <mgl-scale-control/>
-      <mgl-geolocation-control/>
-      <mgl-custom-control v-if="showCustomControl" position="top-left" :no-classes="!useClasses">
-	<mgl-button type="mdi" :path="buttonIcon" style="color: deepskyblue"/>
-      </mgl-custom-control>
-      <mgl-style-switch-control :map-styles="mapStyles" :position="controlPosition"/>
-      
-      <mgl-marker :coordinates="markerCoordinates" color="#cc0000" :scale="0.5"/>
-      
-      <mgl-geo-json-source source-id="geojson" :data="geojsonSource.data as any">
-	<mgl-line-layer
-	  v-if="geojsonSource.show"
-	  layer-id="geojson"
-	  :layout="layout"
-	  :paint="paint"
-	  @mouseenter="onMouseenter"
-	  />
-      </mgl-geo-json-source>
-      
-      <mgl-vector-source source-id="libraries" :tiles="librariesSourceTiles">
-	<mgl-circle-layer layer-id="libraries" source-layer="libraries" :paint="librariesLayerCirclesPaint"/>
-      </mgl-vector-source>
-      
-    </mgl-map>
-  </div>
-  <div style="margin-bottom: 20px">Version: {{ mapVersion }}</div>
-  Loaded Count: {{ loaded }}<br>
-  Is Zooming: {{ isZooming }}<br>
-  <div>
-    <input type="radio" id="one" value="top-left" v-model="controlPosition"/>
-    <label for="one">top-left</label>
-    <br/>
-    <input type="radio" id="tw0" value="top-right" v-model="controlPosition"/>
-    <label for="tw0">top-right</label>
-    <br/>
-    <input type="radio" id="three" value="bottom-left" v-model="controlPosition"/>
-    <label for="three">bottom-left</label>
-    <br/>
-    <input type="radio" id="four" value="bottom-right" v-model="controlPosition"/>
-    <label for="four">bottom-right</label>
-    <br/>
-    <span>Style Position: {{ controlPosition }}</span>
-  </div>
-  <div>
-    <input type="checkbox" v-model="useClasses" id="noclasses">
-    <label for="noclasses">Use Custom Control Classes</label>
-  </div>
-  <div>
-    <input type="checkbox" v-model="showCustomControl" id="showcustom">
-    <label for="showcustom">Show Custom Control</label>
-  </div>
-  <div>
-    <input type="checkbox" v-model="showMap" id="showmap">
-    <label for="showmap">Show Map</label>
-  </div>
-  <div>
-    <label for="cars">Language:</label>
-    <select :value="map?.language" @input="setLanguage">
-      <option value="">n/a</option>
-      <option value="de">German</option>
-      <option value="en">English</option>
-      <option value="fr">French</option>
-      <option value="ja">Japanese</option>
-    </select>
-  </div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, ref, watch } from 'vue';
-import {
-  MglDefaults,
-  MglEvent,
-  Position,
-  StyleSwitchItem,
-  useMap,
-  ValidLanguages,
-  MglMap,
-  MglFrameRateControl,
-  MglFullscreenControl,
-  MglAttributionControl,
-  MglNavigationControl,
-  MglScaleControl,
-  MglGeolocationControl,
-  MglCustomControl,
-  MglButton,
-  MglStyleSwitchControl,
-  MglMarker,
-  MglGeoJsonSource,
-  MglLineLayer,
-  MglVectorSource,
-  MglCircleLayer
-} from '@indoorequal/vue-maplibre-gl';
-import { mdiCursorDefaultClick } from '@mdi/js';
-import { CircleLayerSpecification, LineLayerSpecification, LngLatLike, MapLayerMouseEvent } from 'maplibre-gl';
-import { FeatureCollection, LineString } from 'geojson';
-
-MglDefaults.style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
-console.log('MglDefaults', MglDefaults);
-
-const lineString = [
-  [ -122.483696, 37.833818 ],
-  [ -122.483482, 37.833174 ],
-  [ -122.483396, 37.8327 ],
-  [ -122.483568, 37.832056 ],
-  [ -122.48404, 37.831141 ],
-  [ -122.48404, 37.830497 ],
-  [ -122.483482, 37.82992 ],
-  [ -122.483568, 37.829548 ],
-  [ -122.48507, 37.829446 ],
-  [ -122.4861, 37.828802 ],
-  [ -122.486958, 37.82931 ],
-  [ -122.487001, 37.830802 ],
-  [ -122.487516, 37.831683 ],
-  [ -122.488031, 37.832158 ],
-  [ -122.488889, 37.832971 ],
-  [ -122.489876, 37.832632 ],
-  [ -122.490434, 37.832937 ],
-  [ -122.49125, 37.832429 ],
-  [ -122.491636, 37.832564 ],
-  [ -122.492237, 37.833378 ],
-  [ -122.493782, 37.833683 ]
-];
-
-export default defineComponent({
-  name      : 'App',
-  components: {
-    MglCircleLayer, MglVectorSource, MglLineLayer, MglGeoJsonSource, MglMarker, MglStyleSwitchControl, MglButton, MglCustomControl,
-    MglGeolocationControl, MglScaleControl, MglNavigationControl, MglAttributionControl, MglFullscreenControl, MglFrameRateControl, MglMap
-  },
-  setup() {
-    
-    const map               = useMap(),
-    mapVersion        = ref<string>(),
-    showCustomControl = ref(true),
-    loaded            = ref(0),
-    markerCoordinates = ref<LngLatLike>([ 13.377507, 52.516267 ]),
-    geojsonSource     = {
-      data: ref<FeatureCollection<LineString>>({
-	type    : 'FeatureCollection',
-	features: [
-	  {
-	    type      : 'Feature',
-	    properties: {},
-	    geometry  : {
-	      type       : 'LineString',
-	      coordinates: [
-		[ -122.483696, 37.833818 ],
-		[ -122.483482, 37.833174 ]
-	      ]
-	    }
-	  }
-	]
-      }),
-      show: ref(true)
-    };
-    
-    watch(() => map.isLoaded, () => (console.log('IS LOADED', map)), { immediate: true });
-    watch(() => map.isMounted, (v: boolean) => (console.log('IS MOUNTED', v)), { immediate: true });
-    
-    onMounted(() => {
-      setTimeout(() => (markerCoordinates.value = [ 13.377507, 42.516267 ]), 5000);
-      setInterval(() => {
-	if (geojsonSource.data.value.features[ 0 ].geometry.coordinates.length >= lineString.length) {
-	  geojsonSource.data.value = <FeatureCollection<LineString>>{
-	    type    : 'FeatureCollection',
-	    features: [
-	      {
-		type      : 'Feature',
-		properties: {},
-		geometry  : {
-		  type       : 'LineString',
-		  coordinates: [
-		    [ -122.483696, 37.833818 ],
-		    [ -122.483482, 37.833174 ]
-		  ]
-		}
-	      }
-	    ]
-	  };
-	} else {
-	  geojsonSource.data.value = <FeatureCollection<LineString>>{
-	    type    : 'FeatureCollection',
-	    features: [
-	      {
-		type      : 'Feature',
-		properties: {},
-		geometry  : {
-		  type       : 'LineString',
-		  coordinates: [
-		    ...geojsonSource.data.value.features[ 0 ].geometry.coordinates,
-		    lineString[ geojsonSource.data.value.features[ 0 ].geometry.coordinates.length ]
-		  ]
-		}
-	      }
-	    ]
-	  };
-	}
-      }, 1000);
-    });
-    
-    function onLoad(e: MglEvent) {
-      loaded.value++;
-      mapVersion.value = e.map.version;
-      console.log(e.type, e, e.map.version);
-    }
-    
-    function onMouseenter(e: MapLayerMouseEvent) {
-      console.log('EVENT', e.type, e.lngLat);
-    }
-    
-    function setLanguage(e: Event) {
-      console.log('setLanguage', e);
-      map.language = (e.target as HTMLSelectElement).value as ValidLanguages;
-    }
-    
-    return {
-      showCustomControl, loaded, map, mapVersion, markerCoordinates, geojsonSource, onLoad, onMouseenter, setLanguage,
-      geojsonSourceData         : geojsonSource.data,
-      isZooming                 : ref(false),
-      controlPosition           : ref(Position.TOP_LEFT),
-      showMap                   : ref(true),
-      center                    : [ 10.288107, 49.405078 ] as LngLatLike,
-      zoom                      : 3,
-      useClasses                : ref(true),
-      mapStyles                 : [
-	{
-	  name : 'Streets',
-	  label: 'Streets',
-	  // icon : { path: mdiRoad },
-	  style: 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh'
-	},
-	{ name: 'Basic', label: 'Basic', style: 'https://api.maptiler.com/maps/basic/style.json?key=cQX2iET1gmOW38bedbUh' },
-	{ name: 'Bright', label: 'Bright', style: 'https://api.maptiler.com/maps/bright/style.json?key=cQX2iET1gmOW38bedbUh' },
-	{ name: 'Satellite', label: 'Satellite', style: 'https://api.maptiler.com/maps/hybrid/style.json?key=cQX2iET1gmOW38bedbUh' },
-	{ name: 'Voyager', label: 'Voyager', style: 'https://api.maptiler.com/maps/voyager/style.json?key=cQX2iET1gmOW38bedbUh' }
-      ] as StyleSwitchItem[],
-      buttonIcon                : mdiCursorDefaultClick,
-      layout                    : {
-	'line-join': 'round',
-	'line-cap' : 'round'
-      } as LineLayerSpecification['layout'],
-      paint                     : {
-	'line-color': '#FF0000',
-	'line-width': 8
-      } as LineLayerSpecification['paint'],
-      librariesSourceTiles      : [ 'https://api.librarydata.uk/libraries/{z}/{x}/{y}.mvt' ],
-      librariesLayerCirclesPaint: {
-	'circle-radius': 5,
-	'circle-color' : '#1b5e20'
-      } as CircleLayerSpecification['paint']
-    };
-  }
-});
-</script>
-
-<style lang="scss">
-@import "maplibre-gl/dist/maplibre-gl.css";
-@import "../dist/vue-maplibre-gl.css";
-
-body {
-  margin: 0;
-}
-</style>
diff --git a/examples/basic.vue b/examples/basic.vue
deleted file mode 100644
index e753273..0000000
--- a/examples/basic.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-// Basic
-//
-// A basic map with a style and controls
-<template>
-  <mgl-map :map-style="style">
-    <mgl-navigation-control />
-  </mgl-map>
-</template>
-
-<script setup>
-import {
-  MglMap,
-  MglNavigationControl,
-} from '@indoorequal/vue-maplibre-gl';
-
-const style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
-</script>
-
-<style lang="scss">
-@import "maplibre-gl/dist/maplibre-gl.css";
-@import "@indoorequal/vue-maplibre-gl/dist/vue-maplibre-gl.css";
-
-body {
-  margin: 0;
-}
-html, body, #app { height: 100%; }
-</style>
diff --git a/examples/index.html b/examples/index.html
deleted file mode 100644
index 51ada45..0000000
--- a/examples/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@indoorequal/vue-maplibre-gl</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="./main.ts"></script>
-  </body>
-</html>
diff --git a/examples/main.ts b/examples/main.ts
deleted file mode 100644
index 4fa2d41..0000000
--- a/examples/main.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-
-createApp(App).mount('#app')
diff --git a/examples/package.json b/examples/package.json
deleted file mode 100644
index c965984..0000000
--- a/examples/package.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "@indoorequal/vue-maplibre-gl-examples",
-  "type": "module",
-  "private": true,
-  "version": "0.0.0",
-  "scripts": {
-    "play": "vite"
-  },
-  "devDependencies": {
-    "@indoorequal/vue-maplibre-gl": "workspace:^",
-    "@types/node": "^20.12.7",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/compiler-sfc": "^3.4.23",
-    "@vue/tsconfig": "^0.5.1",
-    "maplibre-gl": "^3.6.2",
-    "typescript": "~5.3.3",
-    "vite": "^5.2.9",
-    "vue": "^3.4.23"
-  }
-}
diff --git a/examples/style.css b/examples/style.css
deleted file mode 100644
index 7294765..0000000
--- a/examples/style.css
+++ /dev/null
@@ -1,80 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/examples/vite-env.d.ts b/examples/vite-env.d.ts
deleted file mode 100644
index efa836f..0000000
--- a/examples/vite-env.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-	import type { DefineComponent } from 'vue';
-	const component: DefineComponent<{}, {}, any>
-	export default component
-}
\ No newline at end of file
diff --git a/examples/vite.config.ts b/examples/vite.config.ts
deleted file mode 100644
index ff1be2c..0000000
--- a/examples/vite.config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-  ],
-  ssr: {
-    external: [ 'vue', 'maplibre-gl', 'geojson', 'mitt' ]
-  },
-  server : {
-    host : '0.0.0.0',
-    watch: {
-      // to avoid full page reloads on file changes
-      ignored: [/node_modules/ ]
-    }
-  }
-});
diff --git a/package.json b/package.json
index fa1440e..a872dc7 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
   ],
   "scripts": {
     "build": "vue-tsc --noEmit && vite build",
-    "examples": "yarn workspace @indoorequal/vue-maplibre-gl-examples play",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
diff --git a/yarn.lock b/yarn.lock
index f56cecb..8ecfa16 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -511,22 +511,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@indoorequal/vue-maplibre-gl-examples@workspace:examples":
-  version: 0.0.0-use.local
-  resolution: "@indoorequal/vue-maplibre-gl-examples@workspace:examples"
-  dependencies:
-    "@indoorequal/vue-maplibre-gl": "workspace:^"
-    "@types/node": "npm:^20.12.7"
-    "@vitejs/plugin-vue": "npm:^5.0.4"
-    "@vue/compiler-sfc": "npm:^3.4.23"
-    "@vue/tsconfig": "npm:^0.5.1"
-    maplibre-gl: "npm:^3.6.2"
-    typescript: "npm:~5.3.3"
-    vite: "npm:^5.2.9"
-    vue: "npm:^3.4.23"
-  languageName: unknown
-  linkType: soft
-
 "@indoorequal/vue-maplibre-gl@workspace:., @indoorequal/vue-maplibre-gl@workspace:^":
   version: 0.0.0-use.local
   resolution: "@indoorequal/vue-maplibre-gl@workspace:."
@@ -1068,7 +1052,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^20.11.17, @types/node@npm:^20.12.7":
+"@types/node@npm:^20.11.17":
   version: 20.12.7
   resolution: "@types/node@npm:20.12.7"
   dependencies:
@@ -1319,7 +1303,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-sfc@npm:3.4.25, @vue/compiler-sfc@npm:^3.2.0, @vue/compiler-sfc@npm:^3.4.23":
+"@vue/compiler-sfc@npm:3.4.25, @vue/compiler-sfc@npm:^3.2.0":
   version: 3.4.25
   resolution: "@vue/compiler-sfc@npm:3.4.25"
   dependencies:
@@ -1470,13 +1454,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/tsconfig@npm:^0.5.1":
-  version: 0.5.1
-  resolution: "@vue/tsconfig@npm:0.5.1"
-  checksum: 10/1f8e51eae0aae92ea518f0713394135bf1f8a80decd486417fb3701851e903a4c18bc12db6c8d3223e1e0bd1dc01c70668bd7703382a130fd250867b772002ce
-  languageName: node
-  linkType: hard
-
 "@vueuse/core@npm:10.9.0, @vueuse/core@npm:^10.9.0":
   version: 10.9.0
   resolution: "@vueuse/core@npm:10.9.0"
@@ -3309,7 +3286,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"maplibre-gl@npm:^3.0.0, maplibre-gl@npm:^3.6.2":
+"maplibre-gl@npm:^3.0.0":
   version: 3.6.2
   resolution: "maplibre-gl@npm:3.6.2"
   dependencies:
@@ -4629,16 +4606,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:~5.3.3":
-  version: 5.3.3
-  resolution: "typescript@npm:5.3.3"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 10/6e4e6a14a50c222b3d14d4ea2f729e79f972fa536ac1522b91202a9a65af3605c2928c4a790a4a50aa13694d461c479ba92cedaeb1e7b190aadaa4e4b96b8e18
-  languageName: node
-  linkType: hard
-
 "typescript@patch:typescript@npm%3A5.4.2#optional!builtin<compat/typescript>":
   version: 5.4.2
   resolution: "typescript@patch:typescript@npm%3A5.4.2#optional!builtin<compat/typescript>::version=5.4.2&hash=5adc0c"
@@ -4659,16 +4626,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A~5.3.3#optional!builtin<compat/typescript>":
-  version: 5.3.3
-  resolution: "typescript@patch:typescript@npm%3A5.3.3#optional!builtin<compat/typescript>::version=5.3.3&hash=e012d7"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 10/c93786fcc9a70718ba1e3819bab56064ead5817004d1b8186f8ca66165f3a2d0100fee91fa64c840dcd45f994ca5d615d8e1f566d39a7470fc1e014dbb4cf15d
-  languageName: node
-  linkType: hard
-
 "typewise-core@npm:^1.2, typewise-core@npm:^1.2.0":
   version: 1.2.0
   resolution: "typewise-core@npm:1.2.0"
@@ -4789,7 +4746,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^5.1.3, vite@npm:^5.2.10, vite@npm:^5.2.9":
+"vite@npm:^5.1.3, vite@npm:^5.2.10":
   version: 5.2.10
   resolution: "vite@npm:5.2.10"
   dependencies:
@@ -4984,7 +4941,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:^3.4.19, vue@npm:^3.4.23, vue@npm:^3.4.25":
+"vue@npm:^3.4.19, vue@npm:^3.4.25":
   version: 3.4.25
   resolution: "vue@npm:3.4.25"
   dependencies: