From 921f79beadea017dbfce281240a78af0be7ac19c Mon Sep 17 00:00:00 2001
From: Linus Brombacher <Brombacher.Linus@scheidt-bachmann-st.de>
Date: Mon, 18 May 2026 12:21:14 +0200
Subject: [PATCH] update vue files to composition api

---
 web/siteplan/src/App.vue                      | 101 ++--
 .../src/components/FeatureInfoPopup.vue       | 267 ++++-----
 .../src/components/FeatureService.vue         | 561 +++++++++---------
 web/siteplan/src/components/Lageplan.vue      |  80 ++-
 web/siteplan/src/components/MapContainer.vue  | 190 +++---
 .../src/components/MapSourceSelection.vue     | 123 ++--
 .../src/components/SideInfoControl.vue        |  60 +-
 .../src/components/toolbar/KatalogMenuBar.vue |  43 +-
 .../src/components/toolbar/Menubar.vue        |  33 +-
 .../src/components/toolbar/Toolbar.vue        | 132 ++---
 10 files changed, 745 insertions(+), 845 deletions(-)

diff --git a/web/siteplan/src/App.vue b/web/siteplan/src/App.vue
index 76e0367e60..c04d14a57f 100644
--- a/web/siteplan/src/App.vue
+++ b/web/siteplan/src/App.vue
@@ -13,73 +13,67 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import Menubar from '@/components/toolbar/Menubar.vue'
 import Toolbar from '@/components/toolbar/Toolbar.vue'
 import axios from 'axios'
-import { Options, Vue } from 'vue-class-component'
+import { onMounted, ref } from 'vue'
 import SvgCatalogService from './service/SvgCatalogService'
 import { store } from './store'
 import Configuration from './util/Configuration'
 import PlanProToolboxTest from './util/PlanProToolboxTest'
 import { ToolboxConfiguration } from './util/ToolboxConfiguration'
-@Options({
-  async created () {
-    store.commit('setLoading', true)
-    // Download the siteplan font
-    await axios({
-      method: 'GET',
-      url: 'font',
-      responseType: 'blob'
-    })
-      .then(response => {
-        const reader = new FileReader()
-        reader.onload = () => {
-          store.commit(
-            'setSiteplanfont',
-            `
+
+const isShowMenu = ref(false)
+const loading = ref(true)
+
+function showMenu (value: boolean): void {
+  isShowMenu.value = value
+}
+
+onMounted (async () => {
+  store.commit('setLoading', true)
+  // Download the siteplan font
+  await axios({
+    method: 'GET',
+    url: 'font',
+    responseType: 'blob'
+  })
+    .then(response => {
+      const reader = new FileReader()
+      reader.onload = () => {
+        store.commit(
+          'setSiteplanfont',
+          `
         @font-face {
           font-family: 'siteplanfont';
           src: url('${reader.result}') format('truetype');
         }`
-          )
-        }
-        reader.readAsDataURL(new Blob([response.data]))
-      })
-      .catch(() => {
-        console.warn('Siteplan Font not available')
-      })
-    // Wait until the svg catalog service is ready
-    await SvgCatalogService.getInstance().isReady()
-    // Download the toolbox configuration
-    await axios
-      .get<ToolboxConfiguration>('/configuration.json')
-      .then(response => {
-        store.commit('setpptConfiguration', response.data)
-        store.commit('setSheetCutCRS', response.data.defaultSheetCutCRS)
-        store.commit('setPlanProModelType', response.data.planproModelType)
-        // run unit tests
-        if (Configuration.developmentMode()) {
-          PlanProToolboxTest.run()
-        }
+        )
+      }
+      reader.readAsDataURL(new Blob([response.data]))
+    })
+    .catch(() => {
+      console.warn('Siteplan Font not available')
+    })
+  // Wait until the svg catalog service is ready
+  await SvgCatalogService.getInstance().isReady()
+  // Download the toolbox configuration
+  await axios
+    .get<ToolboxConfiguration>('/configuration.json')
+    .then(response => {
+      store.commit('setpptConfiguration', response.data)
+      store.commit('setSheetCutCRS', response.data.defaultSheetCutCRS)
+      store.commit('setPlanProModelType', response.data.planproModelType)
+      // run unit tests
+      if (Configuration.developmentMode()) {
+        PlanProToolboxTest.run()
+      }
 
-        this.loading = false
-      })
-  },
-  components: {
-    Toolbar,
-    Menubar
-  }
+      loading.value = false
+    })
 })
-export default class App extends Vue {
-  isShowMenu = false
-  altClientHeight = 0
-  loading = true
 
-  showMenu (value: boolean): void {
-    this.isShowMenu = value
-  }
-}
 </script>
 <style>
 html,
@@ -95,13 +89,16 @@ body {
   height: 100vh;
   flex-direction: column;
 }
+
 #view {
   display: flex;
   flex: 1;
 }
+
 #menubar {
   flex-grow: 1;
 }
+
 #mainView {
   flex-grow: 5;
 }
diff --git a/web/siteplan/src/components/FeatureInfoPopup.vue b/web/siteplan/src/components/FeatureInfoPopup.vue
index 0cb33b73dd..be44b509d5 100644
--- a/web/siteplan/src/components/FeatureInfoPopup.vue
+++ b/web/siteplan/src/components/FeatureInfoPopup.vue
@@ -22,181 +22,170 @@
     </div>
   </teleport>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import MenuPopup from '@/components/popup/MenuPopup.vue'
 import { FeatureType, getFeatureData, getFeatureType } from '@/feature/FeatureInfo'
 import { LeftRight } from '@/model/SiteplanModel'
 import { store } from '@/store'
 import { getFeatureGUIDs } from '@/util/FeatureExtensions'
-import NamedFeatureLayer from '@/util/NamedFeatureLayer'
 import { compare } from '@/util/ObjectExtension'
 import { Collection, Feature, MapBrowserEvent } from 'ol'
 import Geometry from 'ol/geom/Geometry'
 import Select, { SelectEvent } from 'ol/interaction/Select'
 import Map from 'ol/Map'
 import Overlay from 'ol/Overlay'
-import { Options, Vue } from 'vue-class-component'
-
+import { onMounted, ref } from 'vue'
 /**
  * Container for feature info popups
  *
  * @author Stuecker
  */
-@Options({
-  components: {
-    MenuPopup
-  },
-  props: {
-    map: Map,
-    featureLayers: Object
-  }
-})
-export default class FeatureInfoPopup extends Vue {
-  map!: Map
-  featureLayers!: NamedFeatureLayer[]
-  mouseDownButton: LeftRight | null = null
-  infoPopup: Overlay | null = null
-  selectedFeatures: Collection<Feature<Geometry>> = new Collection()
-  featureSelectionKey = 0
-  readonly existPopupFeature = [
-    FeatureType.Signal,
-    FeatureType.PZB,
-    FeatureType.PZBGU,
-    FeatureType.TrackDesignationMarker,
-    FeatureType.TrackSectionMarker,
-    FeatureType.Track,
-    FeatureType.TrackOutline,
-    FeatureType.TrackSwitchEndMarker,
-    FeatureType.TrackSwitch,
-    FeatureType.Error,
-    FeatureType.TrackLock,
-    FeatureType.LockKey,
-    FeatureType.ExternalElementControl,
-    FeatureType.Cant,
-    FeatureType.CantLine,
-    FeatureType.Unknown
-  ]
-
-  mounted (): void {
-    // Allow feature selection
-    const select = new Select({
-      style: null,
-      condition: this.onFeatureClick,
-      hitTolerance: 10,
-      multi: true,
-      features: this.selectedFeatures
-    })
-    this.map.addInteraction(select)
-    select.on('select', this.onFeatureSelect)
-    store.subscribe(m => {
-      if (m.type === 'setMeasureEnable') {
-        select.setActive(!m.payload)
-      }
-    })
-    // Add info window overlay
-    const element = document.getElementById('featureInfoPopup')
-    if (element === null) {
-      return
-    }
-
-    this.infoPopup = new Overlay({
-      element
-    })
-    this.map.addOverlay(this.infoPopup)
-  }
 
-  getPopupAvaibleFeatures () {
-    if (this.selectedFeatures === undefined) {
-      this.resetSelection()
-      return []
+const props = defineProps<{
+  map: Map
+}>()
+
+const mouseDownButton = ref<LeftRight | null>(null)
+const infoPopup = ref<Overlay | null>(null)
+const selectedFeatures = new Collection<Feature<Geometry>>()
+const featureSelectionKey = ref(0)
+const existPopupFeature = [
+  FeatureType.Signal,
+  FeatureType.PZB,
+  FeatureType.PZBGU,
+  FeatureType.TrackDesignationMarker,
+  FeatureType.TrackSectionMarker,
+  FeatureType.Track,
+  FeatureType.TrackOutline,
+  FeatureType.TrackSwitchEndMarker,
+  FeatureType.TrackSwitch,
+  FeatureType.Error,
+  FeatureType.TrackLock,
+  FeatureType.LockKey,
+  FeatureType.ExternalElementControl,
+  FeatureType.Cant,
+  FeatureType.CantLine,
+  FeatureType.Unknown
+]
+
+onMounted(() => {
+  // Allow feature selection
+  const select = new Select({
+    style: null,
+    condition: onFeatureClick,
+    hitTolerance: 10,
+    multi: true,
+    features: selectedFeatures
+  })
+  props.map.addInteraction(select)
+  select.on('select', onFeatureSelect)
+  store.subscribe(m => {
+    if (m.type === 'setMeasureEnable') {
+      select.setActive(!m.payload)
     }
-
-    const popupAvavaibleFeatures = this.selectedFeatures.getArray().filter(feature => this.hasPopup(feature))
-    const uniqueFeatures = this.filterSameFeature(popupAvavaibleFeatures)
-
-    if (uniqueFeatures.length == 0) {
-      this.resetSelection()
-      return []
-    }
-
-    return uniqueFeatures
+  })
+  // Add info window overlay
+  const element = document.getElementById('featureInfoPopup')
+  if (element === null) {
+    return
   }
 
-  filterSameFeature (features: Feature<Geometry>[]): Array<Feature<Geometry>> {
-    const result: Feature<Geometry>[] = []
-    features.forEach(feature => {
-      const featureType = getFeatureType(feature)
-      const featuresSameType = result.filter(ele =>
-        getFeatureType(ele) === featureType)
+  const overlay = new Overlay({
+    element
+  })
+  infoPopup.value = overlay
+  props.map.addOverlay(overlay)
+})
 
-      if (featuresSameType.length === 0) {
-        result.push(feature)
-        return
-      }
+function getPopupAvaibleFeatures () {
+  const popupAvavaibleFeatures = selectedFeatures.getArray().filter(feature => hasPopup(feature))
+  const uniqueFeatures = filterSameFeature(popupAvavaibleFeatures)
 
-      const isAlreadyAdded = !featuresSameType.every(ele => compare(getFeatureData(feature), getFeatureData(ele)))
-      if (!isAlreadyAdded) {
-        result.push(feature)
-      }
-    })
-    return result
+  if (uniqueFeatures.length == 0) {
+    resetSelection()
+    return []
   }
 
-  hasPopup (feature: Feature<Geometry>): boolean {
-    const existInfoPop = this.mouseDownButton === LeftRight.LEFT &&
-      this.existPopupFeature.includes(getFeatureType(feature))
-    const existGUID = this.mouseDownButton === LeftRight.RIGHT &&
-      getFeatureGUIDs(feature).length > 0
-    return existInfoPop || existGUID
-  }
+  return uniqueFeatures
+}
+
+function filterSameFeature (features: Feature<Geometry>[]): Array<Feature<Geometry>> {
+  const result: Feature<Geometry>[] = []
+  features.forEach(feature => {
+    const featureType = getFeatureType(feature)
+    const featuresSameType = result.filter(ele =>
+      getFeatureType(ele) === featureType)
 
-  resetSelection (): void {
-    if (this.infoPopup == null) {
+    if (featuresSameType.length === 0) {
+      result.push(feature)
       return
     }
 
-    this.selectedFeatures.clear()
-    this.infoPopup.setPosition(undefined)
+    const isAlreadyAdded = !featuresSameType.every(ele => compare(getFeatureData(feature), getFeatureData(ele)))
+    if (!isAlreadyAdded) {
+      result.push(feature)
+    }
+  })
+  return result
+}
+
+function hasPopup (feature: Feature<Geometry>): boolean {
+  const existInfoPop = mouseDownButton.value === LeftRight.LEFT &&
+    existPopupFeature.includes(getFeatureType(feature))
+  const existGUID = mouseDownButton.value === LeftRight.RIGHT &&
+    getFeatureGUIDs(feature).length > 0
+  return existInfoPop || existGUID
+}
+
+function resetSelection (): void {
+  if (infoPopup.value == null) {
+    return
   }
 
-  onFeatureSelect (event: SelectEvent): void {
-    // Update popup
-    this.featureSelectionKey++
-    // Reset state if no features are selected
-    const features = event.selected
-    if (!features || features.length === 0) {
-      this.resetSelection()
-      return
-    }
+  selectedFeatures.clear()
+  infoPopup.value.setPosition(undefined)
+}
 
-    this.infoPopup?.setPosition(event.mapBrowserEvent.coordinate)
+function onFeatureSelect (event: SelectEvent): void {
+  // Update popup
+  featureSelectionKey.value++
+  // Reset state if no features are selected
+  const features = event.selected
+  if (!features || features.length === 0) {
+    resetSelection()
+    return
   }
 
-  onFeatureClick (event: MapBrowserEvent<PointerEvent>): boolean {
-    if (event.originalEvent.type === 'pointerdown') {
-      switch (event.originalEvent.buttons) {
-        case 1: {
-          this.mouseDownButton = LeftRight.LEFT
-          break
-        }
-        case 2: {
-          this.mouseDownButton = LeftRight.RIGHT
-          break
-        }
-        default: {
-          this.mouseDownButton = null
-        }
+  infoPopup.value?.setPosition(event.mapBrowserEvent.coordinate)
+}
+
+function onFeatureClick (event: MapBrowserEvent): boolean {
+  if (event.originalEvent instanceof PointerEvent &&
+    event.originalEvent.type === 'pointerdown'
+  ) {
+    switch (event.originalEvent.buttons) {
+      case 1: {
+        mouseDownButton.value = LeftRight.LEFT
+        break
+      }
+      case 2: {
+        mouseDownButton.value = LeftRight.RIGHT
+        break
+      }
+      default: {
+        mouseDownButton.value = null
       }
     }
-
-    return (
-      event.originalEvent.type === 'pointerdown' &&
-        (
-          this.mouseDownButton === LeftRight.LEFT ||
-          this.mouseDownButton === LeftRight.RIGHT
-        )
-    )
   }
+
+  return (
+    event.originalEvent instanceof PointerEvent &&
+    event.originalEvent.type === 'pointerdown' &&
+      (
+        mouseDownButton.value === LeftRight.LEFT ||
+        mouseDownButton.value === LeftRight.RIGHT
+      )
+  )
 }
 </script>
 
diff --git a/web/siteplan/src/components/FeatureService.vue b/web/siteplan/src/components/FeatureService.vue
index 767e1dc774..3c2ff4e5fc 100644
--- a/web/siteplan/src/components/FeatureService.vue
+++ b/web/siteplan/src/components/FeatureService.vue
@@ -19,7 +19,7 @@
     />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import CollisionFeature from '@/collision/CollisionFeature'
 import JumpToGuid from '@/components/development/JumpToGuid.vue'
 import FeatureInfoPopup from '@/components/FeatureInfoPopup.vue'
@@ -59,12 +59,9 @@ import axios from 'axios'
 import { Feature } from 'ol'
 import Geometry from 'ol/geom/Geometry'
 import Map from 'ol/Map'
-import { nextTick } from 'vue'
-import { Options, Vue } from 'vue-class-component'
-import { SubscribeOptions } from 'vuex'
+import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 import CollisionService from '../collision/CollisionService'
 import SiteplanModel, { SiteplanColorValue } from '../model/SiteplanModel'
-import SvgService from '../service/SvgService'
 import Configuration from '../util/Configuration'
 import CenterMainRouteControl from '../util/Controls/CenterMainRouteControl'
 import ExtentControl from '../util/Controls/ExtentControl'
@@ -75,327 +72,315 @@ import NamedFeatureLayer from '../util/NamedFeatureLayer'
  *
  * @author Stuecker
  */
-@Options({
-  created () {
-    this.registerFeature(store.state.map)
-    this.unsubscribe = store.subscribe(m => {
-      if (m.type === 'setRouteVisible') {
-        this.featureLayers.forEach((layer: NamedFeatureLayer) => {
-          if (layer.getLayerType() === FeatureLayerType.Route) {
-            layer.changed()
-          }
-        })
-      } else if (m.type === 'setSessionState') {
-        this.onModelChange(this.model)
-      }
-    })
-  },
-  components: {
-    JumpToGuid,
-    RouteFeature,
-    FeatureInfoPopup
-  },
-  watch: {
-    model (newmodel) {
-      this.onModelChange(newmodel)
-    }
-  },
+const map: Map = store.state.map
+const featureLayers = shallowRef<NamedFeatureLayer[]>([])
+const model = ref<SiteplanModel | null>(null)
+const listFeature: ILageplanFeature[] = []
+const collisionService = new CollisionService(map)
+let unsubscribeRouteAndSession: (() => void) | undefined
+let unsubscribeSheetCut: (() => void) | undefined
 
-  beforeUnmount () {
-    store.commit('setRouteVisible', false)
-    this.unsubscribe()
-  }
-})
-export default class FeatureService extends Vue {
-  static readonly COLOR_UNCHANGED_VIEW = [140, 150, 157]
-  static readonly COLOR_UNCHANGED_PLANNING = [0, 0, 0]
-  static readonly COLOR_ADDED = [179, 40, 33] // RAL3016
-  static readonly COLOR_REMOVED = [241, 221, 56] // RAL1016
+registerFeature()
 
-  featureLayers: NamedFeatureLayer[] = []
-  unsubscribe: SubscribeOptions | undefined
-  map: Map = store.state.map
-  model: SiteplanModel | null = null
-  svgService: SvgService = new SvgService()
-  listFeature: ILageplanFeature[] = []
-  inLODView = false
-  collisionService = new CollisionService(this.map)
-
-  mounted (): void {
-    this.createLayers()
-    this.loadModel()
-    store.subscribe((m, s) => {
-      if (m.type === 'setSheetCutCRS') {
-        PlanProToolbox.changeLayoutCRS(s.sheetCutCRS)
-        store.commit('setLoading', true)
-        this.loadModel()
+unsubscribeRouteAndSession = store.subscribe(m => {
+  if (m.type === 'setRouteVisible') {
+    featureLayers.value.forEach(layer => {
+      if (layer.getLayerType() === FeatureLayerType.Route) {
+        layer.changed()
       }
     })
+  } else if (m.type === 'setSessionState' && model.value !== null) {
+    onModelChange(model.value)
   }
+})
 
-  private loadModel () {
-    // Download the current model
-    const modelType = store.state.planproModelType
-    axios
-      .get<SiteplanModel>(`/${modelType}.json`)
-      .then(response => {
-        this.modelLoaded(response.data)
-        store.commit('setLoading', false)
-      })
-      .catch(e => {
-        console.error(`Could not load ${modelType}.json`)
-        console.error(e)
-        store.commit('setLoading', false)
-        store.commit('setError', {
-          iserror: true,
-          msg: `Could not load ${modelType}.json`
-        })
-      })
-  }
-
-  unmounted (): void {
-    // Reset stored Map
-    store.commit('resetMap')
+watch(model, newModel => {
+  if (newModel !== null) {
+    onModelChange(newModel)
   }
+})
 
-  onModelChange (newValue: SiteplanModel) {
-    try {
-      // Remove all existing features
-      this.featureLayers.forEach(layer => layer.getSource()?.clear())
-      this.collisionService.reset()
-
-      if (newValue.layoutInfo !== undefined && newValue.layoutInfo !== null && newValue.layoutInfo.length > 0) {
-        store.commit('setSheetCutAvaiable', true)
-      }
-
-      // Load features
-      this.listFeature
-        .flatMap(feature => {
-          if (feature instanceof LayoutInfoFeature) {
-            return feature.getLayoutFeatures(newValue.layoutInfo)
-          }
+onMounted(() => {
+  createLayers()
+  loadModel()
 
-          return this.loadFeatureType(newValue, feature)
-        })
-        .groupBy(c => getFeatureLayer(c))
-        .forEach((features, layerIndex) => {
-          const layer = this.featureLayers.find(
-            c => c.getLayerType() === layerIndex
-          )
-          layer?.getSource()?.addFeatures(features)
-        })
+  unsubscribeSheetCut = store.subscribe((m, s) => {
+    if (m.type === 'setSheetCutCRS') {
+      PlanProToolbox.changeLayoutCRS(s.sheetCutCRS)
+      store.commit('setLoading', true)
+      loadModel()
+    }
+  })
+})
 
-      this.listFeature
-        .sort((a, b) => a.getDelayedFeatureOrder() - b.getDelayedFeatureOrder())
-        .flatMap(feature => this.loadDelayedFeatureType(newValue, feature))
-        .groupBy(c => getFeatureLayer(c))
-        .forEach((features, index) => {
-          const layer = this.featureLayers.find(
-            c => c.getLayerType() === index
-          )
-          layer?.getSource()?.addFeatures(features)
-        })
+onBeforeUnmount(() => {
+  store.commit('setRouteVisible', false)
+  unsubscribeRouteAndSession?.()
+  unsubscribeSheetCut?.()
+})
 
-      // Create bounding boxes
-      CollisionFeature.addCollisionFeatures(this.featureLayers)
-      // Start collision detection
-      this.collisionService.processCollisions(this.featureLayers)
-    } catch (exception) {
-      console.error('Siteplan model update failed')
-      console.error(exception)
-    }
-  }
+onUnmounted(() => {
+  // Reset stored Map
+  store.commit('resetMap')
+})
 
-  private loadFeatureType (
-    model: SiteplanModel,
-    featureClass: ILageplanFeature
-  ): Feature<Geometry>[] {
-    try {
-      // eslint-disable-next-line default-case
-      switch (store.state.sessionState) {
-        case TableType.INITIAL:
-          return [
-            model.commonState,
-            model.initialState,
-            model.changedInitialState
-          ]
-            .map(state => featureClass.getFeatures(state))
-            .flat()
-            .map(feature => featureClass.setFeatureColor(feature))
-        case TableType.FINAL:
-          return [
-            model.commonState,
-            model.finalState,
-            model.changedFinalState
-          ]
-            .map(state => featureClass.getFeatures(state))
-            .flat()
-            .map(feature => featureClass.setFeatureColor(feature))
-        case TableType.DIFF:{
-          const compareState = featureClass.compareChangedState(
-            model.changedInitialState,
-            model.changedFinalState
-          )
-          return [
-            featureClass
-              .getFeatures(model.commonState)
-              .map(feature => featureClass.setFeatureColor(feature)),
-            compareState,
-            featureClass
-              .getFeatures(model.finalState)
-              .map(feature =>
-                featureClass.setFeatureColor(
-                  feature,
-                  SiteplanColorValue.COLOR_ADDED
-                )),
-            featureClass
-              .getFeatures(model.initialState)
-              .map(feature =>
-                featureClass.setFeatureColor(
-                  feature,
-                  SiteplanColorValue.COLOR_REMOVED
-                ))
-          ].flat()
-        }
-      }
-    } catch (e) {
+function loadModel () {
+  // Download the current model
+  const modelType = store.state.planproModelType
+  axios
+    .get<SiteplanModel>(`/${modelType}.json`)
+    .then(response => {
+      modelLoaded(response.data)
+      store.commit('setLoading', false)
+    })
+    .catch(e => {
+      console.error(`Could not load ${modelType}.json`)
       console.error(e)
-      console.error('Cannot load feature ' + featureClass.constructor.name)
       store.commit('setLoading', false)
       store.commit('setError', {
         iserror: true,
-        msg: 'Cannot load ' + featureClass.constructor.name
+        msg: `Could not load ${modelType}.json`
       })
+    })
+}
+
+function onModelChange (newValue: SiteplanModel) {
+  try {
+    // Remove all existing features
+    featureLayers.value.forEach(layer => layer.getSource()?.clear())
+    collisionService.reset()
+
+    if (newValue.layoutInfo !== undefined && newValue.layoutInfo !== null && newValue.layoutInfo.length > 0) {
+      store.commit('setSheetCutAvaiable', true)
     }
-    return []
+
+    // Load features
+    listFeature
+      .flatMap(feature => {
+        if (feature instanceof LayoutInfoFeature) {
+          return feature.getLayoutFeatures(newValue.layoutInfo)
+        }
+
+        return loadFeatureType(newValue, feature)
+      })
+      .groupBy(c => getFeatureLayer(c))
+      .forEach((features, layerIndex) => {
+        const layer = featureLayers.value.find(
+          c => c.getLayerType() === layerIndex
+        )
+        layer?.getSource()?.addFeatures(features)
+      })
+
+    listFeature
+      .sort((a, b) => a.getDelayedFeatureOrder() - b.getDelayedFeatureOrder())
+      .flatMap(feature => loadDelayedFeatureType(newValue, feature))
+      .groupBy(c => getFeatureLayer(c))
+      .forEach((features, index) => {
+        const layer = featureLayers.value.find(
+          c => c.getLayerType() === index
+        )
+        layer?.getSource()?.addFeatures(features)
+      })
+
+    // Create bounding boxes
+    CollisionFeature.addCollisionFeatures(featureLayers.value)
+    // Start collision detection
+    collisionService.processCollisions(featureLayers.value)
+  } catch (exception) {
+    console.error('Siteplan model update failed')
+    console.error(exception)
   }
+}
 
-  private loadDelayedFeatureType (
-    model: SiteplanModel,
-    featureClass: ILageplanFeature
-  ): Feature<Geometry>[] {
-    try {
-      if (featureClass != null) {
-        return featureClass
-          .getDelayedFeatures(model.commonState, this.featureLayers)
+function loadFeatureType (
+  loadedModel: SiteplanModel,
+  featureClass: ILageplanFeature
+): Feature<Geometry>[] {
+  try {
+    // eslint-disable-next-line default-case
+    switch (store.state.sessionState) {
+      case TableType.INITIAL:
+        return [
+          loadedModel.commonState,
+          loadedModel.initialState,
+          loadedModel.changedInitialState
+        ]
+          .map(state => featureClass.getFeatures(state))
+          .flat()
           .map(feature => featureClass.setFeatureColor(feature))
+      case TableType.FINAL:
+        return [
+          loadedModel.commonState,
+          loadedModel.finalState,
+          loadedModel.changedFinalState
+        ]
+          .map(state => featureClass.getFeatures(state))
+          .flat()
+          .map(feature => featureClass.setFeatureColor(feature))
+      case TableType.DIFF: {
+        const compareState = featureClass.compareChangedState(
+          loadedModel.changedInitialState,
+          loadedModel.changedFinalState
+        )
+        return [
+          featureClass
+            .getFeatures(loadedModel.commonState)
+            .map(feature => featureClass.setFeatureColor(feature)),
+          compareState,
+          featureClass
+            .getFeatures(loadedModel.finalState)
+            .map(feature =>
+              featureClass.setFeatureColor(
+                feature,
+                SiteplanColorValue.COLOR_ADDED
+              )),
+          featureClass
+            .getFeatures(loadedModel.initialState)
+            .map(feature =>
+              featureClass.setFeatureColor(
+                feature,
+                SiteplanColorValue.COLOR_REMOVED
+              ))
+        ].flat()
       }
-    } catch (e) {
-      console.error(e)
-      console.error('Cannot load feature')
-      store.commit('setLoading', false)
-      store.commit('setError', {
-        iserror: true,
-        msg: 'Cannot load feature'
-      })
     }
-    return []
+  } catch (e) {
+    console.error(e)
+    console.error('Cannot load feature ' + featureClass.constructor.name)
+    store.commit('setLoading', false)
+    store.commit('setError', {
+      iserror: true,
+      msg: 'Cannot load ' + featureClass.constructor.name
+    })
   }
+  return []
+}
 
-  private createLayers (): void {
-    const baseIndex = 2
-    this.featureLayers = Object.values(FeatureLayerType)
-      .filter(x => isNaN(Number(x)))
-      .map((key, index) => new NamedFeatureLayer(baseIndex + index, index))
-    this.featureLayers.forEach(layer => {
-      this.map.addLayer(layer)
-      if (layer.getLayerType() === FeatureLayerType.SheetCut && !Configuration.developmentMode()) {
-        layer.setVisible(false)
-      }
+function loadDelayedFeatureType (
+  loadedModel: SiteplanModel,
+  featureClass: ILageplanFeature
+): Feature<Geometry>[] {
+  try {
+    if (featureClass != null) {
+      return featureClass
+        .getDelayedFeatures(loadedModel.commonState, featureLayers.value)
+        .map(feature => featureClass.setFeatureColor(feature))
+    }
+  } catch (e) {
+    console.error(e)
+    console.error('Cannot load feature')
+    store.commit('setLoading', false)
+    store.commit('setError', {
+      iserror: true,
+      msg: 'Cannot load feature'
     })
-    store.state.featureLayers = this.featureLayers
-    store.commit('setFeatureLayers', this.featureLayers)
   }
+  return []
+}
 
-  private registerFeature () {
-    this.listFeature.push(new ErrorFeature(this.map))
-    this.listFeature.push(new FMAFeature(this.map))
-    this.listFeature.push(new PlatformFeature(this.map))
-    this.listFeature.push(new PZBFeature(this.map))
-    this.listFeature.push(new PZBGUFeature(this.map))
-    this.listFeature.push(new RouteFeature(this.map))
-    this.listFeature.push(new RouteMarkerFeature(this.map))
-    this.listFeature.push(new SignalFeature(this.map))
-    this.listFeature.push(new SignalRouteMarkerFeature(this.map))
-    this.listFeature.push(new StationFeature(this.map))
-    this.listFeature.push(new TrackDesignationMarkerFeature(this.map))
-    this.listFeature.push(new TrackFeature(this.map))
-    this.listFeature.push(new TrackLockFeature(this.map))
-    this.listFeature.push(new TrackSectionMarkerFeature(this.map))
-    this.listFeature.push(new TrackSwitchEndMarkerFeature(this.map))
-    this.listFeature.push(new TrackSwitchFeature(this.map))
-    this.listFeature.push(new TrackCloseFeature(this.map))
-    this.listFeature.push(new ExternalElementControlFeature(this.map))
-    this.listFeature.push(new LockKeyFeature(this.map))
-    this.listFeature.push(new LayoutInfoFeature(this.map))
-    this.listFeature.push(new CantFeature(this.map))
-    this.listFeature.push(new CantLineFeature(this.map))
-    this.listFeature.push(new UnknownObjectFeature(this.map))
-    this.listFeature.push(new TrackDirectionFeature(this.map))
-  }
+function createLayers (): void {
+  const baseIndex = 2
+  featureLayers.value = Object.values(FeatureLayerType)
+    .filter(x => isNaN(Number(x)))
+    .map((key, index) => new NamedFeatureLayer(baseIndex + index, index))
+  featureLayers.value.forEach(layer => {
+    map.addLayer(layer)
+    if (layer.getLayerType() === FeatureLayerType.SheetCut && !Configuration.developmentMode()) {
+      layer.setVisible(false)
+    }
+  })
+  store.state.featureLayers = featureLayers.value
+  store.commit('setFeatureLayers', featureLayers.value)
+}
 
-  private modelLoaded (model: SiteplanModel) {
-    this.model = model
-    // console.log(JSON.stringify(model))
-    store.commit('setModel', this.model)
+function registerFeature () {
+  listFeature.push(new ErrorFeature(map))
+  listFeature.push(new FMAFeature(map))
+  listFeature.push(new PlatformFeature(map))
+  listFeature.push(new PZBFeature(map))
+  listFeature.push(new PZBGUFeature(map))
+  listFeature.push(new RouteFeature(map))
+  listFeature.push(new RouteMarkerFeature(map))
+  listFeature.push(new SignalFeature(map))
+  listFeature.push(new SignalRouteMarkerFeature(map))
+  listFeature.push(new StationFeature(map))
+  listFeature.push(new TrackDesignationMarkerFeature(map))
+  listFeature.push(new TrackFeature(map))
+  listFeature.push(new TrackLockFeature(map))
+  listFeature.push(new TrackSectionMarkerFeature(map))
+  listFeature.push(new TrackSwitchEndMarkerFeature(map))
+  listFeature.push(new TrackSwitchFeature(map))
+  listFeature.push(new TrackCloseFeature(map))
+  listFeature.push(new ExternalElementControlFeature(map))
+  listFeature.push(new LockKeyFeature(map))
+  listFeature.push(new LayoutInfoFeature(map))
+  listFeature.push(new CantFeature(map))
+  listFeature.push(new CantLineFeature(map))
+  listFeature.push(new UnknownObjectFeature(map))
+  listFeature.push(new TrackDirectionFeature(map))
+}
 
-    // Refresh the vector layer (including features) when the map is rotated
-    const view = this.map.getView()
-    view.on('change:rotation', () => {
-      this.featureLayers.forEach(layer => layer.changed())
-    })
+function modelLoaded (loadedModel: SiteplanModel) {
+  model.value = loadedModel
+  // console.log(JSON.stringify(model))
+  store.commit('setModel', loadedModel)
 
-    // Once the map is loaded, set up LOD limits
-    // This cannot be applied immediately, as a view with a center is required
-    this.map.once('rendercomplete', () => {
-      const lodScale = Configuration.getLodScale()
-      const lodResolution = getResolutionForScale(this.map.getView(), lodScale)
-      const lodZoom = this.map.getView().getZoomForResolution(lodResolution)
-      if (!lodZoom) {
-        return
-      }
+  // Refresh the vector layer (including features) when the map is rotated
+  const view = map.getView()
+  view.on('change:rotation', () => {
+    featureLayers.value.forEach(layer => layer.changed())
+  })
 
-      this.featureLayers
-        .filter(
-          c =>
-            c.getLayerType() !== FeatureLayerType.Track &&
-            c.getLayerType() !== FeatureLayerType.Collision &&
-            c.getLayerType() !== FeatureLayerType.SheetCut
-        )
-        .forEach(c => {
-          c.setMinZoom(lodZoom)
-        })
-    })
+  // Once the map is loaded, set up LOD limits
+  // This cannot be applied immediately, as a view with a center is required
+  map.once('rendercomplete', () => {
+    const lodScale = Configuration.getLodScale()
+    const lodResolution = getResolutionForScale(map.getView(), lodScale)
+    const lodZoom = map.getView().getZoomForResolution(lodResolution)
+    if (!lodZoom) {
+      return
+    }
 
-    // Move the map view to show all features and add the control for it
-    // Avoid doing this during hot reloads
-    if (
-      !this.map
-        .getControls()
-        .getArray()
-        .find(c => c instanceof ExtentControl)
-    ) {
-      const extentControl = new ExtentControl(view, this.featureLayers)
-      this.map.addControl(extentControl)
+    featureLayers.value
+      .filter(
+        c =>
+          c.getLayerType() !== FeatureLayerType.Track &&
+          c.getLayerType() !== FeatureLayerType.Collision &&
+          c.getLayerType() !== FeatureLayerType.SheetCut
+      )
+      .forEach(c => {
+        c.setMinZoom(lodZoom)
+      })
+  })
 
-      const centerControl = new CenterMainRouteControl(view, model)
-      this.map.addControl(centerControl)
+  // Move the map view to show all features and add the control for it
+  // Avoid doing this during hot reloads
+  if (
+    !map
+      .getControls()
+      .getArray()
+      .find(c => c instanceof ExtentControl)
+  ) {
+    const extentControl = new ExtentControl(view, featureLayers.value)
+    map.addControl(extentControl)
 
-      this.map.addControl(new MeasureControl(this.map))
+    const centerControl = new CenterMainRouteControl(view, loadedModel)
+    map.addControl(centerControl)
 
-      // If a center position is available, apply it. Otherwise zoom to fit
-      if (this.model.centerPosition === undefined) {
-        nextTick(() => {
-          extentControl.fit()
-        })
-      } else {
-        nextTick(() => {
-          centerControl.centerView()
-        })
-      }
+    map.addControl(new MeasureControl(map))
 
-      this.map.addInteraction(new FeatureClickInteraction())
+    // If a center position is available, apply it. Otherwise zoom to fit
+    if (model.value?.centerPosition === undefined) {
+      nextTick(() => {
+        extentControl.fit()
+      })
+    } else {
+      nextTick(() => {
+        centerControl.centerView()
+      })
     }
+
+    map.addInteraction(new FeatureClickInteraction())
   }
 }
 </script>
diff --git a/web/siteplan/src/components/Lageplan.vue b/web/siteplan/src/components/Lageplan.vue
index deef7973af..6eb0113656 100644
--- a/web/siteplan/src/components/Lageplan.vue
+++ b/web/siteplan/src/components/Lageplan.vue
@@ -23,52 +23,48 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { store } from '@/store'
 import 'material-design-icons/iconfont/material-icons.css'
-import FeatureService from './FeatureService'
-import MapContainer from './MapContainer'
-
-export default {
-  name: 'Lageplan',
-  components: {
-    MapContainer,
-    FeatureService
-  },
-  data: () => ({
-    loading: true,
-    error: {
-      iserror: false,
-      msg: ''
-    },
-    unsubscribe: undefined
-  }),
-  created () {
-    this.unsubscribe = store.subscribe((m, s) => {
-      if (m.type === 'setLoading') {
-        this.loading = s.loading
-      }
-
-      if (m.type === 'setError') {
-        this.error = s.error
-      }
-    })
-  },
-  beforeUnmount () {
-    this.unsubscribe()
-  },
-  methods: {
-    alertBox () {
-      alert(this.error.msg)
-    },
-    loadingIndicatorState () {
-      return this.loading ? 'visible' : 'hidden'
-    },
-    loadingIndicatorAnimationState () {
-      return this.loading ? 'running' : 'paused'
-    }
+import FeatureService from './FeatureService.vue'
+import MapContainer from './MapContainer.vue'
+import { onBeforeUnmount, ref } from 'vue'
+
+const loading = ref(true)
+
+const error = ref({
+  iserror: false,
+  msg: ''
+})
+
+let unsubscribe: (() => void) | undefined
+
+unsubscribe = store.subscribe((m, s) => {
+  if (m.type === 'setLoading') {
+    loading.value = s.loading
   }
+
+  if (m.type === 'setError') {
+    error.value = s.error
+  }
+})
+
+onBeforeUnmount(() => {
+  unsubscribe?.()
+})
+
+function alertBox () {
+  alert(error.value.msg)
+}
+
+function loadingIndicatorState () {
+  return loading.value ? 'visible' : 'hidden'
 }
+
+function loadingIndicatorAnimationState () {
+  return loading.value ? 'running' : 'paused'
+}
+
 </script>
 <style>
 #lageplan {
diff --git a/web/siteplan/src/components/MapContainer.vue b/web/siteplan/src/components/MapContainer.vue
index d47fab6875..4bdbf49817 100644
--- a/web/siteplan/src/components/MapContainer.vue
+++ b/web/siteplan/src/components/MapContainer.vue
@@ -10,13 +10,13 @@
   <div class="map-container">
     <div
       id="map-root"
-      ref="map-root"
+      ref="mapRoot"
     >
       <div class="custom-control-container">
-        <MapSourceSelection v-if="isSiteplan()" />
-        <LayerControl v-if="isDevelopmentMode && isSiteplan()" />
+        <MapSourceSelection v-if="isSiteplan" />
+        <LayerControl v-if="isDevelopmentMode && isSiteplan" />
         <ModelSummaryControl v-if="isDevelopmentMode" />
-        <SettingEditor v-if="isSiteplan()" />
+        <SettingEditor v-if="isSiteplan" />
       </div>
     </div>
     <div
@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import LayerControl from '@/components/development/LayerControl.vue'
 import ModelSummaryControl from '@/components/development/ModelSummaryControl.vue'
 import SettingEditor from '@/components/development/SettingEditor.vue'
@@ -41,122 +41,102 @@ import { getPixelProMeterAtScale, setMapScale } from '@/util/MapScale'
 import OlMap from 'ol/Map'
 import 'ol/ol.css'
 import OlView from 'ol/View'
-import { Options, Vue } from 'vue-class-component'
+import { computed, onMounted, ref } from 'vue'
 
-/**
- * Container for the open layers map
- *
- * @author Stuecker
- */
-@Options({
-  props: {},
-  components: {
-    MapSourceSelection,
-    LayerControl,
-    ModelSummaryControl,
-    SettingEditor
-  }
-})
-export default class MapContainer extends Vue {
-  isDevelopmentMode = Configuration.developmentMode()
-  map: OlMap = store.state.map
-  $refs!: {
-    [ 'map-root' ]: HTMLInputElement
+const isDevelopmentMode = Configuration.developmentMode()
+const map: OlMap = store.state.map
+const mapRoot = ref<HTMLDivElement | null>(null)
+
+const scaleLocked = ref(0)
+let scaleLine: ScaleBarControl | undefined
+
+const isSiteplan = computed(() =>
+  store.state.planproModelType === PlanProModelType.SITEPLAN)
+
+function getMapScale (): number {
+  return scaleLine!.getScaleForResolution()
+}
+
+onMounted((): void => {
+  const view = new OlView()
+  view.setConstrainResolution(false)
+  view.setRotation(0)
+
+  if (store.state.planproModelType === PlanProModelType.SITEPLAN) {
+    scaleLine = new ScaleBarControl(() => {
+      scaleLocked.value = Configuration.getInternalDefaultLodScale()
+      setMapScale(map.getView(), scaleLocked.value)
+      getPixelProMeterAtScale(
+        map,
+        map.getView(),
+        100
+      )
+    })
+
+    map.addControl(scaleLine)
+
+    map.on('rendercomplete', () => {
+      const ALLOWED_OFFSET = 0.01
+
+      if (!scaleLocked.value) {
+        return
+      }
+
+      const scale = getMapScale()
+      if (
+        scale > scaleLocked.value + ALLOWED_OFFSET ||
+        scale < scaleLocked.value - ALLOWED_OFFSET
+      ) {
+        setMapScale(map.getView(), scaleLocked.value)
+      }
+    })
   }
 
-  scaleLocked = 0
-  scaleLine!: ScaleBarControl
-
-  mounted (): void {
-    // Initialize view
-    const view = new OlView()
-    view.setConstrainResolution(false)
-    view.setRotation(0)
-
-    // Allow clicking the scale bar to force a 1:1000 scale
-    if (store.state.planproModelType === PlanProModelType.SITEPLAN) {
-      this.scaleLine = new ScaleBarControl(() => {
-        this.scaleLocked = Configuration.getInternalDefaultLodScale()
-        setMapScale(this.map.getView(), this.scaleLocked)
-        getPixelProMeterAtScale(
-          this.map,
-          this.map.getView(),
-          100
-        )
-      })
-      this.map.addControl(this.scaleLine)
-      // Reapply zoom level after moving
-      this.map.on('rendercomplete', () => {
-      // Allow a minimal offset to avoid constant rescaling
-        const ALLOWED_OFFSET = 0.01
-        if (!this.scaleLocked) {
-          return
-        }
-
-        const scale = this.getMapScale()
-        if (
-          scale > this.scaleLocked + ALLOWED_OFFSET ||
-        scale < this.scaleLocked - ALLOWED_OFFSET
-        ) {
-          setMapScale(this.map.getView(), this.scaleLocked)
-        }
-      })
+  map.once('rendercomplete', () => {
+    const scaleValue = Configuration.getExportScaleValue() / 4
+    if (store.state.pixelPerMeterAtScale.has(scaleValue)) {
+      return
     }
 
-    this.map.once('rendercomplete', () => {
-      // the export to image should have high resolution
-      // than scale value to avoid blurred symbols.
-      const scaleValue = Configuration.getExportScaleValue() / 4
-      if (store.state.pixelPerMeterAtScale.has(scaleValue)) {
+    getPixelProMeterAtScale(
+      map,
+      map.getView(),
+      scaleValue
+    ).then(pixelProMeter => {
+      if (pixelProMeter === undefined) {
         return
       }
 
-      getPixelProMeterAtScale(
-        this.map,
-        this.map.getView(),
-        scaleValue
-      ).then(pixelProMeter => {
-        if (pixelProMeter === undefined) {
-          return
-        }
-
-        // Set the pixel pro meter value in the store
-        store.commit('setPixelProMeter', {
-          scaleValue: Configuration.getExportScaleValue() / 4,
-          ppm: Math.round(pixelProMeter)
-        })
-        console.log(pixelProMeter)
-        store.commit('setCustomPpm', Math.round(pixelProMeter))
+      store.commit('setPixelProMeter', {
+        scaleValue: Configuration.getExportScaleValue() / 4,
+        ppm: Math.round(pixelProMeter)
       })
+      console.log(pixelProMeter)
+      store.commit('setCustomPpm', Math.round(pixelProMeter))
     })
+  })
 
-    // Disable locked scale after manually zooming
-    this.map.on('movestart', e => {
-      const previousZoom = e.frameState?.viewState.zoom
-      const currentZoom = this.map.getView().getZoom()
-      if (previousZoom !== currentZoom) {
-        this.scaleLocked = 0
-      }
-    })
-    const rotateLeftControl = new RotateViewControl(false, 30, view)
-    const rotateRightControl = new RotateViewControl(true, -30, view)
+  map.on('movestart', e => {
+    const previousZoom = e.frameState?.viewState.zoom
+    const currentZoom = map.getView().getZoom()
+    if (previousZoom !== currentZoom) {
+      scaleLocked.value = 0
+    }
+  })
 
-    this.map.addControl(rotateLeftControl)
-    this.map.addControl(rotateRightControl)
-    this.map.addControl(new ExportControl(this.map))
+  const rotateLeftControl = new RotateViewControl(false, 30, view)
+  const rotateRightControl = new RotateViewControl(true, -30, view)
 
-    this.map.setTarget(this.$refs['map-root'])
-    this.map.setView(view)
-  }
+  map.addControl(rotateLeftControl)
+  map.addControl(rotateRightControl)
+  map.addControl(new ExportControl(map))
 
-  getMapScale (): number {
-    return this.scaleLine.getScaleForResolution()
+  if (mapRoot.value) {
+    map.setTarget(mapRoot.value)
   }
 
-  isSiteplan () {
-    return store.state.planproModelType === PlanProModelType.SITEPLAN
-  }
-}
+  map.setView(view)
+})
 </script>
 
 <style>
diff --git a/web/siteplan/src/components/MapSourceSelection.vue b/web/siteplan/src/components/MapSourceSelection.vue
index 537b6687d3..0890bfb014 100644
--- a/web/siteplan/src/components/MapSourceSelection.vue
+++ b/web/siteplan/src/components/MapSourceSelection.vue
@@ -51,7 +51,7 @@
   </SideInfoControl>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import SideInfoControl from '@/components/SideInfoControl.vue'
 import { store } from '@/store'
 import 'material-design-icons/iconfont/material-icons.css'
@@ -59,7 +59,7 @@ import TileLayer from 'ol/layer/Tile'
 import VectorTileLayer from 'ol/layer/VectorTile'
 import OlMap from 'ol/Map'
 import TileSource from 'ol/source/Tile'
-import { Options, Vue } from 'vue-class-component'
+import { onMounted, ref, watch } from 'vue'
 import { MapSource, MapSourceType } from '../util/MapSource'
 import ArcGisSatellite from '../util/MapSources/ArcGisSatellite'
 import DigitalOrthophotosExtern from '../util/MapSources/DigitalOrthophotosExtern'
@@ -74,78 +74,65 @@ import OpenStreetMap from '../util/MapSources/OpenStreetMap'
 import Sentinel2DE from '../util/MapSources/Sentinel2DE'
 import TopPlusOpen from '../util/MapSources/TopPlusOpen'
 
-/**
- * Selector for a tile layer with multiple sources
- *
- * @author Stuecker
- */
-@Options({
-  components: {
-    SideInfoControl
-  },
-  watch: {
-    selected (selectedMap: string) {
-      const source = this.options.filter(
-        (x: MapSource) => x.getIdentifier() === selectedMap
-      )[0]
-      this.imageLayer.setSource(null)
-      this.vectorLayer.setSource(null)
-      source.setAsSource(this.imageLayer, this.vectorLayer)
+const map: OlMap = store.state.map
+const emptyMap: EmptyMap = new EmptyMap()
+const selected = ref(store.state.selectedSourceMap)
+const vectorLayer: VectorTileLayer = new VectorTileLayer()
+const imageLayer: TileLayer<TileSource> = new TileLayer()
+
+const options: MapSource[] = [
+  emptyMap,
+  new OpenStreetMap(),
+  new OpenRailwayMap(),
+  new TopPlusOpen(),
+  new MapboxTop(),
+  new HereMapsTop(),
+  new ArcGisSatellite(),
+  new Sentinel2DE(),
+  new DigitalOrthophotosIntern(),
+  new DigitalOrthophotosExtern(),
+  new MapboxSat(),
+  new HereMapsSat()
+].filter(x => x.isEnabled())
+
+watch(selected, (selectedMap: string) => {
+  const source = options.filter(
+    (x: MapSource) => x.getIdentifier() === selectedMap
+  )[0]
+  imageLayer.setSource(null)
+  vectorLayer.setSource(null)
+  source.setAsSource(imageLayer, vectorLayer)
+})
+
+onMounted((): void => {
+  vectorLayer.setZIndex(0)
+  imageLayer.setZIndex(0)
+  map.addLayer(vectorLayer)
+  map.addLayer(imageLayer)
+  store.subscribe(m => {
+    if (m.type === 'setSourceMap') {
+      selected.value = m.payload
     }
-  }
+  })
 })
-export default class MapSourceSelection extends Vue {
-  map: OlMap = store.state.map
-  emptyMap: EmptyMap = new EmptyMap()
-  selected: string = store.state.selectedSourceMap
-  vectorLayer: VectorTileLayer = new VectorTileLayer()
-  imageLayer: TileLayer<TileSource> = new TileLayer()
-  isOpenMenu!: boolean
-  options: MapSource[] = [
-    this.emptyMap,
-    new OpenStreetMap(),
-    new OpenRailwayMap(),
-    new TopPlusOpen(),
-    new MapboxTop(),
-    new HereMapsTop(),
-    new ArcGisSatellite(),
-    new Sentinel2DE(),
-    new DigitalOrthophotosIntern(),
-    new DigitalOrthophotosExtern(),
-    new MapboxSat(),
-    new HereMapsSat()
-  ].filter(x => x.isEnabled())
-
-  mounted (): void {
-    this.vectorLayer.setZIndex(0)
-    this.imageLayer.setZIndex(0)
-    this.map.addLayer(this.vectorLayer)
-    this.map.addLayer(this.imageLayer)
-    store.subscribe(m => {
-      if (m.type === 'setSourceMap') {
-        this.selected = m.payload
-      }
-    })
-  }
 
-  getDisplayName (option: MapSource): string {
-    return option.getName() ? option.getName() : option.getType()
-  }
+function getDisplayName (option: MapSource): string {
+  return option.getName() ? option.getName() : option.getType()
+}
 
-  getOptionIcon (option: MapSource): string {
-    switch (option.getType()) {
-      case MapSourceType.Topological:
-        return 'public'
-      case MapSourceType.Satellite:
-        return 'satellite'
-      default:
-        return 'block'
-    }
+function getOptionIcon (option: MapSource): string {
+  switch (option.getType()) {
+    case MapSourceType.Topological:
+      return 'public'
+    case MapSourceType.Satellite:
+      return 'satellite'
+    default:
+      return 'block'
   }
+}
 
-  selectedMap (option: MapSource): void {
-    this.selected = option.getIdentifier()
-  }
+function selectedMap (option: MapSource): void {
+  selected.value = option.getIdentifier()
 }
 </script>
 
diff --git a/web/siteplan/src/components/SideInfoControl.vue b/web/siteplan/src/components/SideInfoControl.vue
index d0ad5cef95..4d2f93ebd2 100644
--- a/web/siteplan/src/components/SideInfoControl.vue
+++ b/web/siteplan/src/components/SideInfoControl.vue
@@ -48,49 +48,43 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 /**
  * Map control that shows information information in a box besides the map
  * @author Peters
  */
 import { store } from '@/store'
-import { Options, Vue } from 'vue-class-component'
-import { SubscribeOptions } from 'vuex'
+import { ref } from 'vue'
 
-@Options({
-  props: {
-    title: String
+defineProps<{
+  title?: string
+}>()
+
+const collapsed = ref(true)
+
+function setCollapsed (val: boolean): void {
+  const contentContainer = document.getElementById('side-info-container')
+  if (!contentContainer) {
+    console.warn('side-info-container not found')
+    return
   }
-})
-export default class SideInfoControl extends Vue {
-  unsubscribe: SubscribeOptions | undefined
-  collapsed = true
-  title!: string
-
-  setCollapsed (val: boolean) {
-    const contentContainer = document.getElementById('side-info-container')
-    if (!contentContainer) {
-      console.warn('side-info-container not found')
-      return
-    }
 
-    if (!val) {
-      // make sure other SideInfoControls are closed before displaying own content
-      const closeButton = contentContainer.getElementsByClassName(
-        'side-info-close'
-      )[0] as HTMLElement
-      if (closeButton) {
-        closeButton.click()
-      }
+  if (!val) {
+    // make sure other SideInfoControls are closed before displaying own content
+    const closeButton = contentContainer.getElementsByClassName(
+      'side-info-close'
+    )[0] as HTMLElement
+    if (closeButton) {
+      closeButton.click()
     }
-
-    this.collapsed = val
-    contentContainer.setAttribute(
-      'class',
-      this.collapsed ? 'side-info-container-closed' : 'side-info-container'
-    )
-    store.state.map.updateSize()
   }
+
+  collapsed.value = val
+  contentContainer.setAttribute(
+    'class',
+    collapsed.value ? 'side-info-container-closed' : 'side-info-container'
+  )
+  store.state.map.updateSize()
 }
 </script>
 
diff --git a/web/siteplan/src/components/toolbar/KatalogMenuBar.vue b/web/siteplan/src/components/toolbar/KatalogMenuBar.vue
index c5b6678e0c..440cabe2c4 100644
--- a/web/siteplan/src/components/toolbar/KatalogMenuBar.vue
+++ b/web/siteplan/src/components/toolbar/KatalogMenuBar.vue
@@ -11,7 +11,7 @@
     <ul id="katalogMenu">
       <li
         id="katalog"
-        tabIndex="1"
+        tabindex="1"
         class="menuItem"
         @click="onSelected('katalog')"
       >
@@ -19,7 +19,7 @@
       </li>
       <li
         id="einzeln"
-        tabIndex="2"
+        tabindex="2"
         class="menuItem"
         @click="onSelected('einzeln')"
       >
@@ -27,7 +27,7 @@
       </li>
       <li
         id="bruecke"
-        tabIndex="3"
+        tabindex="3"
         class="menuItem"
         @click="onSelected('bruecke')"
       >
@@ -36,30 +36,33 @@
     </ul>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 /**
  * Menu of Catalog Page
  * @author Truong
  */
-import { Vue } from 'vue-class-component'
 
-export default class KatalogMenuBar extends Vue {
-  mounted (): void {
-    const mode = this.$router.currentRoute.value.query.mode
-    if (mode) {
-      const ele = document.getElementById(mode.toString())
-      ele?.focus()
-    }
-  }
+import { onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
 
-  onSelected (value: string): void {
-    this.$router.push({
-      path: '/svg',
-      query: {
-        mode: value
-      }
-    })
+onMounted(() => {
+  const mode = route.query.mode
+  if (mode) {
+    const ele = document.getElementById(mode.toString())
+    ele?.focus()
   }
+})
+
+function onSelected (value: string): void {
+  router.push({
+    path: '/svg',
+    query: {
+      mode: value
+    }
+  })
 }
 </script>
 <style scoped>
diff --git a/web/siteplan/src/components/toolbar/Menubar.vue b/web/siteplan/src/components/toolbar/Menubar.vue
index f3870a85fa..e2e198cbdd 100644
--- a/web/siteplan/src/components/toolbar/Menubar.vue
+++ b/web/siteplan/src/components/toolbar/Menubar.vue
@@ -8,44 +8,15 @@
  -->
 <template>
   <div id="menubar">
-    <KatalogMenuBar v-if="showCatalogMenu" />
+    <KatalogMenuBar v-if="$route.path === '/svg'" />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 /**
  * Menu bar
  * @author Truong
  */
-import { Options, Vue } from 'vue-class-component'
 import KatalogMenuBar from './KatalogMenuBar.vue'
-
-@Options({
-  components: {
-    KatalogMenuBar
-  },
-  created () {
-    const currentpath = this.$router.currentRoute.value.path
-    switch (currentpath) {
-      case '/':
-        this.showLageplanMenu = true
-        break
-      case '/svg':
-        this.showCatalogMenu = true
-        break
-      default:
-        break
-    }
-  }
-})
-export default class Menubar extends Vue {
-  showLageplanMenu = false
-  showCatalogMenu = false
-
-  resetState (): void {
-    this.showLageplanMenu = false
-    this.showCatalogMenu = false
-  }
-}
 </script>
 <style scoped>
 #menubar {
diff --git a/web/siteplan/src/components/toolbar/Toolbar.vue b/web/siteplan/src/components/toolbar/Toolbar.vue
index 9c893d7a22..d283cf7078 100644
--- a/web/siteplan/src/components/toolbar/Toolbar.vue
+++ b/web/siteplan/src/components/toolbar/Toolbar.vue
@@ -44,91 +44,89 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import FeatureSearch from '@/components/development/FeatureSearch.vue'
 import Configuration from '@/util/Configuration'
-import { Options, Vue } from 'vue-class-component'
-import { SubscribeOptions } from 'vuex'
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 
 /**
  * Lageplan Toolbar
  * @author Truong
  */
-@Options({
-  props: {
-    model: Object
-  },
-  components: {
-    FeatureSearch
-  },
-  watch: {
-    $route () {
-      this.resetBtnColor()
-      const currentpath = this.$router.currentRoute.value.path
-      switch (currentpath) {
-        case '/':
-          this.homebtncolor = this.onSelectBtnColor
-          break
-        case '/svg':
-          this.symbolbtncolor = this.onSelectBtnColor
-          break
-        default:
-          break
-      }
-    }
-  },
-  emits: ['show-menu']
-})
-export default class Toolbar extends Vue {
-  developmentOptions = false
-  homeBtnColor = ''
-  symbolBtnColor = ''
-  menuBtnColor = ''
-  onSelectBtnColor = '#848484'
-  unsubscribe: SubscribeOptions | undefined
-  mounted (): void {
-    this.developmentOptions = Configuration.developmentMode()
+defineProps({
+  model:
+  {
+    type: Object,
+    default: null
   }
+})
 
-  toSvgCatalog (): void {
-    this.$emit('show-menu', false)
-    this.menuBtnColor = ''
-    this.$router.push({
-      path: '/svg',
-      query: {
-        mode: 'katalog'
-      }
-    })
-  }
+const emit = defineEmits(['show-menu'])
 
-  isCatalogPage (): boolean {
-    const currentpath = this.$router.currentRoute.value.path
-    return currentpath === '/svg'
-  }
+const router = useRouter()
+const developmentOptions = ref(false)
+const homeBtnColor = ref('')
+const symbolBtnColor = ref('')
+const menuBtnColor = ref('')
+const onSelectBtnColor = ref('#848484')
 
-  goHome (): void {
-    this.$emit('showMenu', false)
-    this.menuBtnColor = ''
-    this.$router.push('/')
-  }
+onMounted(() => {
+  developmentOptions.value = Configuration.developmentMode()
+})
 
-  resetBtnColor (): void {
-    this.homeBtnColor = ''
-    this.symbolBtnColor = ''
+watch(router.currentRoute, currentRoute => {
+  resetBtnColor()
+  switch (currentRoute.path) {
+    case '/':
+      homeBtnColor.value = onSelectBtnColor.value
+      break
+    case '/svg':
+      symbolBtnColor.value = onSelectBtnColor.value
+      break
+    default:
+      break
   }
+})
 
-  onMenuClick (): void {
-    if (this.menuBtnColor !== this.onSelectBtnColor) {
-      this.menuBtnColor = this.onSelectBtnColor
-      this.$emit('showMenu', true)
-    } else {
-      this.menuBtnColor = ''
-      this.$emit('showMenu', false)
+function toSvgCatalog (): void {
+  emit('show-menu', false)
+  menuBtnColor.value = ''
+  router.push({
+    path: '/svg',
+    query: {
+      mode: 'katalog'
     }
+  })
+}
+
+function isCatalogPage (): boolean {
+  const currentpath = router.currentRoute.value.path
+  return currentpath === '/svg'
+}
+
+function goHome (): void {
+  emit('show-menu', false)
+  menuBtnColor.value = ''
+  router.push('/')
+}
+
+function resetBtnColor (): void {
+  homeBtnColor.value = ''
+  symbolBtnColor.value = ''
+}
+
+function onMenuClick (): void {
+  if (menuBtnColor.value !== onSelectBtnColor.value) {
+    menuBtnColor.value = onSelectBtnColor.value
+    emit('show-menu', true)
+  } else {
+    menuBtnColor.value = ''
+    emit('show-menu', false)
   }
 }
 </script>
-<style scope>
+<style scoped>
 .toolbarItem {
   cursor: pointer;
   display: flex;