From 26f286065b8c37dfcf350f7ac8120577df2c1cad Mon Sep 17 00:00:00 2001
From: Levi Szamek <levi@szamek.de>
Date: Tue, 25 Mar 2025 16:23:11 +0100
Subject: [PATCH 01/29] feat: add conflation project

---
 src/components/ConflationProject.vue     | 256 +++++++++++++++++++++++
 src/components/ConflationProjectTask.vue | 157 ++++++++++++++
 src/config/projectTypes.ts               |   4 +
 src/views/ProjectView.vue                |   2 +
 4 files changed, 419 insertions(+)
 create mode 100644 src/components/ConflationProject.vue
 create mode 100644 src/components/ConflationProjectTask.vue

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
new file mode 100644
index 0000000..22ce1a9
--- /dev/null
+++ b/src/components/ConflationProject.vue
@@ -0,0 +1,256 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Collection } from 'ol'
+import createInformationPages from '@/utils/createInformationPages'
+import { theme } from '@/plugins/vuetify'
+import OptionButtons from '@/components/OptionButtons.vue'
+import ProjectHeader from '@/components/ProjectHeader.vue'
+import ProjectInfo from '@/components/ProjectInfo.vue'
+import TaskProgress from '@/components/TaskProgress.vue'
+import ValidateProjectInstructions from '@/components/ValidateProjectInstructions.vue'
+import ValidateProjectTutorial from '@/components/ValidateProjectTutorial.vue'
+import ValidateProjectTask from './ValidateProjectTask.vue'
+
+export default defineComponent({
+  components: {
+    validateProjectInstructions: ValidateProjectInstructions,
+    validateProjectTutorial: ValidateProjectTutorial,
+    validateProjectTask: ValidateProjectTask,
+    taskProgress: TaskProgress,
+    optionButtons: OptionButtons,
+    projectHeader: ProjectHeader,
+    projectInfo: ProjectInfo,
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+    first: {
+      type: Boolean,
+      default: false,
+    },
+    options: {
+      type: Array,
+      default() {
+        return [
+          {
+            mdiIcon: 'mdi-check-bold',
+            description: `The shape does outline a building in the image`,
+            iconColor: '#bbcb7d',
+            shortkey: 1,
+            title: 'Yes',
+            value: 1,
+          },
+          {
+            mdiIcon: 'mdi-close-thick',
+            description: `The shape doesn't match a building in the image`,
+            iconColor: '#fd5054',
+            shortkey: 2,
+            title: 'No',
+            value: 0,
+          },
+          {
+            mdiIcon: 'mdi-minus-thick',
+            description: `If you're not sure or there is cloud cover / bad imagery.`,
+            iconColor: '#adadad',
+            title: 'Not sure',
+            shortkey: 3,
+            value: 2,
+          },
+        ]
+      },
+    },
+    project: {
+      type: Object,
+      required: true,
+    },
+    tasks: {
+      type: Array,
+      required: true,
+    },
+    tutorial: {
+      type: Object,
+      require: false,
+    },
+  },
+  data() {
+    return {
+      arrowKeys: true,
+      center: [0, 0],
+      results: {},
+      startTime: null,
+      taskFeatures: new Collection(),
+      taskId: undefined,
+      taskIndex: 0,
+      transparent: false,
+      zoom: 3,
+    }
+  },
+  inject: {
+    logMappingStarted: 'logMappingStarted',
+    saveResults: 'saveResults',
+  },
+  computed: {
+    colors() {
+      const colors = theme
+      return colors
+    },
+    mission() {
+      const message = this.$t('validateProject.doesTheShapeOutline', {
+        feature: this.project?.lookFor,
+      })
+      return message
+    },
+  },
+  methods: {
+    addResult(value) {
+      this.results[this.taskId] = value
+    },
+    back() {
+      if (!this.taskIndex <= 0) {
+        this.taskIndex--
+        this.taskId = this.tasks[this.taskIndex].taskId
+      }
+    },
+    createInformationPages,
+    // fallback information pages of mobile app adapted to web app:
+    createFallbackInformationPages(tutorial) {
+      if (tutorial.lookFor) {
+        return [
+          {
+            blocks: [
+              {
+                blockNumber: 1,
+                blockType: 'text',
+                // web app displays shapes on a web map rather than on a single image
+                textDescription:
+                  "You'll see a shape on an interactive imagery map. Use the buttons to answer.",
+              },
+              {
+                blockNumber: 2,
+                blockType: 'text',
+                // instead of 'buildings', we get the feature of interest from Firebase (similar as in Find projects)
+                textDescription: `Does the shape outline a ${tutorial.lookFor}?`,
+              },
+              {
+                blockNumber: 3,
+                blockType: 'text',
+                textDescription:
+                  "Every time you select an option, you'll be shown a new shape and image.",
+              },
+            ],
+            pageNumber: 1,
+            title: 'What to look for',
+          },
+        ]
+      } else {
+        return undefined
+      }
+    },
+    forward() {
+      if (this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
+        this.taskIndex++
+        this.taskId = this.tasks[this.taskIndex].taskId
+        console.log("heeee", this.tasks[this.taskIndex])
+      }
+    },
+    isAnswered() {
+      const result = this.results[this.taskId]
+      const defined = result !== undefined
+      return defined
+    },
+  },
+  emits: ['created'],
+  created() {
+    this.startTime = new Date().toISOString()
+    this.taskId = this.tasks[this.taskIndex].taskId
+    this.$emit('created')
+    this.logMappingStarted(this.project.projectType)
+  },
+})
+</script>
+
+<template>
+  <project-header :mission="mission" :title="project.projectTopic">
+    <v-btn
+      :title="$t('findProject.toggleOpacity')"
+      :icon="'mdi-eye'.concat(transparent ? '-off' : '')"
+      @click="transparent = !transparent"
+      color="primary"
+    />
+    <v-btn
+      :title="$t('tileMap.resetView')"
+      icon="mdi-fit-to-screen-outline"
+      @click="$refs['validate-project-task']?.fitView()"
+      color="primary"
+    />
+    <project-info
+      ref="projectInfo"
+      :first="first"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
+      :manualUrl="project?.manualUrl"
+      @toggle-dialog="arrowKeys = !arrowKeys"
+    >
+      <template #instructions>
+        <validate-project-instructions :mission="mission" :options="options" />
+      </template>
+      <template #tutorial>
+        <validate-project-tutorial
+          :tutorial="tutorial"
+          :options="options"
+          @tutorialComplete="$refs.projectInfo?.toggleDialog"
+        />
+      </template>
+    </project-info>
+  </project-header>
+  <v-container class="ma-0 pa-0">
+    <validate-project-task
+      ref="validate-project-task"
+      :task="tasks?.[taskIndex]"
+      :project="project"
+      :transparent="transparent"
+    />
+  </v-container>
+  <option-buttons
+    v-if="taskId"
+    :options="options"
+    :result="results[taskId]"
+    :taskId="taskId"
+    @addResult="addResult"
+  />
+  <v-toolbar color="white" density="compact" extension-height="20" extended>
+    <v-spacer />
+    <v-btn
+      :title="$t('validateProject.moveLeft')"
+      icon="mdi-chevron-left"
+      color="secondary"
+      :disabled="taskIndex <= 0"
+      @click="back"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
+      @shortkey="back"
+    />
+    <v-btn
+      :title="$t('projectView.saveResults')"
+      icon="mdi-content-save"
+      color="primary"
+      :disabled="Object.keys(results).length < tasks.length"
+      @click="saveResults(results, startTime)"
+    />
+    <v-btn
+      :title="$t('validateProject.moveRight')"
+      icon="mdi-chevron-right"
+      color="secondary"
+      :disabled="!isAnswered() || taskIndex + 1 === tasks.length"
+      @click="forward"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
+      @shortkey="forward"
+    />
+    <v-spacer />
+    <template #extension>
+      <task-progress :progress="taskIndex + isAnswered()" :total="tasks.length" />
+    </template>
+  </v-toolbar>
+</template>
+
+<style scoped></style>
diff --git a/src/components/ConflationProjectTask.vue b/src/components/ConflationProjectTask.vue
new file mode 100644
index 0000000..1172b4e
--- /dev/null
+++ b/src/components/ConflationProjectTask.vue
@@ -0,0 +1,157 @@
+<script lang="ts">
+import { theme } from '@/plugins/vuetify'
+import hex2rgb from '@/utils/hex2rgb'
+import makeXyzUrl from '@/utils/makeXyzUrl'
+import type { OlMap, OlView } from 'node_modules/vue3-openlayers/dist/components/map'
+import type { OlSourceVector } from 'node_modules/vue3-openlayers/dist/components/sources'
+import { Collection } from 'ol'
+import { GeoJSON } from 'ol/format'
+import { type PropType, defineComponent } from 'vue'
+
+interface Task {
+  taskId: string
+  geojson: object
+}
+
+export interface Project {
+  tileServer: {
+    apiKey: string
+    credits: string
+    name: string
+    url: string
+    maxZoom?: number
+    imagerySet?: string
+  }
+}
+
+export default defineComponent({
+  props: {
+    task: {
+      type: Object as PropType<Task>,
+      required: true,
+    },
+    project: {
+      type: Object as PropType<Project>,
+      required: true,
+    },
+    transparent: {
+      type: Boolean,
+    },
+    compact: {
+      type: Boolean,
+    },
+  },
+  data(): {
+    center: [number, number]
+    results: Record<string, number>
+    startTime: string | null
+    currentTaskIndex: number
+    zoom: number
+  } {
+    return {
+      center: [0, 0],
+      results: {},
+      startTime: null,
+      currentTaskIndex: 0,
+      zoom: 3,
+    }
+  },
+  updated() {
+    this.fitView()
+  },
+  computed: {
+    mapStyle() {
+      if (this.compact) {
+        return { height: 'max(calc(70vh - 375px), 300px)' }
+      }
+
+      return {
+        height: 'max(calc(100vh - 375px), 600px)',
+      }
+    },
+    xyzUrl() {
+      return makeXyzUrl(this.project.tileServer)
+    },
+    strokeColor() {
+      const color = hex2rgb(theme.light.accent, this.transparent ? 0.4 : 1)
+      return color
+    },
+    maxZoom() {
+      // return this.project.tileServer.maxZoom ?? 19;
+      return this.project.tileServer.maxZoom ?? 20
+    },
+    taskFeatures() {
+      const features = new Collection()
+      const geoJson = new GeoJSON()
+
+      const geom = this.task.geojson
+      const feature = { geometry: geom, type: 'Feature' }
+      const options = {
+        dataProjection: 'EPSG:4326',
+        featureProjection: 'EPSG:3857',
+      }
+
+      const newFeature = geoJson.readFeature(feature, options)
+      features.push(newFeature)
+
+      return features
+    },
+  },
+  methods: {
+    fitView(duration = 600, delay = 100) {
+      const map = (this.$refs.map as InstanceType<typeof OlMap>).map
+      const mapView = this.$refs.mapView as InstanceType<typeof OlView>
+      const extent = (
+        this.$refs.taskSource as InstanceType<typeof OlSourceVector>
+      ).source.getExtent()
+
+      if (!extent.some((coordinate) => coordinate == Infinity)) {
+        setTimeout(() => {
+          mapView.fit(extent, {
+            size: map.getSize(),
+            padding: this.compact ? [10, 10, 10, 10] : [20, 20, 20, 20],
+            maxZoom: this.maxZoom,
+            duration: duration,
+          })
+        }, delay)
+      }
+    },
+  },
+})
+</script>
+
+<template>
+  <ol-map
+    ref="map"
+    :load-tiles-while-animating="true"
+    :load-tiles-while-interacting="true"
+    :style="mapStyle"
+    @rendercomplete.once="fitView(1200, 300)"
+  >
+    <ol-view ref="mapView" :zoom="zoom" :center="center" :maxZoom="project?.tileServer?.maxZoom" />
+    <ol-tile-layer
+      v-if="project?.tileServer?.name != 'bing'"
+      id="osmLayer"
+      ref="osmLayer"
+      :zIndex="1"
+    >
+      <ol-source-osm />
+    </ol-tile-layer>
+    <ol-tile-layer id="basemapLayer" ref="basemapLayer" :zIndex="2">
+      <ol-source-bingmaps
+        v-if="project?.tileServer?.name === 'bing'"
+        :api-key="project?.tileServer?.apiKey"
+        :imagery-set="project?.tileServer?.imagerySet || 'Aerial'"
+      />
+      <ol-source-xyz v-else :url="xyzUrl" :attributions="project.tileServer.credits" />
+    </ol-tile-layer>
+    <ol-vector-layer id="taskLayer" ref="taskLayer" :zIndex="3" :key="task.taskId">
+      <ol-source-vector :features="taskFeatures" ref="taskSource" ident="taskSource" />
+      <ol-style :key="strokeColor">
+        <ol-style-stroke :color="strokeColor" :width="5" />
+        <ol-style-fill color="#0000" />
+      </ol-style>
+    </ol-vector-layer>
+    <ol-scaleline-control />
+  </ol-map>
+</template>
diff --git a/src/config/projectTypes.ts b/src/config/projectTypes.ts
index f15c9ec..07486a6 100644
--- a/src/config/projectTypes.ts
+++ b/src/config/projectTypes.ts
@@ -27,6 +27,10 @@ const projectTypes = {
     name: 'Street',
     component: 'streetProject',
   },
+  '8': {
+    name: 'Conflation',
+    component: 'conflationProject',
+  },
 }
 
 export default projectTypes
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 52ac56f..f39969b 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -22,6 +22,7 @@ import MediaProject from '@/components/MediaProject.vue'
 import ValidateProject from '@/components/ValidateProject.vue'
 import DigitizeProject from '@/components/DigitizeProject.vue'
 import StreetProject from '@/components/StreetProject.vue'
+import ConflationProject from '@/components/ConflationProject.vue'
 import projectTypes from '@/config/projectTypes'
 import { decompressTasks } from '@/utils/tasks'
 
@@ -34,6 +35,7 @@ export default defineComponent({
     validateProject: ValidateProject,
     digitizeProject: DigitizeProject,
     streetProject: StreetProject,
+    conflationProject: ConflationProject,
   },
   data() {
     return {

From 18a8e3d20e06dd77d3f94cb4764733fff50fa42c Mon Sep 17 00:00:00 2001
From: Levi Szamek <levi@szamek.de>
Date: Tue, 25 Mar 2025 16:52:23 +0100
Subject: [PATCH 02/29] fix: use conflation task in conflation project

---
 src/components/ConflationProject.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index 22ce1a9..b3689ea 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -9,13 +9,13 @@ import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import ValidateProjectInstructions from '@/components/ValidateProjectInstructions.vue'
 import ValidateProjectTutorial from '@/components/ValidateProjectTutorial.vue'
-import ValidateProjectTask from './ValidateProjectTask.vue'
+import ConflationProjectTask from './ConflationProjectTask.vue'
 
 export default defineComponent({
   components: {
     validateProjectInstructions: ValidateProjectInstructions,
     validateProjectTutorial: ValidateProjectTutorial,
-    validateProjectTask: ValidateProjectTask,
+    conflationProjectTask: ConflationProjectTask,
     taskProgress: TaskProgress,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
@@ -97,7 +97,7 @@ export default defineComponent({
       return colors
     },
     mission() {
-      const message = this.$t('validateProject.doesTheShapeOutline', {
+      const message = this.$t('conflationProject.doesTheShapeOutline', {
         feature: this.project?.lookFor,
       })
       return message
@@ -174,7 +174,7 @@ export default defineComponent({
 <template>
   <project-header :mission="mission" :title="project.projectTopic">
     <v-btn
-      :title="$t('findProject.toggleOpacity')"
+      :title="$t('conflationProject.toggleOpacity')"
       :icon="'mdi-eye'.concat(transparent ? '-off' : '')"
       @click="transparent = !transparent"
       color="primary"
@@ -182,7 +182,7 @@ export default defineComponent({
     <v-btn
       :title="$t('tileMap.resetView')"
       icon="mdi-fit-to-screen-outline"
-      @click="$refs['validate-project-task']?.fitView()"
+      @click="$refs['conflation-project-task']?.fitView()"
       color="primary"
     />
     <project-info
@@ -205,8 +205,8 @@ export default defineComponent({
     </project-info>
   </project-header>
   <v-container class="ma-0 pa-0">
-    <validate-project-task
-      ref="validate-project-task"
+    <conflation-project-task
+      ref="conflation-project-task"
       :task="tasks?.[taskIndex]"
       :project="project"
       :transparent="transparent"
@@ -222,7 +222,7 @@ export default defineComponent({
   <v-toolbar color="white" density="compact" extension-height="20" extended>
     <v-spacer />
     <v-btn
-      :title="$t('validateProject.moveLeft')"
+      :title="$t('conflationProject.moveLeft')"
       icon="mdi-chevron-left"
       color="secondary"
       :disabled="taskIndex <= 0"
@@ -238,7 +238,7 @@ export default defineComponent({
       @click="saveResults(results, startTime)"
     />
     <v-btn
-      :title="$t('validateProject.moveRight')"
+      :title="$t('conflationProject.moveRight')"
       icon="mdi-chevron-right"
       color="secondary"
       :disabled="!isAnswered() || taskIndex + 1 === tasks.length"

From e0c6fb30b124b867997f8dcb233db8db23ed4de0 Mon Sep 17 00:00:00 2001
From: Levi Szamek <levi@szamek.de>
Date: Tue, 25 Mar 2025 18:15:22 +0100
Subject: [PATCH 03/29] workaround: use arrows from validate project

---
 src/components/ConflationProject.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index b3689ea..0df3181 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -222,7 +222,7 @@ export default defineComponent({
   <v-toolbar color="white" density="compact" extension-height="20" extended>
     <v-spacer />
     <v-btn
-      :title="$t('conflationProject.moveLeft')"
+      :title="$t('validateProject.moveLeft')"
       icon="mdi-chevron-left"
       color="secondary"
       :disabled="taskIndex <= 0"
@@ -238,7 +238,7 @@ export default defineComponent({
       @click="saveResults(results, startTime)"
     />
     <v-btn
-      :title="$t('conflationProject.moveRight')"
+      :title="$t('validateProject.moveRight')"
       icon="mdi-chevron-right"
       color="secondary"
       :disabled="!isAnswered() || taskIndex + 1 === tasks.length"

From c38e3cb4e16263edb7a9054ce2c31f69cad6b948 Mon Sep 17 00:00:00 2001
From: Levi Szamek <levi@szamek.de>
Date: Thu, 27 Mar 2025 15:38:36 +0100
Subject: [PATCH 04/29] feat: add OSM buildings from ohsome API and display
 them on map

---
 src/components/ConflationProject.vue     |  2 +-
 src/components/ConflationProjectTask.vue | 65 +++++++++++++++++++++++-
 2 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index 0df3181..cd08911 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -152,7 +152,7 @@ export default defineComponent({
       if (this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
         this.taskIndex++
         this.taskId = this.tasks[this.taskIndex].taskId
-        console.log("heeee", this.tasks[this.taskIndex])
+        console.log("heeee", this.taskFeatures)
       }
     },
     isAnswered() {
diff --git a/src/components/ConflationProjectTask.vue b/src/components/ConflationProjectTask.vue
index 1172b4e..ad550f0 100644
--- a/src/components/ConflationProjectTask.vue
+++ b/src/components/ConflationProjectTask.vue
@@ -6,7 +6,11 @@ import type { OlMap, OlView } from 'node_modules/vue3-openlayers/dist/components
 import type { OlSourceVector } from 'node_modules/vue3-openlayers/dist/components/sources'
 import { Collection } from 'ol'
 import { GeoJSON } from 'ol/format'
-import { type PropType, defineComponent } from 'vue'
+import { type PropType, defineComponent, toRaw } from 'vue'
+import {extractGeometries} from '@/utils/extractOSMGeometries'
+import VectorLayer from 'ol/layer/Vector'
+import VectorSource from 'ol/source/Vector'
+import { Stroke, Style } from 'ol/style'
 
 interface Task {
   taskId: string
@@ -47,6 +51,9 @@ export default defineComponent({
     startTime: string | null
     currentTaskIndex: number
     zoom: number
+    extent: Array<number>
+    osmFeatureCollection: Collection,
+    osmLayer: any,
   } {
     return {
       center: [0, 0],
@@ -54,8 +61,14 @@ export default defineComponent({
       startTime: null,
       currentTaskIndex: 0,
       zoom: 3,
+      extent: null,
+      osmFeatureCollection: new Collection(),
+      osmLayer: null,
     }
   },
+  mounted() {
+    this.fetchOSMFeatures();
+  },
   updated() {
     this.fitView()
   },
@@ -81,6 +94,7 @@ export default defineComponent({
       return this.project.tileServer.maxZoom ?? 20
     },
     taskFeatures() {
+      console.log("Task features:", this.task.geojson);
       const features = new Collection()
       const geoJson = new GeoJSON()
 
@@ -93,7 +107,8 @@ export default defineComponent({
 
       const newFeature = geoJson.readFeature(feature, options)
       features.push(newFeature)
-
+      console.log("Task feature:", feature);
+      console.log("Task features added:", features);
       return features
     },
   },
@@ -116,7 +131,53 @@ export default defineComponent({
         }, delay)
       }
     },
+  async fetchOSMFeatures() {
+    try {
+      console.log("he")
+      const geoJson = new GeoJSON();
+      const osmGeometries = await extractGeometries("bbox", "building=*", "2024-03-25");
+      console.log("OSM Geometries fetched:", osmGeometries);
+      const options = {
+        dataProjection: "EPSG:4326",
+        featureProjection: "EPSG:3857",
+      };
+
+      osmGeometries.forEach((osmGeom) => {
+        //console.log("OSM Geometry:", osmGeom);
+        const osmFeature = geoJson.readFeature({ geometry: osmGeom, type: "Feature" }, options);
+        this.osmFeatureCollection.push(osmFeature);
+      });
+
+      console.log("OSM Features added:", this.osmFeatureCollection);
+
+      // Add new vector layer dynamically to the map
+      this.addOSMLayer();
+
+    } catch (error) {
+      console.error("Error fetching OSM features:", error);
+    }
   },
+  addOSMLayer() {
+
+    const map = (this.$refs.map as InstanceType<typeof OlMap>).map;
+    console.log("OSMLAYER", this.osmFeatureCollection)
+    this.osmLayer = new VectorLayer({
+      source: new VectorSource({
+        features: toRaw(this.osmFeatureCollection),
+      }),
+      style: new Style({
+        stroke: new Stroke({
+          color: "red",
+          width: 3,
+        }),
+      }),
+    });
+    console.log("OSMLAYER2", this.osmLayer)
+    this.osmLayer.setZIndex(2);
+    map.addLayer(this.osmLayer);
+    console.log("all done")
+  }
+},
 })
 </script>
 

From 8e22a7818d2dec283e2e541d9fdc3195f47b4865 Mon Sep 17 00:00:00 2001
From: Levi Szamek <levi@szamek.de>
Date: Thu, 27 Mar 2025 15:54:27 +0100
Subject: [PATCH 05/29] feat: add scritp for requesting ohsome API

---
 src/utils/extractOSMGeometries.ts | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/utils/extractOSMGeometries.ts

diff --git a/src/utils/extractOSMGeometries.ts b/src/utils/extractOSMGeometries.ts
new file mode 100644
index 0000000..daab1fb
--- /dev/null
+++ b/src/utils/extractOSMGeometries.ts
@@ -0,0 +1,29 @@
+const OHSOME_API_URL = "https://api.ohsome.org/v1/elements/geometry";
+
+export async function extractGeometries(bbox: string, filter: string, time: string) {
+  try {
+    const response = await fetch(OHSOME_API_URL, {
+      method: 'POST',
+      headers:{
+        'Content-Type': 'application/x-www-form-urlencoded'
+      },
+      body: new URLSearchParams({
+          bboxes: "85.5189500685426793,27.6315268785445447,85.5210126584249792,27.6342666694473813",
+          filter: "building=* and geometry:polygon",
+          time: "2024-03-25",
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Error: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+
+    console.log("data", data)
+    return data.features.map((feature: any) => feature.geometry);
+  } catch (error) {
+    console.error("Error fetching geometries:", error);
+    throw error;
+  }
+}

From 10acad9e8583e5c01c4b4009671d2da0d8b663a5 Mon Sep 17 00:00:00 2001
From: Levi Szamek <levi@szamek.de>
Date: Thu, 27 Mar 2025 17:48:35 +0100
Subject: [PATCH 06/29] feat: add functionality to calculate extent of task
 area and use it for OSM download

---
 src/components/ConflationProject.vue     | 24 +++++++++++++++++++++++-
 src/components/ConflationProjectTask.vue | 21 +++++++--------------
 src/utils/extractOSMGeometries.ts        |  3 +--
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index cd08911..1f64cf5 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -10,6 +10,8 @@ import TaskProgress from '@/components/TaskProgress.vue'
 import ValidateProjectInstructions from '@/components/ValidateProjectInstructions.vue'
 import ValidateProjectTutorial from '@/components/ValidateProjectTutorial.vue'
 import ConflationProjectTask from './ConflationProjectTask.vue'
+import { GeoJSON } from 'ol/format'
+import { boundingExtent, extend } from 'ol/extent'
 
 export default defineComponent({
   components: {
@@ -102,6 +104,26 @@ export default defineComponent({
       })
       return message
     },
+    computeTaskExtent() {
+      const features = new Collection();
+      const geoJson = new GeoJSON();
+      const options = { dataProjection: 'EPSG:4326' };
+
+      this.tasks.forEach((geom) => {
+        const feature = geoJson.readFeature({ geometry: geom.geojson, type: "Feature" }, options);
+        features.push(feature);
+      });
+
+      let extent = boundingExtent([]);
+      features.forEach((feature) => {
+        const geometry = feature.getGeometry();
+        if (geometry) {
+          extend(extent, geometry.getExtent());
+        }
+      });
+      console.log("Extent:", extent);
+      return extent;
+    },
   },
   methods: {
     addResult(value) {
@@ -152,7 +174,6 @@ export default defineComponent({
       if (this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
         this.taskIndex++
         this.taskId = this.tasks[this.taskIndex].taskId
-        console.log("heeee", this.taskFeatures)
       }
     },
     isAnswered() {
@@ -209,6 +230,7 @@ export default defineComponent({
       ref="conflation-project-task"
       :task="tasks?.[taskIndex]"
       :project="project"
+      :taskExtent="computeTaskExtent"
       :transparent="transparent"
     />
   </v-container>
diff --git a/src/components/ConflationProjectTask.vue b/src/components/ConflationProjectTask.vue
index ad550f0..17dadca 100644
--- a/src/components/ConflationProjectTask.vue
+++ b/src/components/ConflationProjectTask.vue
@@ -44,6 +44,10 @@ export default defineComponent({
     compact: {
       type: Boolean,
     },
+    taskExtent: {
+      type: Array,
+      required: true,
+    },
   },
   data(): {
     center: [number, number]
@@ -51,7 +55,6 @@ export default defineComponent({
     startTime: string | null
     currentTaskIndex: number
     zoom: number
-    extent: Array<number>
     osmFeatureCollection: Collection,
     osmLayer: any,
   } {
@@ -61,7 +64,6 @@ export default defineComponent({
       startTime: null,
       currentTaskIndex: 0,
       zoom: 3,
-      extent: null,
       osmFeatureCollection: new Collection(),
       osmLayer: null,
     }
@@ -94,7 +96,6 @@ export default defineComponent({
       return this.project.tileServer.maxZoom ?? 20
     },
     taskFeatures() {
-      console.log("Task features:", this.task.geojson);
       const features = new Collection()
       const geoJson = new GeoJSON()
 
@@ -107,8 +108,7 @@ export default defineComponent({
 
       const newFeature = geoJson.readFeature(feature, options)
       features.push(newFeature)
-      console.log("Task feature:", feature);
-      console.log("Task features added:", features);
+
       return features
     },
   },
@@ -133,22 +133,18 @@ export default defineComponent({
     },
   async fetchOSMFeatures() {
     try {
-      console.log("he")
       const geoJson = new GeoJSON();
-      const osmGeometries = await extractGeometries("bbox", "building=*", "2024-03-25");
-      console.log("OSM Geometries fetched:", osmGeometries);
+      const osmGeometries = await extractGeometries(this.taskExtent.toString(), "building=* and geoemtry:polygon", "2024-03-25");
       const options = {
         dataProjection: "EPSG:4326",
         featureProjection: "EPSG:3857",
       };
-
+      console.log("extent", this.taskExtent.toString())
       osmGeometries.forEach((osmGeom) => {
-        //console.log("OSM Geometry:", osmGeom);
         const osmFeature = geoJson.readFeature({ geometry: osmGeom, type: "Feature" }, options);
         this.osmFeatureCollection.push(osmFeature);
       });
 
-      console.log("OSM Features added:", this.osmFeatureCollection);
 
       // Add new vector layer dynamically to the map
       this.addOSMLayer();
@@ -160,7 +156,6 @@ export default defineComponent({
   addOSMLayer() {
 
     const map = (this.$refs.map as InstanceType<typeof OlMap>).map;
-    console.log("OSMLAYER", this.osmFeatureCollection)
     this.osmLayer = new VectorLayer({
       source: new VectorSource({
         features: toRaw(this.osmFeatureCollection),
@@ -172,10 +167,8 @@ export default defineComponent({
         }),
       }),
     });
-    console.log("OSMLAYER2", this.osmLayer)
     this.osmLayer.setZIndex(2);
     map.addLayer(this.osmLayer);
-    console.log("all done")
   }
 },
 })
diff --git a/src/utils/extractOSMGeometries.ts b/src/utils/extractOSMGeometries.ts
index daab1fb..1ee99ad 100644
--- a/src/utils/extractOSMGeometries.ts
+++ b/src/utils/extractOSMGeometries.ts
@@ -8,7 +8,7 @@ export async function extractGeometries(bbox: string, filter: string, time: stri
         'Content-Type': 'application/x-www-form-urlencoded'
       },
       body: new URLSearchParams({
-          bboxes: "85.5189500685426793,27.6315268785445447,85.5210126584249792,27.6342666694473813",
+          bboxes: bbox,
           filter: "building=* and geometry:polygon",
           time: "2024-03-25",
       }),
@@ -20,7 +20,6 @@ export async function extractGeometries(bbox: string, filter: string, time: stri
 
     const data = await response.json();
 
-    console.log("data", data)
     return data.features.map((feature: any) => feature.geometry);
   } catch (error) {
     console.error("Error fetching geometries:", error);

From ceed80ffeea5f0047123056da9161847ed1e0a3f Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Mon, 31 Mar 2025 16:51:06 +0200
Subject: [PATCH 07/29] feat(conflation): use aligned design default options;
 formatting

---
 src/components/ConflationProject.vue     | 30 ++++-----
 src/components/ConflationProjectTask.vue | 85 ++++++++++++------------
 src/utils/extractOSMGeometries.ts        | 24 +++----
 3 files changed, 70 insertions(+), 69 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index 1f64cf5..c74d5c9 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -39,7 +39,7 @@ export default defineComponent({
           {
             mdiIcon: 'mdi-check-bold',
             description: `The shape does outline a building in the image`,
-            iconColor: '#bbcb7d',
+            iconColor: '#388E3C',
             shortkey: 1,
             title: 'Yes',
             value: 1,
@@ -47,7 +47,7 @@ export default defineComponent({
           {
             mdiIcon: 'mdi-close-thick',
             description: `The shape doesn't match a building in the image`,
-            iconColor: '#fd5054',
+            iconColor: '#D32F2F',
             shortkey: 2,
             title: 'No',
             value: 0,
@@ -55,7 +55,7 @@ export default defineComponent({
           {
             mdiIcon: 'mdi-minus-thick',
             description: `If you're not sure or there is cloud cover / bad imagery.`,
-            iconColor: '#adadad',
+            iconColor: '#616161',
             title: 'Not sure',
             shortkey: 3,
             value: 2,
@@ -105,24 +105,24 @@ export default defineComponent({
       return message
     },
     computeTaskExtent() {
-      const features = new Collection();
-      const geoJson = new GeoJSON();
-      const options = { dataProjection: 'EPSG:4326' };
+      const features = new Collection()
+      const geoJson = new GeoJSON()
+      const options = { dataProjection: 'EPSG:4326' }
 
       this.tasks.forEach((geom) => {
-        const feature = geoJson.readFeature({ geometry: geom.geojson, type: "Feature" }, options);
-        features.push(feature);
-      });
+        const feature = geoJson.readFeature({ geometry: geom.geojson, type: 'Feature' }, options)
+        features.push(feature)
+      })
 
-      let extent = boundingExtent([]);
+      let extent = boundingExtent([])
       features.forEach((feature) => {
-        const geometry = feature.getGeometry();
+        const geometry = feature.getGeometry()
         if (geometry) {
-          extend(extent, geometry.getExtent());
+          extend(extent, geometry.getExtent())
         }
-      });
-      console.log("Extent:", extent);
-      return extent;
+      })
+      console.log('Extent:', extent)
+      return extent
     },
   },
   methods: {
diff --git a/src/components/ConflationProjectTask.vue b/src/components/ConflationProjectTask.vue
index 17dadca..c809c9c 100644
--- a/src/components/ConflationProjectTask.vue
+++ b/src/components/ConflationProjectTask.vue
@@ -7,7 +7,7 @@ import type { OlSourceVector } from 'node_modules/vue3-openlayers/dist/component
 import { Collection } from 'ol'
 import { GeoJSON } from 'ol/format'
 import { type PropType, defineComponent, toRaw } from 'vue'
-import {extractGeometries} from '@/utils/extractOSMGeometries'
+import { extractGeometries } from '@/utils/extractOSMGeometries'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import { Stroke, Style } from 'ol/style'
@@ -55,8 +55,8 @@ export default defineComponent({
     startTime: string | null
     currentTaskIndex: number
     zoom: number
-    osmFeatureCollection: Collection,
-    osmLayer: any,
+    osmFeatureCollection: Collection
+    osmLayer: any
   } {
     return {
       center: [0, 0],
@@ -69,7 +69,7 @@ export default defineComponent({
     }
   },
   mounted() {
-    this.fetchOSMFeatures();
+    this.fetchOSMFeatures()
   },
   updated() {
     this.fitView()
@@ -131,46 +131,47 @@ export default defineComponent({
         }, delay)
       }
     },
-  async fetchOSMFeatures() {
-    try {
-      const geoJson = new GeoJSON();
-      const osmGeometries = await extractGeometries(this.taskExtent.toString(), "building=* and geoemtry:polygon", "2024-03-25");
-      const options = {
-        dataProjection: "EPSG:4326",
-        featureProjection: "EPSG:3857",
-      };
-      console.log("extent", this.taskExtent.toString())
-      osmGeometries.forEach((osmGeom) => {
-        const osmFeature = geoJson.readFeature({ geometry: osmGeom, type: "Feature" }, options);
-        this.osmFeatureCollection.push(osmFeature);
-      });
-
+    async fetchOSMFeatures() {
+      try {
+        const geoJson = new GeoJSON()
+        const osmGeometries = await extractGeometries(
+          this.taskExtent.toString(),
+          'building=* and geoemtry:polygon',
+          '2024-03-25',
+        )
+        const options = {
+          dataProjection: 'EPSG:4326',
+          featureProjection: 'EPSG:3857',
+        }
+        console.log('extent', this.taskExtent.toString())
+        osmGeometries.forEach((osmGeom) => {
+          const osmFeature = geoJson.readFeature({ geometry: osmGeom, type: 'Feature' }, options)
+          this.osmFeatureCollection.push(osmFeature)
+        })
 
-      // Add new vector layer dynamically to the map
-      this.addOSMLayer();
-
-    } catch (error) {
-      console.error("Error fetching OSM features:", error);
-    }
-  },
-  addOSMLayer() {
-
-    const map = (this.$refs.map as InstanceType<typeof OlMap>).map;
-    this.osmLayer = new VectorLayer({
-      source: new VectorSource({
-        features: toRaw(this.osmFeatureCollection),
-      }),
-      style: new Style({
-        stroke: new Stroke({
-          color: "red",
-          width: 3,
+        // Add new vector layer dynamically to the map
+        this.addOSMLayer()
+      } catch (error) {
+        console.error('Error fetching OSM features:', error)
+      }
+    },
+    addOSMLayer() {
+      const map = (this.$refs.map as InstanceType<typeof OlMap>).map
+      this.osmLayer = new VectorLayer({
+        source: new VectorSource({
+          features: toRaw(this.osmFeatureCollection),
         }),
-      }),
-    });
-    this.osmLayer.setZIndex(2);
-    map.addLayer(this.osmLayer);
-  }
-},
+        style: new Style({
+          stroke: new Stroke({
+            color: 'red',
+            width: 3,
+          }),
+        }),
+      })
+      this.osmLayer.setZIndex(2)
+      map.addLayer(this.osmLayer)
+    },
+  },
 })
 </script>
 
diff --git a/src/utils/extractOSMGeometries.ts b/src/utils/extractOSMGeometries.ts
index 1ee99ad..0e219aa 100644
--- a/src/utils/extractOSMGeometries.ts
+++ b/src/utils/extractOSMGeometries.ts
@@ -1,28 +1,28 @@
-const OHSOME_API_URL = "https://api.ohsome.org/v1/elements/geometry";
+const OHSOME_API_URL = 'https://api.ohsome.org/v1/elements/geometry'
 
 export async function extractGeometries(bbox: string, filter: string, time: string) {
   try {
     const response = await fetch(OHSOME_API_URL, {
       method: 'POST',
-      headers:{
-        'Content-Type': 'application/x-www-form-urlencoded'
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
       },
       body: new URLSearchParams({
-          bboxes: bbox,
-          filter: "building=* and geometry:polygon",
-          time: "2024-03-25",
+        bboxes: bbox,
+        filter: 'building=* and geometry:polygon',
+        time: '2024-03-25',
       }),
-    });
+    })
 
     if (!response.ok) {
-      throw new Error(`Error: ${response.statusText}`);
+      throw new Error(`Error: ${response.statusText}`)
     }
 
-    const data = await response.json();
+    const data = await response.json()
 
-    return data.features.map((feature: any) => feature.geometry);
+    return data.features.map((feature: any) => feature.geometry)
   } catch (error) {
-    console.error("Error fetching geometries:", error);
-    throw error;
+    console.error('Error fetching geometries:', error)
+    throw error
   }
 }

From 4cd545ee3b70cf13cadd542e3a05848b26530b65 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Mon, 31 Mar 2025 17:10:19 +0200
Subject: [PATCH 08/29] feat(conflation): use vue3-openlayers components for
 osm feature layer

---
 src/components/ConflationProjectTask.vue | 52 +++++++++---------------
 1 file changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/components/ConflationProjectTask.vue b/src/components/ConflationProjectTask.vue
index c809c9c..d455605 100644
--- a/src/components/ConflationProjectTask.vue
+++ b/src/components/ConflationProjectTask.vue
@@ -1,16 +1,12 @@
 <script lang="ts">
-import { theme } from '@/plugins/vuetify'
 import hex2rgb from '@/utils/hex2rgb'
 import makeXyzUrl from '@/utils/makeXyzUrl'
 import type { OlMap, OlView } from 'node_modules/vue3-openlayers/dist/components/map'
 import type { OlSourceVector } from 'node_modules/vue3-openlayers/dist/components/sources'
 import { Collection } from 'ol'
 import { GeoJSON } from 'ol/format'
-import { type PropType, defineComponent, toRaw } from 'vue'
+import { type PropType, defineComponent } from 'vue'
 import { extractGeometries } from '@/utils/extractOSMGeometries'
-import VectorLayer from 'ol/layer/Vector'
-import VectorSource from 'ol/source/Vector'
-import { Stroke, Style } from 'ol/style'
 
 interface Task {
   taskId: string
@@ -87,10 +83,6 @@ export default defineComponent({
     xyzUrl() {
       return makeXyzUrl(this.project.tileServer)
     },
-    strokeColor() {
-      const color = hex2rgb(theme.light.accent, this.transparent ? 0.4 : 1)
-      return color
-    },
     maxZoom() {
       // return this.project.tileServer.maxZoom ?? 19;
       return this.project.tileServer.maxZoom ?? 20
@@ -148,28 +140,13 @@ export default defineComponent({
           const osmFeature = geoJson.readFeature({ geometry: osmGeom, type: 'Feature' }, options)
           this.osmFeatureCollection.push(osmFeature)
         })
-
-        // Add new vector layer dynamically to the map
-        this.addOSMLayer()
       } catch (error) {
         console.error('Error fetching OSM features:', error)
       }
     },
-    addOSMLayer() {
-      const map = (this.$refs.map as InstanceType<typeof OlMap>).map
-      this.osmLayer = new VectorLayer({
-        source: new VectorSource({
-          features: toRaw(this.osmFeatureCollection),
-        }),
-        style: new Style({
-          stroke: new Stroke({
-            color: 'red',
-            width: 3,
-          }),
-        }),
-      })
-      this.osmLayer.setZIndex(2)
-      map.addLayer(this.osmLayer)
+    strokeColor(hex) {
+      const color = hex2rgb(hex, this.transparent ? 0.4 : 0.8)
+      return color
     },
   },
 })
@@ -186,8 +163,8 @@ export default defineComponent({
     <ol-view ref="mapView" :zoom="zoom" :center="center" :maxZoom="project?.tileServer?.maxZoom" />
     <ol-tile-layer
       v-if="project?.tileServer?.name != 'bing'"
-      id="osmLayer"
-      ref="osmLayer"
+      id="osmBaseLayer"
+      ref="osmBaseLayer"
       :zIndex="1"
     >
       <ol-source-osm />
@@ -200,10 +177,21 @@ export default defineComponent({
       />
       <ol-source-xyz v-else :url="xyzUrl" :attributions="project.tileServer.credits" />
     </ol-tile-layer>
-    <ol-vector-layer id="taskLayer" ref="taskLayer" :zIndex="3" :key="task.taskId">
+    <ol-vector-layer id="taskLayer" ref="taskLayer" :zIndex="4" :key="task.taskId">
       <ol-source-vector :features="taskFeatures" ref="taskSource" ident="taskSource" />
-      <ol-style :key="strokeColor">
-        <ol-style-stroke :color="strokeColor" :width="5" />
+      <ol-style :key="transparent">
+        <ol-style-stroke :color="strokeColor('#0000ff')" :width="3" />
+        <ol-style-fill color="#0000" />
+      </ol-style>
+    </ol-vector-layer>
+    <ol-vector-layer id="osmFeatureLayer" ref="osmFeatureLayer" :zIndex="3" :key="task.taskId">
+      <ol-source-vector
+        :features="osmFeatureCollection"
+        ref="osmFeatureSource"
+        ident="osmFeatureSource"
+      />
+      <ol-style :key="transparent">
+        <ol-style-stroke :color="strokeColor('#ff0000')" :width="3" />
         <ol-style-fill color="#0000" />
       </ol-style>
     </ol-vector-layer>

From 6e79df9c3f2bb5cb26eeba886316cedf63e417b2 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Mon, 31 Mar 2025 17:54:08 +0200
Subject: [PATCH 09/29] feat(conflation): fetch osm features by task extent

---
 src/components/ConflationProject.vue     | 46 +++++++-----------------
 src/components/ConflationProjectTask.vue | 18 +++++++---
 src/utils/extractOSMGeometries.ts        |  1 +
 3 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index c74d5c9..ba9107f 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -105,6 +105,7 @@ export default defineComponent({
       return message
     },
     computeTaskExtent() {
+      /*
       const features = new Collection()
       const geoJson = new GeoJSON()
       const options = { dataProjection: 'EPSG:4326' }
@@ -121,7 +122,14 @@ export default defineComponent({
           extend(extent, geometry.getExtent())
         }
       })
-      console.log('Extent:', extent)
+      */
+      let extent = boundingExtent([])
+      const geoJson = new GeoJSON()
+      const options = { dataProjection: 'EPSG:4326' }
+      const task = this.tasks?.[this.taskIndex]
+      const feature = geoJson.readFeature({ geometry: task.geojson, type: 'Feature' }, options)
+      const geometry = feature.getGeometry()
+      extend(extent, geometry.getExtent())
       return extent
     },
   },
@@ -136,39 +144,9 @@ export default defineComponent({
       }
     },
     createInformationPages,
-    // fallback information pages of mobile app adapted to web app:
-    createFallbackInformationPages(tutorial) {
-      if (tutorial.lookFor) {
-        return [
-          {
-            blocks: [
-              {
-                blockNumber: 1,
-                blockType: 'text',
-                // web app displays shapes on a web map rather than on a single image
-                textDescription:
-                  "You'll see a shape on an interactive imagery map. Use the buttons to answer.",
-              },
-              {
-                blockNumber: 2,
-                blockType: 'text',
-                // instead of 'buildings', we get the feature of interest from Firebase (similar as in Find projects)
-                textDescription: `Does the shape outline a ${tutorial.lookFor}?`,
-              },
-              {
-                blockNumber: 3,
-                blockType: 'text',
-                textDescription:
-                  "Every time you select an option, you'll be shown a new shape and image.",
-              },
-            ],
-            pageNumber: 1,
-            title: 'What to look for',
-          },
-        ]
-      } else {
-        return undefined
-      }
+    // currently no fallback information pages defined, same here
+    createFallbackInformationPages() {
+      return undefined
     },
     forward() {
       if (this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
diff --git a/src/components/ConflationProjectTask.vue b/src/components/ConflationProjectTask.vue
index d455605..df9ff40 100644
--- a/src/components/ConflationProjectTask.vue
+++ b/src/components/ConflationProjectTask.vue
@@ -53,6 +53,7 @@ export default defineComponent({
     zoom: number
     osmFeatureCollection: Collection
     osmLayer: any
+    ready: Boolean
   } {
     return {
       center: [0, 0],
@@ -62,13 +63,20 @@ export default defineComponent({
       zoom: 3,
       osmFeatureCollection: new Collection(),
       osmLayer: null,
+      ready: false,
     }
   },
   mounted() {
-    this.fetchOSMFeatures()
+    this.fetchOSMFeatures().then(() => {
+      this.ready = true
+      this.fitView()
+    })
   },
   updated() {
-    this.fitView()
+    this.fetchOSMFeatures().then(() => {
+      this.ready = true
+      this.fitView()
+    })
   },
   computed: {
     mapStyle() {
@@ -125,6 +133,8 @@ export default defineComponent({
     },
     async fetchOSMFeatures() {
       try {
+        this.ready = false
+        this.osmFeatureCollection.clear()
         const geoJson = new GeoJSON()
         const osmGeometries = await extractGeometries(
           this.taskExtent.toString(),
@@ -180,7 +190,7 @@ export default defineComponent({
     <ol-vector-layer id="taskLayer" ref="taskLayer" :zIndex="4" :key="task.taskId">
       <ol-source-vector :features="taskFeatures" ref="taskSource" ident="taskSource" />
       <ol-style :key="transparent">
-        <ol-style-stroke :color="strokeColor('#0000ff')" :width="3" />
+        <ol-style-stroke :color="ready ? strokeColor('#0000ff') : '#0000'" :width="3" />
         <ol-style-fill color="#0000" />
       </ol-style>
     </ol-vector-layer>
@@ -191,7 +201,7 @@ export default defineComponent({
         ident="osmFeatureSource"
       />
       <ol-style :key="transparent">
-        <ol-style-stroke :color="strokeColor('#ff0000')" :width="3" />
+        <ol-style-stroke :color="ready ? strokeColor('#ff0000') : '#0000'" :width="3" />
         <ol-style-fill color="#0000" />
       </ol-style>
     </ol-vector-layer>
diff --git a/src/utils/extractOSMGeometries.ts b/src/utils/extractOSMGeometries.ts
index 0e219aa..6da2ba5 100644
--- a/src/utils/extractOSMGeometries.ts
+++ b/src/utils/extractOSMGeometries.ts
@@ -11,6 +11,7 @@ export async function extractGeometries(bbox: string, filter: string, time: stri
         bboxes: bbox,
         filter: 'building=* and geometry:polygon',
         time: '2024-03-25',
+        clipGeometry: false,
       }),
     })
 

From 450bdd18a54a68cbba1335bf72d9081049abdaf4 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Tue, 1 Apr 2025 17:20:11 +0200
Subject: [PATCH 10/29] feat(conflation): arrange mission, options and styles
 for conflation tasks

---
 src/components/ConflationProject.vue     | 22 +++++++++++-----------
 src/components/ConflationProjectTask.vue |  4 ++--
 src/i18n/locales/de.json                 |  3 +++
 src/i18n/locales/en.json                 |  3 +++
 src/i18n/locales/fr.json                 |  3 +++
 5 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index ba9107f..10dfd68 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -37,26 +37,26 @@ export default defineComponent({
       default() {
         return [
           {
-            mdiIcon: 'mdi-check-bold',
-            description: `The shape does outline a building in the image`,
-            iconColor: '#388E3C',
+            mdiIcon: 'mdi-shape',
+            description: `The blue shape accurately outlines the building.`,
+            iconColor: '#1976D2',
             shortkey: 1,
-            title: 'Yes',
+            title: 'Blue',
             value: 1,
           },
           {
-            mdiIcon: 'mdi-close-thick',
-            description: `The shape doesn't match a building in the image`,
+            mdiIcon: 'mdi-shape',
+            description: `The red shape accurately outlines the building.`,
             iconColor: '#D32F2F',
             shortkey: 2,
-            title: 'No',
+            title: 'Red',
             value: 0,
           },
           {
-            mdiIcon: 'mdi-minus-thick',
-            description: `If you're not sure or there is cloud cover / bad imagery.`,
+            mdiIcon: 'mdi-close-thick',
+            description: `Neither the blue nor the red shape accurately outline a building.`,
             iconColor: '#616161',
-            title: 'Not sure',
+            title: 'None',
             shortkey: 3,
             value: 2,
           },
@@ -99,7 +99,7 @@ export default defineComponent({
       return colors
     },
     mission() {
-      const message = this.$t('conflationProject.doesTheShapeOutline', {
+      const message = this.$t('conflationProject.whichShape', {
         feature: this.project?.lookFor,
       })
       return message
diff --git a/src/components/ConflationProjectTask.vue b/src/components/ConflationProjectTask.vue
index df9ff40..2907d15 100644
--- a/src/components/ConflationProjectTask.vue
+++ b/src/components/ConflationProjectTask.vue
@@ -190,7 +190,7 @@ export default defineComponent({
     <ol-vector-layer id="taskLayer" ref="taskLayer" :zIndex="4" :key="task.taskId">
       <ol-source-vector :features="taskFeatures" ref="taskSource" ident="taskSource" />
       <ol-style :key="transparent">
-        <ol-style-stroke :color="ready ? strokeColor('#0000ff') : '#0000'" :width="3" />
+        <ol-style-stroke :color="ready ? strokeColor('#1976D2') : '#0000'" :width="5" />
         <ol-style-fill color="#0000" />
       </ol-style>
     </ol-vector-layer>
@@ -201,7 +201,7 @@ export default defineComponent({
         ident="osmFeatureSource"
       />
       <ol-style :key="transparent">
-        <ol-style-stroke :color="ready ? strokeColor('#ff0000') : '#0000'" :width="3" />
+        <ol-style-stroke :color="ready ? strokeColor('#D32F2F') : '#0000'" :width="5" />
         <ol-style-fill color="#0000" />
       </ol-style>
     </ol-vector-layer>
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index ab2e9f2..932ff6f 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -221,5 +221,8 @@
   "imageTile": {
     "failureMessage": "Bild konnte nicht geladen werden!",
     "notAvailableMessage": "Bild nicht verfügbar!"
+  },
+  "conflationProject": {
+    "whichShape": "Welche Form ist der korrekte {feature}-Umriss?"
   }
 }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 6a54746..0b934f6 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -221,5 +221,8 @@
   "imageTile": {
     "failureMessage": "Failed to load image!",
     "notAvailableMessage": "Image not available!"
+  },
+  "conflationProject": {
+    "whichShape": "Which shape accurately outlines the {feature}?"
   }
 }
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index ab691fd..17ccebc 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -221,5 +221,8 @@
   "imageTile": {
     "failureMessage": "Échec du chargement de l'image !",
     "notAvailableMessage": "Image non disponible !"
+  },
+  "conflationProject": {
+    "whichShape": "Quelle forme correspond avec précision au contour de {feature}?"
   }
 }

From e950359704335af7d97be99d2418cd711de056c8 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 2 Apr 2025 11:22:48 +0200
Subject: [PATCH 11/29] feat(conflation): adjust maxZoom

---
 src/components/ConflationProjectTask.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ConflationProjectTask.vue b/src/components/ConflationProjectTask.vue
index 2907d15..865b2bf 100644
--- a/src/components/ConflationProjectTask.vue
+++ b/src/components/ConflationProjectTask.vue
@@ -93,7 +93,7 @@ export default defineComponent({
     },
     maxZoom() {
       // return this.project.tileServer.maxZoom ?? 19;
-      return this.project.tileServer.maxZoom ?? 20
+      return this.project.tileServer.maxZoom ?? 22
     },
     taskFeatures() {
       const features = new Collection()

From 660e4282fb342d80ebe16571412b89648d4914cd Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 3 Apr 2025 20:12:15 +0200
Subject: [PATCH 12/29] feat(conflation): fetch and intersect features from
 conflation-project component

---
 package.json                             |   1 +
 src/components/ConflationProject.vue     | 142 ++++++++++++++++++-----
 src/components/ConflationProjectTask.vue | 101 ++++------------
 src/utils/extractOSMGeometries.ts        |   5 +-
 yarn.lock                                | 121 +++++++++++++++++--
 5 files changed, 247 insertions(+), 123 deletions(-)

diff --git a/package.json b/package.json
index 8682e9e..db071b5 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^3.0.1",
+    "@turf/boolean-intersects": "^7.2.0",
     "base-64": "^1.0.0",
     "firebase": "^10.9.0",
     "mapillary-js": "^4.1.2",
diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index 10dfd68..20f582b 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -11,7 +11,11 @@ import ValidateProjectInstructions from '@/components/ValidateProjectInstruction
 import ValidateProjectTutorial from '@/components/ValidateProjectTutorial.vue'
 import ConflationProjectTask from './ConflationProjectTask.vue'
 import { GeoJSON } from 'ol/format'
-import { boundingExtent, extend } from 'ol/extent'
+import { boundingExtent, extend, getArea } from 'ol/extent'
+import { transformExtent } from 'ol/proj'
+import { booleanIntersects } from '@turf/boolean-intersects'
+
+import { extractGeometries } from '@/utils/extractOSMGeometries'
 
 export default defineComponent({
   components: {
@@ -82,7 +86,10 @@ export default defineComponent({
       center: [0, 0],
       results: {},
       startTime: null,
-      taskFeatures: new Collection(),
+      taskFeatures: null,
+      osmFeatureCollection: new Collection(),
+      intersectingFeatures: [],
+      ready: false,
       taskId: undefined,
       taskIndex: 0,
       transparent: false,
@@ -93,6 +100,11 @@ export default defineComponent({
     logMappingStarted: 'logMappingStarted',
     saveResults: 'saveResults',
   },
+  watch: {
+    ready() {
+      this.filterOsmFeatures()
+    },
+  },
   computed: {
     colors() {
       const colors = theme
@@ -104,34 +116,6 @@ export default defineComponent({
       })
       return message
     },
-    computeTaskExtent() {
-      /*
-      const features = new Collection()
-      const geoJson = new GeoJSON()
-      const options = { dataProjection: 'EPSG:4326' }
-
-      this.tasks.forEach((geom) => {
-        const feature = geoJson.readFeature({ geometry: geom.geojson, type: 'Feature' }, options)
-        features.push(feature)
-      })
-
-      let extent = boundingExtent([])
-      features.forEach((feature) => {
-        const geometry = feature.getGeometry()
-        if (geometry) {
-          extend(extent, geometry.getExtent())
-        }
-      })
-      */
-      let extent = boundingExtent([])
-      const geoJson = new GeoJSON()
-      const options = { dataProjection: 'EPSG:4326' }
-      const task = this.tasks?.[this.taskIndex]
-      const feature = geoJson.readFeature({ geometry: task.geojson, type: 'Feature' }, options)
-      const geometry = feature.getGeometry()
-      extend(extent, geometry.getExtent())
-      return extent
-    },
   },
   methods: {
     addResult(value) {
@@ -141,6 +125,10 @@ export default defineComponent({
       if (!this.taskIndex <= 0) {
         this.taskIndex--
         this.taskId = this.tasks[this.taskIndex].taskId
+        this.intersectingFeatures = this.filterOsmFeatures(
+          this.taskFeatures?.[this.taskIndex],
+          this.osmFeatureCollection,
+        )
       }
     },
     createInformationPages,
@@ -152,6 +140,7 @@ export default defineComponent({
       if (this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
         this.taskIndex++
         this.taskId = this.tasks[this.taskIndex].taskId
+        this.filterOsmFeatures()
       }
     },
     isAnswered() {
@@ -159,11 +148,98 @@ export default defineComponent({
       const defined = result !== undefined
       return defined
     },
+    // Use this when the overall task group extent is not too large
+    computeTaskGroupExtent() {
+      const features = new Collection()
+
+      this.taskFeatures.forEach((feature) => features.push(feature))
+
+      let extent = boundingExtent([])
+      features.forEach((feature) => {
+        const geometry = feature.getGeometry()
+        if (geometry) {
+          extend(extent, geometry.getExtent())
+        }
+      })
+
+      console.log(getArea(extent))
+      const extentLonLat = transformExtent(extent, 'EPSG:3857', 'EPSG:4326')
+
+      console.log(extentLonLat)
+
+      return extentLonLat
+    },
+    /* TODO: fetch OSM based on array of individual task extents when overall task group extent is too large?
+    computeTaskExtent() {
+      const feature = this.taskFeatures?.[this.taskIndex]
+      const geometry = feature.getGeometry()
+      const extent = geometry.getExtent()
+      
+      console.log(extent)
+      console.log( getArea(transformExtent(extent, 'EPSG:4326', 'EPSG:3857' )))
+
+      return extent
+    },
+    */
+    async fetchOSMFeatures() {
+      try {
+        this.osmFeatureCollection.clear()
+        const geoJson = new GeoJSON()
+        const taskGroupExtent = this.computeTaskGroupExtent()
+        const osmGeometries = await extractGeometries(
+          taskGroupExtent.toString(),
+          'building=* and geometry:polygon',
+          '2024-03-25',
+        )
+
+        osmGeometries.forEach((osmGeom) => {
+          const osmFeature = geoJson.readFeature({ geometry: osmGeom, type: 'Feature' })
+          this.osmFeatureCollection.push(osmFeature)
+        })
+
+        this.ready = true
+      } catch (error) {
+        console.error('Error fetching OSM features:', error)
+      }
+    },
+    filterOsmFeatures() {
+      const geoJson = new GeoJSON()
+      const options = {
+        dataProjection: 'EPSG:4326',
+        featureProjection: 'EPSG:3857',
+      }
+      const turfOsmFeatures = this.osmFeatureCollection
+        .getArray()
+        .map((f) => geoJson.writeFeatureObject(f))
+      const turfTaskFeature = geoJson.writeFeatureObject(
+        this.taskFeatures?.[this.taskIndex],
+        options,
+      )
+      const filtered = turfOsmFeatures.filter((f) => booleanIntersects(turfTaskFeature, f))
+      this.intersectingFeatures = filtered.map((f) => geoJson.readFeature(f, options))
+    },
+    makeTaskFeature(task) {
+      const geoJson = new GeoJSON()
+
+      const geom = task.geojson
+      const feature = { geometry: geom, type: 'Feature' }
+      const options = {
+        dataProjection: 'EPSG:4326',
+        featureProjection: 'EPSG:3857',
+      }
+
+      const newFeature = geoJson.readFeature(feature, options)
+      newFeature.setProperties({ taskId: task.taskId })
+
+      return newFeature
+    },
   },
   emits: ['created'],
   created() {
     this.startTime = new Date().toISOString()
     this.taskId = this.tasks[this.taskIndex].taskId
+    this.taskFeatures = this.tasks.map(this.makeTaskFeature)
+    this.fetchOSMFeatures()
     this.$emit('created')
     this.logMappingStarted(this.project.projectType)
   },
@@ -206,10 +282,11 @@ export default defineComponent({
   <v-container class="ma-0 pa-0">
     <conflation-project-task
       ref="conflation-project-task"
-      :task="tasks?.[taskIndex]"
+      :taskFeature="taskFeatures?.[taskIndex]"
       :project="project"
-      :taskExtent="computeTaskExtent"
+      :intersectingFeatures="intersectingFeatures"
       :transparent="transparent"
+      :ready="ready"
     />
   </v-container>
   <option-buttons
@@ -218,6 +295,7 @@ export default defineComponent({
     :result="results[taskId]"
     :taskId="taskId"
     @addResult="addResult"
+    :disabled="!ready"
   />
   <v-toolbar color="white" density="compact" extension-height="20" extended>
     <v-spacer />
diff --git a/src/components/ConflationProjectTask.vue b/src/components/ConflationProjectTask.vue
index 865b2bf..1ed4b65 100644
--- a/src/components/ConflationProjectTask.vue
+++ b/src/components/ConflationProjectTask.vue
@@ -1,17 +1,8 @@
 <script lang="ts">
 import hex2rgb from '@/utils/hex2rgb'
 import makeXyzUrl from '@/utils/makeXyzUrl'
-import type { OlMap, OlView } from 'node_modules/vue3-openlayers/dist/components/map'
-import type { OlSourceVector } from 'node_modules/vue3-openlayers/dist/components/sources'
-import { Collection } from 'ol'
-import { GeoJSON } from 'ol/format'
+import { Feature } from 'ol'
 import { type PropType, defineComponent } from 'vue'
-import { extractGeometries } from '@/utils/extractOSMGeometries'
-
-interface Task {
-  taskId: string
-  geojson: object
-}
 
 export interface Project {
   tileServer: {
@@ -26,8 +17,8 @@ export interface Project {
 
 export default defineComponent({
   props: {
-    task: {
-      type: Object as PropType<Task>,
+    taskFeature: {
+      type: Feature,
       required: true,
     },
     project: {
@@ -40,43 +31,30 @@ export default defineComponent({
     compact: {
       type: Boolean,
     },
-    taskExtent: {
-      type: Array,
-      required: true,
+    intersectingFeatures: {
+      type: Array<Feature>,
+    },
+    ready: {
+      type: Boolean,
+      default: false,
     },
   },
   data(): {
     center: [number, number]
-    results: Record<string, number>
     startTime: string | null
-    currentTaskIndex: number
     zoom: number
-    osmFeatureCollection: Collection
-    osmLayer: any
-    ready: Boolean
   } {
     return {
       center: [0, 0],
-      results: {},
       startTime: null,
-      currentTaskIndex: 0,
       zoom: 3,
-      osmFeatureCollection: new Collection(),
-      osmLayer: null,
-      ready: false,
     }
   },
   mounted() {
-    this.fetchOSMFeatures().then(() => {
-      this.ready = true
-      this.fitView()
-    })
+    this.fitView()
   },
   updated() {
-    this.fetchOSMFeatures().then(() => {
-      this.ready = true
-      this.fitView()
-    })
+    this.fitView()
   },
   computed: {
     mapStyle() {
@@ -95,27 +73,12 @@ export default defineComponent({
       // return this.project.tileServer.maxZoom ?? 19;
       return this.project.tileServer.maxZoom ?? 22
     },
-    taskFeatures() {
-      const features = new Collection()
-      const geoJson = new GeoJSON()
-
-      const geom = this.task.geojson
-      const feature = { geometry: geom, type: 'Feature' }
-      const options = {
-        dataProjection: 'EPSG:4326',
-        featureProjection: 'EPSG:3857',
-      }
-
-      const newFeature = geoJson.readFeature(feature, options)
-      features.push(newFeature)
-
-      return features
-    },
   },
   methods: {
     fitView(duration = 600, delay = 100) {
       const map = (this.$refs.map as InstanceType<typeof OlMap>).map
       const mapView = this.$refs.mapView as InstanceType<typeof OlView>
+      // TODO: Use combined extent of taskSource and osmFeatureSource
       const extent = (
         this.$refs.taskSource as InstanceType<typeof OlSourceVector>
       ).source.getExtent()
@@ -131,29 +94,6 @@ export default defineComponent({
         }, delay)
       }
     },
-    async fetchOSMFeatures() {
-      try {
-        this.ready = false
-        this.osmFeatureCollection.clear()
-        const geoJson = new GeoJSON()
-        const osmGeometries = await extractGeometries(
-          this.taskExtent.toString(),
-          'building=* and geoemtry:polygon',
-          '2024-03-25',
-        )
-        const options = {
-          dataProjection: 'EPSG:4326',
-          featureProjection: 'EPSG:3857',
-        }
-        console.log('extent', this.taskExtent.toString())
-        osmGeometries.forEach((osmGeom) => {
-          const osmFeature = geoJson.readFeature({ geometry: osmGeom, type: 'Feature' }, options)
-          this.osmFeatureCollection.push(osmFeature)
-        })
-      } catch (error) {
-        console.error('Error fetching OSM features:', error)
-      }
-    },
     strokeColor(hex) {
       const color = hex2rgb(hex, this.transparent ? 0.4 : 0.8)
       return color
@@ -187,21 +127,26 @@ export default defineComponent({
       />
       <ol-source-xyz v-else :url="xyzUrl" :attributions="project.tileServer.credits" />
     </ol-tile-layer>
-    <ol-vector-layer id="taskLayer" ref="taskLayer" :zIndex="4" :key="task.taskId">
-      <ol-source-vector :features="taskFeatures" ref="taskSource" ident="taskSource" />
+    <ol-vector-layer id="taskLayer" ref="taskLayer" :zIndex="ready ? 4 : 0" :key="ready">
+      <ol-source-vector :features="[taskFeature]" ref="taskSource" ident="taskSource" />
       <ol-style :key="transparent">
-        <ol-style-stroke :color="ready ? strokeColor('#1976D2') : '#0000'" :width="5" />
+        <ol-style-stroke :color="strokeColor('#1976D2')" :width="5" />
         <ol-style-fill color="#0000" />
       </ol-style>
     </ol-vector-layer>
-    <ol-vector-layer id="osmFeatureLayer" ref="osmFeatureLayer" :zIndex="3" :key="task.taskId">
+    <ol-vector-layer
+      id="osmFeatureLayer"
+      ref="osmFeatureLayer"
+      :zIndex="3"
+      :key="taskFeature.get('taskId')"
+    >
       <ol-source-vector
-        :features="osmFeatureCollection"
+        :features="intersectingFeatures"
         ref="osmFeatureSource"
         ident="osmFeatureSource"
       />
       <ol-style :key="transparent">
-        <ol-style-stroke :color="ready ? strokeColor('#D32F2F') : '#0000'" :width="5" />
+        <ol-style-stroke :color="strokeColor('#D32F2F')" :width="5" />
         <ol-style-fill color="#0000" />
       </ol-style>
     </ol-vector-layer>
diff --git a/src/utils/extractOSMGeometries.ts b/src/utils/extractOSMGeometries.ts
index 6da2ba5..6bbdc41 100644
--- a/src/utils/extractOSMGeometries.ts
+++ b/src/utils/extractOSMGeometries.ts
@@ -9,8 +9,9 @@ export async function extractGeometries(bbox: string, filter: string, time: stri
       },
       body: new URLSearchParams({
         bboxes: bbox,
-        filter: 'building=* and geometry:polygon',
-        time: '2024-03-25',
+        filter: filter,
+        time: time,
+        properties: 'metadata',
         clipGeometry: false,
       }),
     })
diff --git a/yarn.lock b/yarn.lock
index 6bbc298..e06a144 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1297,6 +1297,41 @@
     "@turf/helpers" "^6.5.0"
     "@turf/meta" "^6.5.0"
 
+"@turf/boolean-disjoint@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@turf/boolean-disjoint/-/boolean-disjoint-7.2.0.tgz#84b07b10b6b0fa1e3a8276dd81dd30d697059a47"
+  integrity sha512-xdz+pYKkLMuqkNeJ6EF/3OdAiJdiHhcHCV0ykX33NIuALKIEpKik0+NdxxNsZsivOW6keKwr61SI+gcVtHYcnQ==
+  dependencies:
+    "@turf/boolean-point-in-polygon" "^7.2.0"
+    "@turf/helpers" "^7.2.0"
+    "@turf/line-intersect" "^7.2.0"
+    "@turf/meta" "^7.2.0"
+    "@turf/polygon-to-line" "^7.2.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.8.1"
+
+"@turf/boolean-intersects@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@turf/boolean-intersects/-/boolean-intersects-7.2.0.tgz#c0893f98820293e446b4229c651d0743b503939c"
+  integrity sha512-GLRyLQgK3F14drkK5Qi9Mv7Z9VT1bgQUd9a3DB3DACTZWDSwfh8YZUFn/HBwRkK8dDdgNEXaavggQHcPi1k9ow==
+  dependencies:
+    "@turf/boolean-disjoint" "^7.2.0"
+    "@turf/helpers" "^7.2.0"
+    "@turf/meta" "^7.2.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.8.1"
+
+"@turf/boolean-point-in-polygon@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-7.2.0.tgz#0f9d18bb058b118340d79a0e5f346bd09a363a9a"
+  integrity sha512-lvEOjxeXIp+wPXgl9kJA97dqzMfNexjqHou+XHVcfxQgolctoJiRYmcVCWGpiZ9CBf/CJha1KmD1qQoRIsjLaA==
+  dependencies:
+    "@turf/helpers" "^7.2.0"
+    "@turf/invariant" "^7.2.0"
+    "@types/geojson" "^7946.0.10"
+    point-in-polygon-hao "^1.1.0"
+    tslib "^2.8.1"
+
 "@turf/buffer@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@turf/buffer/-/buffer-6.5.0.tgz#22bd0d05b4e1e73eaebc69b8f574a410ff704842"
@@ -1330,6 +1365,33 @@
   resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-6.5.0.tgz#f79af094bd6b8ce7ed2bd3e089a8493ee6cae82e"
   integrity sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==
 
+"@turf/helpers@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-7.2.0.tgz#5771308108c98d608eb8e7f16dcd0eb3fb8a3417"
+  integrity sha512-cXo7bKNZoa7aC7ydLmUR02oB3IgDe7MxiPuRz3cCtYQHn+BJ6h1tihmamYDWWUlPHgSNF0i3ATc4WmDECZafKw==
+  dependencies:
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.8.1"
+
+"@turf/invariant@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@turf/invariant/-/invariant-7.2.0.tgz#ba5b377ea20ee8c45af0a4c9b8bf03aa1c43bd5d"
+  integrity sha512-kV4u8e7Gkpq+kPbAKNC21CmyrXzlbBgFjO1PhrHPgEdNqXqDawoZ3i6ivE3ULJj2rSesCjduUaC/wyvH/sNr2Q==
+  dependencies:
+    "@turf/helpers" "^7.2.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.8.1"
+
+"@turf/line-intersect@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@turf/line-intersect/-/line-intersect-7.2.0.tgz#74f6a149429718ff2219329a5e3239f784f44489"
+  integrity sha512-GhCJVEkc8EmggNi85EuVLoXF5T5jNVxmhIetwppiVyJzMrwkYAkZSYB3IBFYGUUB9qiNFnTwungVSsBV/S8ZiA==
+  dependencies:
+    "@turf/helpers" "^7.2.0"
+    "@types/geojson" "^7946.0.10"
+    sweepline-intersections "^1.5.0"
+    tslib "^2.8.1"
+
 "@turf/meta@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@turf/meta/-/meta-6.5.0.tgz#b725c3653c9f432133eaa04d3421f7e51e0418ca"
@@ -1337,6 +1399,24 @@
   dependencies:
     "@turf/helpers" "^6.5.0"
 
+"@turf/meta@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@turf/meta/-/meta-7.2.0.tgz#6a6b1918890b4d9d2b5ff10b3ad47e2fd7470912"
+  integrity sha512-igzTdHsQc8TV1RhPuOLVo74Px/hyPrVgVOTgjWQZzt3J9BVseCdpfY/0cJBdlSRI4S/yTmmHl7gAqjhpYH5Yaw==
+  dependencies:
+    "@turf/helpers" "^7.2.0"
+    "@types/geojson" "^7946.0.10"
+
+"@turf/polygon-to-line@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@turf/polygon-to-line/-/polygon-to-line-7.2.0.tgz#f1d209606cbe404e29246135695c3fcaa1269fd5"
+  integrity sha512-9jeTN3LiJ933I5sd4K0kwkcivOYXXm1emk0dHorwXeSFSHF+nlYesEW3Hd889wb9lZd7/SVLMUeX/h39mX+vCA==
+  dependencies:
+    "@turf/helpers" "^7.2.0"
+    "@turf/invariant" "^7.2.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.8.1"
+
 "@turf/projection@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@turf/projection/-/projection-6.5.0.tgz#d2aad862370bf03f2270701115464a8406c144b2"
@@ -1373,6 +1453,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
+"@types/geojson@^7946.0.10":
+  version "7946.0.16"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.16.tgz#8ebe53d69efada7044454e3305c19017d97ced2a"
+  integrity sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==
+
 "@types/jsdom@^21.1.2":
   version "21.1.6"
   resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-21.1.6.tgz#bcbc7b245787ea863f3da1ef19aa1dcfb9271a1b"
@@ -4096,6 +4181,13 @@ playwright@1.44.0:
   optionalDependencies:
     fsevents "2.3.2"
 
+point-in-polygon-hao@^1.1.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/point-in-polygon-hao/-/point-in-polygon-hao-1.2.4.tgz#8662abdcc84bcca230cc3ecbb0b0ab1a306f1bd6"
+  integrity sha512-x2pcvXeqhRHlNRdhLs/tgFapAbSSe86wa/eqmj1G6pWftbEs5aVRJhRGM6FYSUERKu0PjekJzMq0gsI2XyiclQ==
+  dependencies:
+    robust-predicates "^3.0.2"
+
 polylabel@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/polylabel/-/polylabel-1.1.0.tgz#9483e64fc7a12a49f43e07e7a06752214ed2a8e7"
@@ -4330,6 +4422,11 @@ robust-predicates@^2.0.4:
   resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-2.0.4.tgz#0a2367a93abd99676d075981707f29cfb402248b"
   integrity sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg==
 
+robust-predicates@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
+  integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
+
 rollup@^3.27.1:
   version "3.29.4"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
@@ -4585,16 +4682,6 @@ string-template@~0.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
@@ -4718,6 +4805,13 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
 
+sweepline-intersections@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/sweepline-intersections/-/sweepline-intersections-1.5.0.tgz#85ab3629a291875926fae0acd508496430d8a647"
+  integrity sha512-AoVmx72QHpKtItPu72TzFL+kcYjd67BPLDoR0LarIk+xyaRg+pDTMFXndIEvZf9xEKnJv6JdhgRMnocoG0D3AQ==
+  dependencies:
+    tinyqueue "^2.0.0"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -4773,7 +4867,7 @@ tinyqueue@^1.2.0:
   resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-1.2.3.tgz#b6a61de23060584da29f82362e45df1ec7353f3d"
   integrity sha512-Qz9RgWuO9l8lT+Y9xvbzhPT2efIUIFd69N7eF7tJ9lnQl0iLj1M7peK7IoUGZL9DJHw9XftqLreccfxcQgYLxA==
 
-tinyqueue@^2.0.3:
+tinyqueue@^2.0.0, tinyqueue@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.3.tgz#64d8492ebf39e7801d7bd34062e29b45b2035f08"
   integrity sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==
@@ -4822,6 +4916,11 @@ tslib@^2.1.0, tslib@^2.6.2:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
+tslib@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 turf-jsts@*:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/turf-jsts/-/turf-jsts-1.2.3.tgz#59757f542afbff9a577bbf411f183b8f48d38aa4"

From 6d7dea610b50a7f6129018acf97e8d6fe2e5e1e4 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 3 Apr 2025 20:25:50 +0200
Subject: [PATCH 13/29] fix(conflation): filter on back button

---
 src/components/ConflationProject.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index 20f582b..3c085eb 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -125,10 +125,7 @@ export default defineComponent({
       if (!this.taskIndex <= 0) {
         this.taskIndex--
         this.taskId = this.tasks[this.taskIndex].taskId
-        this.intersectingFeatures = this.filterOsmFeatures(
-          this.taskFeatures?.[this.taskIndex],
-          this.osmFeatureCollection,
-        )
+        this.filterOsmFeatures()
       }
     },
     createInformationPages,

From 24c49f19da77944b3dc86cc5a45ca4d64bfbea4b Mon Sep 17 00:00:00 2001
From: martamagnani <marta.magnani21@gmail.com>
Date: Tue, 8 Apr 2025 15:17:06 +0200
Subject: [PATCH 14/29] feat:change group assignment order for conflation
 projects (prioritize nearly completed groups)

---
 src/views/ProjectView.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 7cf1f5f..bda4dd8 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -142,8 +142,10 @@ export default defineComponent({
     },
     bindTaskGroup() {
       onValue(getGroupsQuery(this.projectId), (snapshot) => {
-        const data = snapshot.val() || {}
-        const flatGroups = Object.values(data).flat()
+        const flatGroups: any[] = []
+        snapshot.forEach((childSnapshot) => {
+        flatGroups.push(childSnapshot.val())
+        })
         const completed = Object.keys(this.projectContributions)
         const available = flatGroups.filter(
           (g) => g.requiredCount > 0 && !completed.includes(g.groupId),
@@ -161,9 +163,13 @@ export default defineComponent({
         } else {
           this.hideDialog()
         }
+        if (this.project.projectType == "8") {
+          this.group = available[0]
+        } else {
         const random = available[Math.floor(Math.random() * available.length)]
         this.group = random
-        this.bindTasks()
+        }
+        this.bindTasks()  
       })
     },
     bindTasks() {

From eb36222d4e4bc6e45f1938b52605204d0580a1c8 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Tue, 8 Apr 2025 15:51:46 +0200
Subject: [PATCH 15/29] feat: configurable option to prioritize nearly
 completed task groups per project type

---
 src/config/projectTypes.ts |  1 +
 src/views/ProjectView.vue  | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/config/projectTypes.ts b/src/config/projectTypes.ts
index 07486a6..f789274 100644
--- a/src/config/projectTypes.ts
+++ b/src/config/projectTypes.ts
@@ -30,6 +30,7 @@ const projectTypes = {
   '8': {
     name: 'Conflation',
     component: 'conflationProject',
+    prioritizeNearlyCompletedGroups: true,
   },
 }
 
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index bda4dd8..f8020aa 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -144,7 +144,7 @@ export default defineComponent({
       onValue(getGroupsQuery(this.projectId), (snapshot) => {
         const flatGroups: any[] = []
         snapshot.forEach((childSnapshot) => {
-        flatGroups.push(childSnapshot.val())
+          flatGroups.push(childSnapshot.val())
         })
         const completed = Object.keys(this.projectContributions)
         const available = flatGroups.filter(
@@ -163,13 +163,13 @@ export default defineComponent({
         } else {
           this.hideDialog()
         }
-        if (this.project.projectType == "8") {
+        if (projectTypes[this.project.projectType]?.prioritizeNearlyCompletedGroups) {
           this.group = available[0]
         } else {
-        const random = available[Math.floor(Math.random() * available.length)]
-        this.group = random
+          const random = available[Math.floor(Math.random() * available.length)]
+          this.group = random
         }
-        this.bindTasks()  
+        this.bindTasks()
       })
     },
     bindTasks() {

From f694aa77b9e2028eb7f57e113413b364365cf069 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 9 Apr 2025 14:03:34 +0200
Subject: [PATCH 16/29] feat: fetch OSM features from Overpass

---
 package.json                           |   1 +
 src/components/ConflationProject.vue   |  13 +-
 src/utils/extractOSMGeometries.ts      |  30 ----
 src/utils/fetchFeaturesFromOverpass.ts |  27 ++++
 yarn.lock                              | 196 ++++++++++++++++++++++++-
 5 files changed, 226 insertions(+), 41 deletions(-)
 delete mode 100644 src/utils/extractOSMGeometries.ts
 create mode 100644 src/utils/fetchFeaturesFromOverpass.ts

diff --git a/package.json b/package.json
index db071b5..c553a0d 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "ol": "^9.1.0",
     "ol-contextmenu": "^5.4.0",
     "ol-ext": "^4.0.17",
+    "osmtogeojson": "^3.0.0-beta.5",
     "pako": "^2.1.0",
     "pinia": "^2.1.6",
     "tinycolor2": "^1.6.0",
diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index 3c085eb..eb86dfc 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -15,7 +15,7 @@ import { boundingExtent, extend, getArea } from 'ol/extent'
 import { transformExtent } from 'ol/proj'
 import { booleanIntersects } from '@turf/boolean-intersects'
 
-import { extractGeometries } from '@/utils/extractOSMGeometries'
+import { fetchFeaturesFromOverpass } from '@/utils/fetchFeaturesFromOverpass'
 
 export default defineComponent({
   components: {
@@ -183,14 +183,15 @@ export default defineComponent({
         this.osmFeatureCollection.clear()
         const geoJson = new GeoJSON()
         const taskGroupExtent = this.computeTaskGroupExtent()
-        const osmGeometries = await extractGeometries(
+
+        const features = await fetchFeaturesFromOverpass(
           taskGroupExtent.toString(),
-          'building=* and geometry:polygon',
-          '2024-03-25',
+          // TODO: use this.project.filter instead of hard-coded
+          'way["building"]',
         )
 
-        osmGeometries.forEach((osmGeom) => {
-          const osmFeature = geoJson.readFeature({ geometry: osmGeom, type: 'Feature' })
+        features.forEach((f) => {
+          const osmFeature = geoJson.readFeature(f)
           this.osmFeatureCollection.push(osmFeature)
         })
 
diff --git a/src/utils/extractOSMGeometries.ts b/src/utils/extractOSMGeometries.ts
deleted file mode 100644
index 6bbdc41..0000000
--- a/src/utils/extractOSMGeometries.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-const OHSOME_API_URL = 'https://api.ohsome.org/v1/elements/geometry'
-
-export async function extractGeometries(bbox: string, filter: string, time: string) {
-  try {
-    const response = await fetch(OHSOME_API_URL, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-      },
-      body: new URLSearchParams({
-        bboxes: bbox,
-        filter: filter,
-        time: time,
-        properties: 'metadata',
-        clipGeometry: false,
-      }),
-    })
-
-    if (!response.ok) {
-      throw new Error(`Error: ${response.statusText}`)
-    }
-
-    const data = await response.json()
-
-    return data.features.map((feature: any) => feature.geometry)
-  } catch (error) {
-    console.error('Error fetching geometries:', error)
-    throw error
-  }
-}
diff --git a/src/utils/fetchFeaturesFromOverpass.ts b/src/utils/fetchFeaturesFromOverpass.ts
new file mode 100644
index 0000000..2174a6e
--- /dev/null
+++ b/src/utils/fetchFeaturesFromOverpass.ts
@@ -0,0 +1,27 @@
+import osmtogeojson from 'osmtogeojson'
+
+const OVERPASS_API_URL = 'https://overpass-api.de/api/interpreter'
+
+export async function fetchFeaturesFromOverpass(bbox: string, filter: string) {
+  const query = `[out:json][bbox];${filter}; out meta; out geom;`
+
+  try {
+    const response = await fetch(OVERPASS_API_URL, {
+      method: 'POST',
+      body: new URLSearchParams({
+        data: query,
+        bbox: bbox,
+      }),
+    })
+    if (!response.ok) {
+      throw new Error(`Error: ${response.statusText}`)
+    }
+    const json = await response.json()
+    const geojson = osmtogeojson(json, { flatProperties: true })
+    const features = geojson.features
+    return features
+  } catch (error) {
+    console.error('Error fetching geometries:', error)
+    throw error
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index e06a144..a4a79d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1074,6 +1074,14 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@mapbox/geojson-rewind@0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz#591a5d71a9cd1da1a0bf3420b3bea31b0fc7946a"
+  integrity sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==
+  dependencies:
+    get-stream "^6.0.1"
+    minimist "^1.2.6"
+
 "@mdi/font@^7.4.47":
   version "7.4.47"
   resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.4.47.tgz#2ae522867da3a5c88b738d54b403eb91471903af"
@@ -1453,7 +1461,7 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
-"@types/geojson@^7946.0.10":
+"@types/geojson@^7946.0", "@types/geojson@^7946.0.10":
   version "7946.0.16"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.16.tgz#8ebe53d69efada7044454e3305c19017d97ced2a"
   integrity sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==
@@ -1873,6 +1881,19 @@
   resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.4.0.tgz#f01e2f6089b5098136fb084a0dd0cdd4533b72b0"
   integrity sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==
 
+"@xmldom/xmldom@0.8.3":
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.3.tgz#beaf980612532aa9a3004aff7e428943aeaa0711"
+  integrity sha512-Lv2vySXypg4nfa51LY1nU8yDAGo/5YwF+EY/rUZgIbfvwVARcd67ttCM8SMsTeJy51YhHYavEq+FS6R0hW9PFQ==
+
+JSONStream@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-0.8.0.tgz#efc462d5a5bc94ec007f4b22571acd7f6f2ae013"
+  integrity sha512-PiV28BpoUorz9kKFwRbD7+wg0t/k0ITHKn0DgCU44YZ/GaGAZRPt9q5PzoifC85gE55SEPIdMu0Labfxevj8cw==
+  dependencies:
+    jsonparse "0.0.5"
+    through "~2.2.7"
+
 abab@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -2078,6 +2099,11 @@ btoa@^1.2.1:
   resolved "https://registry.yarnpkg.com/btoa/-/btoa-1.2.1.tgz#01a9909f8b2c93f6bf680ba26131eb30f7fa3d73"
   integrity sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==
 
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
 cac@^6.7.14:
   version "6.7.14"
   resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
@@ -2260,6 +2286,16 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+concat-stream@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-2.0.0.tgz#414cf5af790a48c60ab9be4527d56d5e41133cb1"
+  integrity sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.0.2"
+    typedarray "^0.0.6"
+
 confbox@^0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.1.7.tgz#ccfc0a2bcae36a84838e83a3b7f770fb17d6c579"
@@ -2283,6 +2319,11 @@ core-js@^3.6.0, core-js@^3.8.3:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.37.1.tgz#d21751ddb756518ac5a00e4d66499df981a62db9"
   integrity sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==
 
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
 cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -2456,6 +2497,11 @@ dom-walk@^0.1.0:
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
   integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
 
+domelementtype@1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
+  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
+
 domexception@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673"
@@ -2463,11 +2509,25 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
+domhandler@2.2:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.2.1.tgz#59df9dcd227e808b365ae73e1f6684ac3d946fc2"
+  integrity sha512-MFFBQFGkyTuNe3vL9WEw9JdlCwIoBYpOGESLeZAvc/jClYNsOl6P1KzevJbWg76GovdEycfR7/2/Ra7NnqtMKw==
+  dependencies:
+    domelementtype "1"
+
 dompurify@^2.2.0:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.5.7.tgz#6e0d36b9177db5a99f18ade1f28579db5ab839d7"
   integrity sha512-2q4bEI+coQM8f5ez7kt2xclg1XsecaV9ASJk/54vwlfRRNQfDqJz2pzQ8t0Ix/ToBpXlVjrRIx7pFC/o8itG2Q==
 
+domutils@1.3:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.3.0.tgz#9ad4d59b5af6ca684c62fe6d768ef170e70df192"
+  integrity sha512-1UdPmldjSGewOuWE40YYFZB1Q4im4LZoCMXGYeTeLz3R9hvxrDYJPRcPHXR4yBbubQebgGNCY2hwpJxmAiUMzQ==
+  dependencies:
+    domelementtype "1"
+
 earcut@^2.2.3:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.4.tgz#6d02fd4d68160c114825d06890a92ecaae60343a"
@@ -3028,6 +3088,14 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
+geojson-numeric@0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/geojson-numeric/-/geojson-numeric-0.2.1.tgz#2c8c032f792cca0747a6e02ffa86c00ee3d2df6c"
+  integrity sha512-rvItMp3W7pe16o2EQTnRw54v6WHdiE4bYjUsdr3FZskFb6oPC7gjLe4zginP+Wd1B/HLl2acTukfn16Lmwn7lg==
+  dependencies:
+    concat-stream "2.0.0"
+    optimist "~0.3.5"
+
 geotiff@^2.0.7:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/geotiff/-/geotiff-2.1.3.tgz#993f40f2aa6aa65fb1e0451d86dd22ca8e66910c"
@@ -3063,6 +3131,11 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@
     has-symbols "^1.0.3"
     hasown "^2.0.0"
 
+get-stream@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
 get-symbol-description@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz#533744d5aa20aca4e079c8e5daf7fd44202821f5"
@@ -3242,6 +3315,16 @@ html2canvas@^1.0.0-rc.5:
     css-line-break "^2.1.0"
     text-segmentation "^1.0.3"
 
+htmlparser2@3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.5.1.tgz#6f42f7657dd19c13f7d65de9118417394a0be6d0"
+  integrity sha512-9ouaQ6sjVJZS4NhPC65zNm2JCJotiH6BVm6iFvI90hRcsIEISMrgjqMUrPpU9G1VS4vTspH4dyaqSRf6JLQPbg==
+  dependencies:
+    domelementtype "1"
+    domhandler "2.2"
+    domutils "1.3"
+    readable-stream "1.1"
+
 http-parser-js@>=0.5.1:
   version "0.5.8"
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.8.tgz#af23090d9ac4e24573de6f6aecc9d84a48bf20e3"
@@ -3312,7 +3395,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2:
+inherits@2, inherits@^2.0.3, inherits@~2.0.1:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -3484,6 +3567,11 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
+
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
@@ -3600,6 +3688,11 @@ jsonc-eslint-parser@^2.3.0:
     espree "^9.0.0"
     semver "^7.3.5"
 
+jsonparse@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-0.0.5.tgz#330542ad3f0a654665b778f3eb2d9a9fa507ac64"
+  integrity sha512-fw7Q/8gFR8iSekUi9I+HqWIap6mywuoe7hQIg3buTVjuZgALKj4HAmm0X6f+TaL4c9NJbvyFQdaI2ppr5p6dnQ==
+
 jspdf@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/jspdf/-/jspdf-2.5.1.tgz#00c85250abf5447a05f3b32ab9935ab4a56592cc"
@@ -3834,6 +3927,11 @@ minimatch@^9.0.1, minimatch@^9.0.3:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
 "minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.0.4:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.1.tgz#f7f85aff59aa22f110b20e27692465cf3bf89481"
@@ -3984,6 +4082,13 @@ once@^1.3.0:
   dependencies:
     wrappy "1"
 
+optimist@~0.3.5:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.3.7.tgz#c90941ad59e4273328923074d2cf2e7cbc6ec0d9"
+  integrity sha512-TCx0dXQzVtSCg2OgY/bO9hjM9cV4XYx09TVK+s3+FhkjT6LovsLe+pPMzpWf+6yXK/hUizs2gUoTw3jHM0VaTQ==
+  dependencies:
+    wordwrap "~0.0.2"
+
 optionator@^0.9.3:
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
@@ -3996,6 +4101,28 @@ optionator@^0.9.3:
     type-check "^0.4.0"
     word-wrap "^1.2.5"
 
+osm-polygon-features@^0.9.1:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/osm-polygon-features/-/osm-polygon-features-0.9.2.tgz#20ae41130c486e49a3b2a3c2b58a1419c4986778"
+  integrity sha512-5zNEFCq+G6X2TDkqbKYLF1+GtWVCCLA8zX+FVhSogsiTRsGquyaGRy5cYNW4BE3ci0MKOLvNTkFNsjsCNtgz0A==
+
+osmtogeojson@^3.0.0-beta.5:
+  version "3.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/osmtogeojson/-/osmtogeojson-3.0.0-beta.5.tgz#c58ed8e4fb3a82a41cf3f00cbe79991e17e028b6"
+  integrity sha512-izvaUWnunrYvMB4LB0ZN15O1+g90c628yHS4SeSR3daVSBF9vdTHL7iVHfg0wEr1uEYjQ+lMJHCiYFusL5yKVg==
+  dependencies:
+    "@mapbox/geojson-rewind" "0.5.2"
+    "@xmldom/xmldom" "0.8.3"
+    JSONStream "0.8.0"
+    concat-stream "2.0.0"
+    geojson-numeric "0.2.1"
+    htmlparser2 "3.5.1"
+    optimist "~0.3.5"
+    osm-polygon-features "^0.9.1"
+    tiny-osmpbf "^0.1.0"
+  optionalDependencies:
+    "@types/geojson" "^7946.0"
+
 p-limit@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
@@ -4117,7 +4244,7 @@ pbf@3.2.1:
     ieee754 "^1.1.12"
     resolve-protobuf-schema "^2.1.0"
 
-pbf@^3.2.1:
+pbf@^3.0.4, pbf@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.3.0.tgz#1790f3d99118333cc7f498de816028a346ef367f"
   integrity sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==
@@ -4342,6 +4469,25 @@ read-pkg@^3.0.0:
     normalize-package-data "^2.3.2"
     path-type "^3.0.0"
 
+readable-stream@1.1:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e"
+  integrity sha512-E98tWzqShvKDGpR2MbjsDkDQWLW2TfWUC15H4tNQhIJ5Lsta84l8nUGL9/ybltGwe+wZzWPpc1Kmd2wQP4bdCA==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@^3.0.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -4495,7 +4641,7 @@ safe-array-concat@^1.1.2:
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
-safe-buffer@>=5.1.0:
+safe-buffer@>=5.1.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -4738,6 +4884,18 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
+string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+  integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==
+
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
@@ -4842,11 +5000,29 @@ three@^0.134.0:
   resolved "https://registry.yarnpkg.com/three/-/three-0.134.0.tgz#d7ad4d85d050da0861bf39749b06ddfb5f17157f"
   integrity sha512-LbBerg7GaSPjYtTOnu41AMp7tV6efUNR3p4Wk5NzkSsNTBuA5mDGOfwwZL1jhhVMLx9V20HolIUo0+U3AXehbg==
 
+through@~2.2.7:
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.2.7.tgz#6e8e21200191d4eb6a99f6f010df46aa1c6eb2bd"
+  integrity sha512-JIR0m0ybkmTcR8URann+HbwKmodP+OE8UCbsifQDYMLD5J3em1Cdn3MYPpbEd5elGDwmP98T+WbqP/tvzA5Mjg==
+
 tiny-emitter@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tiny-inflate@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
+  integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
+
+tiny-osmpbf@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-osmpbf/-/tiny-osmpbf-0.1.0.tgz#0a895717113ebe6aae363c4be5eefa8ecdafb927"
+  integrity sha512-Sl0xuDdM0+bnrYPhTAWnQ5eui8+2cpYCnsBxq0EFR1/IgmfB7+FiC23I8aa7tdP4AjaWvBUMK34kfXdY6C1LCQ==
+  dependencies:
+    pbf "^3.0.4"
+    tiny-inflate "^1.0.2"
+
 tinybench@^2.5.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.8.0.tgz#30e19ae3a27508ee18273ffed9ac7018949acd7b"
@@ -4987,6 +5163,11 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
+
 typescript@~5.1.6:
   version "5.1.6"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
@@ -5062,7 +5243,7 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-util-deprecate@^1.0.2:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
@@ -5384,6 +5565,11 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+  integrity sha512-1tMA907+V4QmxV7dbRvb4/8MaRALK6q9Abid3ndMYnbyo8piisCmeONVqVSXqQA3KaP4SLt5b7ud6E2sqP8TFw==
+
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"

From d6eb402738864823afab25abbcdfd8e4f3853811 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 9 Apr 2025 17:03:51 +0200
Subject: [PATCH 17/29] feat(conflation): use overpass filter from firebase
 project

---
 src/components/ConflationProject.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index eb86dfc..31f5d9f 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -186,8 +186,7 @@ export default defineComponent({
 
         const features = await fetchFeaturesFromOverpass(
           taskGroupExtent.toString(),
-          // TODO: use this.project.filter instead of hard-coded
-          'way["building"]',
+          this.project.filter ?? 'way["building"]',
         )
 
         features.forEach((f) => {

From ef9250b3ed3360319df2dde632f229014e1e7781 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 9 Apr 2025 18:00:11 +0200
Subject: [PATCH 18/29] feat(conflation): write reference (number of
 intersecting features, osm id, osm version) with results

---
 src/components/ConflationProject.vue | 10 +++++++++-
 src/views/ProjectView.vue            |  4 +++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index 31f5d9f..9b39895 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -84,6 +84,7 @@ export default defineComponent({
     return {
       arrowKeys: true,
       center: [0, 0],
+      reference: {},
       results: {},
       startTime: null,
       taskFeatures: null,
@@ -120,6 +121,13 @@ export default defineComponent({
   methods: {
     addResult(value) {
       this.results[this.taskId] = value
+      const numberIntersecting = this.intersectingFeatures.length
+      var ref = { numberIntersecting: numberIntersecting }
+      if (numberIntersecting == 1) {
+        ref.osmId = this.intersectingFeatures[0]?.get('id')
+        ref.version = this.intersectingFeatures[0]?.get('version')
+      }
+      this.reference[this.taskId] = ref
     },
     back() {
       if (!this.taskIndex <= 0) {
@@ -310,7 +318,7 @@ export default defineComponent({
       icon="mdi-content-save"
       color="primary"
       :disabled="Object.keys(results).length < tasks.length"
-      @click="saveResults(results, startTime)"
+      @click="saveResults(results, startTime, reference)"
     />
     <v-btn
       :title="$t('validateProject.moveRight')"
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index f8020aa..842ce00 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -57,7 +57,7 @@ export default defineComponent({
       logMappingStarted: (projectType) => {
         logAnalyticsEvent('mapping_started', { projectType: projectType })
       },
-      saveResults: (results, startTime) => {
+      saveResults: (results, startTime, reference) => {
         const numberOfTasks = Object.keys(results).length
         const endTime = new Date().toISOString()
         const dev = import.meta.env.DEV
@@ -73,6 +73,8 @@ export default defineComponent({
           startTime,
         }
 
+        reference && (entry.reference = reference)
+
         this.completedGroupId = this.group.groupId
 
         goOnline(db)

From 38c3e5bbeca10d684486844a8bca093005f78797 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 10 Apr 2025 11:09:42 +0200
Subject: [PATCH 19/29] feat(conflation): update mission and options based on
 intersecting features by task

---
 src/components/ConflationProject.vue | 131 ++++++++++++++++++++-------
 src/i18n/locales/de.json             |   1 +
 src/i18n/locales/en.json             |   1 +
 src/i18n/locales/fr.json             |   1 +
 4 files changed, 101 insertions(+), 33 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index 9b39895..23de69a 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -36,37 +36,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    /* Do we want custom options in conflate projects?
     options: {
       type: Array,
       default() {
-        return [
-          {
-            mdiIcon: 'mdi-shape',
-            description: `The blue shape accurately outlines the building.`,
-            iconColor: '#1976D2',
-            shortkey: 1,
-            title: 'Blue',
-            value: 1,
-          },
-          {
-            mdiIcon: 'mdi-shape',
-            description: `The red shape accurately outlines the building.`,
-            iconColor: '#D32F2F',
-            shortkey: 2,
-            title: 'Red',
-            value: 0,
-          },
-          {
-            mdiIcon: 'mdi-close-thick',
-            description: `Neither the blue nor the red shape accurately outline a building.`,
-            iconColor: '#616161',
-            title: 'None',
-            shortkey: 3,
-            value: 2,
-          },
-        ]
+        return {}
       },
     },
+    */
     project: {
       type: Object,
       required: true,
@@ -84,11 +61,13 @@ export default defineComponent({
     return {
       arrowKeys: true,
       center: [0, 0],
+      currentOptions: [],
       reference: {},
       results: {},
       startTime: null,
       taskFeatures: null,
       osmFeatureCollection: new Collection(),
+      mission: '',
       intersectingFeatures: [],
       ready: false,
       taskId: undefined,
@@ -111,11 +90,71 @@ export default defineComponent({
       const colors = theme
       return colors
     },
-    mission() {
-      const message = this.$t('conflationProject.whichShape', {
-        feature: this.project?.lookFor,
-      })
-      return message
+    options() {
+      return {
+        validate: [
+          {
+            mdiIcon: 'mdi-check-bold',
+            description: `The shape does outline a building in the image`,
+            iconColor: '#388E3C',
+            shortkey: 1,
+            title: 'Yes',
+            value: 1,
+          },
+          {
+            mdiIcon: 'mdi-close-thick',
+            description: `The shape doesn't match a building in the image`,
+            iconColor: '#D32F2F',
+            shortkey: 2,
+            title: 'No',
+            value: 0,
+          },
+          {
+            mdiIcon: 'mdi-minus-thick',
+            description: `If you're not sure or there is cloud cover / bad imagery.`,
+            iconColor: '#616161',
+            title: 'Not sure',
+            shortkey: 3,
+            value: 2,
+          },
+        ],
+        conflate: [
+          {
+            mdiIcon: 'mdi-shape',
+            description: `The blue shape accurately outlines the building.`,
+            iconColor: '#1976D2',
+            shortkey: 1,
+            title: 'Blue',
+            value: 1,
+          },
+          {
+            mdiIcon: 'mdi-shape',
+            description: `The red shape accurately outlines the building.`,
+            iconColor: '#D32F2F',
+            shortkey: 2,
+            title: 'Red',
+            value: 0,
+          },
+          {
+            mdiIcon: 'mdi-close-thick',
+            description: `Neither the blue nor the red shape accurately outline a building.`,
+            iconColor: '#616161',
+            title: 'None',
+            shortkey: 3,
+            value: 2,
+          },
+        ],
+        skip: [
+          {
+            mdiIcon: 'mdi-flag-outline',
+            description: `There are too many red features here.`,
+            iconColor: '#F57C00',
+            title: 'Skip',
+            shortkey: 1,
+            value: 6,
+          },
+        ],
+      }
     },
   },
   methods: {
@@ -179,7 +218,7 @@ export default defineComponent({
       const feature = this.taskFeatures?.[this.taskIndex]
       const geometry = feature.getGeometry()
       const extent = geometry.getExtent()
-      
+
       console.log(extent)
       console.log( getArea(transformExtent(extent, 'EPSG:4326', 'EPSG:3857' )))
 
@@ -222,6 +261,9 @@ export default defineComponent({
       )
       const filtered = turfOsmFeatures.filter((f) => booleanIntersects(turfTaskFeature, f))
       this.intersectingFeatures = filtered.map((f) => geoJson.readFeature(f, options))
+      const numberIntersecting = this.intersectingFeatures.length
+      this.updateMission(numberIntersecting)
+      this.updateOptions(numberIntersecting)
     },
     makeTaskFeature(task) {
       const geoJson = new GeoJSON()
@@ -238,6 +280,29 @@ export default defineComponent({
 
       return newFeature
     },
+    updateMission(numberIntersecting) {
+      const i18nKey =
+        numberIntersecting > 0
+          ? 'conflationProject.whichShape'
+          : 'conflationProject.doesTheShapeOutline'
+      this.mission = this.$t(i18nKey, { feature: this.project?.lookFor })
+    },
+    updateOptions(numberIntersecting) {
+      switch (numberIntersecting) {
+        case 0: {
+          this.currentOptions = this.options.validate
+          break
+        }
+        case 1: {
+          this.currentOptions = this.options.conflate
+          break
+        }
+        default: {
+          this.currentOptions = this.options.skip
+          this.addResult(this.options.skip[0].value)
+        }
+      }
+    },
   },
   emits: ['created'],
   created() {
@@ -296,7 +361,7 @@ export default defineComponent({
   </v-container>
   <option-buttons
     v-if="taskId"
-    :options="options"
+    :options="currentOptions"
     :result="results[taskId]"
     :taskId="taskId"
     @addResult="addResult"
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 932ff6f..159ec6b 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -223,6 +223,7 @@
     "notAvailableMessage": "Bild nicht verfügbar!"
   },
   "conflationProject": {
+    "doesTheShapeOutline": "Ist der Umriss des {feature} korrekt?",
     "whichShape": "Welche Form ist der korrekte {feature}-Umriss?"
   }
 }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 0b934f6..4d334f5 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -223,6 +223,7 @@
     "notAvailableMessage": "Image not available!"
   },
   "conflationProject": {
+    "doesTheShapeOutline": "Does the shape accurately outline a {feature}?",
     "whichShape": "Which shape accurately outlines the {feature}?"
   }
 }
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 17ccebc..066f055 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -223,6 +223,7 @@
     "notAvailableMessage": "Image non disponible !"
   },
   "conflationProject": {
+    "doesTheShapeOutline": "Est-ce la forme correspond correctement au contour de {feature}?",
     "whichShape": "Quelle forme correspond avec précision au contour de {feature}?"
   }
 }

From 957f3cb705e38747e329bb3ec63c6984369c901a Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 10 Apr 2025 12:51:29 +0200
Subject: [PATCH 20/29] feat(conflation): add instructions component

---
 src/components/ConflationProject.vue          |  30 +++--
 .../ConflationProjectInstructions.vue         | 120 ++++++++++++++++++
 src/i18n/locales/de.json                      |   6 +
 src/i18n/locales/en.json                      |   6 +
 src/i18n/locales/fr.json                      |   6 +
 5 files changed, 155 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ConflationProjectInstructions.vue

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index 23de69a..f14a30a 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -7,7 +7,7 @@ import OptionButtons from '@/components/OptionButtons.vue'
 import ProjectHeader from '@/components/ProjectHeader.vue'
 import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
-import ValidateProjectInstructions from '@/components/ValidateProjectInstructions.vue'
+import ConflationProjectInstructions from '@/components/ConflationProjectInstructions.vue'
 import ValidateProjectTutorial from '@/components/ValidateProjectTutorial.vue'
 import ConflationProjectTask from './ConflationProjectTask.vue'
 import { GeoJSON } from 'ol/format'
@@ -19,7 +19,7 @@ import { fetchFeaturesFromOverpass } from '@/utils/fetchFeaturesFromOverpass'
 
 export default defineComponent({
   components: {
-    validateProjectInstructions: ValidateProjectInstructions,
+    conflationProjectInstructions: ConflationProjectInstructions,
     validateProjectTutorial: ValidateProjectTutorial,
     conflationProjectTask: ConflationProjectTask,
     taskProgress: TaskProgress,
@@ -156,6 +156,15 @@ export default defineComponent({
         ],
       }
     },
+    missions() {
+      return {
+        validate: this.$t('conflationProject.doesTheShapeOutline', {
+          feature: this.project?.lookFor,
+        }),
+        conflate: this.$t('conflationProject.whichShape', { feature: this.project?.lookFor }),
+        skip: this.$t('conflationProject.skip'),
+      }
+    },
   },
   methods: {
     addResult(value) {
@@ -262,8 +271,7 @@ export default defineComponent({
       const filtered = turfOsmFeatures.filter((f) => booleanIntersects(turfTaskFeature, f))
       this.intersectingFeatures = filtered.map((f) => geoJson.readFeature(f, options))
       const numberIntersecting = this.intersectingFeatures.length
-      this.updateMission(numberIntersecting)
-      this.updateOptions(numberIntersecting)
+      this.updateMissionAndOptions(numberIntersecting)
     },
     makeTaskFeature(task) {
       const geoJson = new GeoJSON()
@@ -280,25 +288,21 @@ export default defineComponent({
 
       return newFeature
     },
-    updateMission(numberIntersecting) {
-      const i18nKey =
-        numberIntersecting > 0
-          ? 'conflationProject.whichShape'
-          : 'conflationProject.doesTheShapeOutline'
-      this.mission = this.$t(i18nKey, { feature: this.project?.lookFor })
-    },
-    updateOptions(numberIntersecting) {
+    updateMissionAndOptions(numberIntersecting) {
       switch (numberIntersecting) {
         case 0: {
+          this.mission = this.missions.validate
           this.currentOptions = this.options.validate
           break
         }
         case 1: {
+          this.mission = this.missions.conflate
           this.currentOptions = this.options.conflate
           break
         }
         default: {
           this.currentOptions = this.options.skip
+          this.mission = this.missions.skip
           this.addResult(this.options.skip[0].value)
         }
       }
@@ -338,7 +342,7 @@ export default defineComponent({
       @toggle-dialog="arrowKeys = !arrowKeys"
     >
       <template #instructions>
-        <validate-project-instructions :mission="mission" :options="options" />
+        <conflation-project-instructions :missions="missions" :options="options" />
       </template>
       <template #tutorial>
         <validate-project-tutorial
diff --git a/src/components/ConflationProjectInstructions.vue b/src/components/ConflationProjectInstructions.vue
new file mode 100644
index 0000000..dd21421
--- /dev/null
+++ b/src/components/ConflationProjectInstructions.vue
@@ -0,0 +1,120 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import OptionButton from '@/components/OptionButton.vue'
+
+export default defineComponent({
+  components: {
+    optionButton: OptionButton,
+  },
+  props: {
+    missions: {
+      type: Object,
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+})
+</script>
+
+<template>
+  <v-card-text>
+    <div class="text-h6">{{ $t('projectInstructions.classifyTitle') }}</div>
+    <div class="text-overline">{{ $t('conflationInstructions.onlyBlue') }}:</div>
+    <div class="text-p">{{ missions.validate }}</div>
+    <v-row
+      v-for="(option, optionIndex) in options.validate"
+      :key="optionIndex"
+      align="center"
+      dense
+    >
+      <v-col cols="auto" class="mt-5 mr-4">
+        <option-button :option="option" :only-icon="true" />
+      </v-col>
+      <v-col class="mt-5">{{
+        [option.title, option.description].filter(Boolean).join(': ')
+      }}</v-col>
+    </v-row>
+
+    <div class="text-overline mt-6">{{ $t('conflationInstructions.oneRed') }}:</div>
+    <div class="text-p">{{ missions.conflate }}</div>
+    <v-row
+      v-for="(option, optionIndex) in options.conflate"
+      :key="optionIndex"
+      align="center"
+      dense
+    >
+      <v-col cols="auto" class="mt-5 mr-4">
+        <option-button :option="option" :only-icon="true" />
+      </v-col>
+      <v-col class="mt-5">{{
+        [option.title, option.description].filter(Boolean).join(': ')
+      }}</v-col>
+    </v-row>
+
+    <div class="text-overline mt-6">{{ $t('conflationInstructions.severalRed') }}:</div>
+    <div class="text-p">{{ missions.skip }}.</div>
+    <v-row v-for="(option, optionIndex) in options.skip" :key="optionIndex" align="center" dense>
+      <v-col cols="auto" class="mt-5 mr-4">
+        <option-button :option="option" :only-icon="true" />
+      </v-col>
+      <v-col class="mt-5">{{
+        [option.title, option.description].filter(Boolean).join(': ')
+      }}</v-col>
+    </v-row>
+
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.toggleOpacityTitle') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn color="primary" icon="mdi-eye" size="small" variant="text"> </v-btn>
+        </v-col>
+        <v-col>{{ $t('projectInstructions.toggleOpacityInstruction') }}.</v-col>
+      </v-row>
+    </div>
+
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.resetTitle') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn
+            :title="$t('tileMap.resetView')"
+            color="primary"
+            icon="mdi-fit-to-screen-outline"
+            size="small"
+            variant="text"
+          >
+          </v-btn>
+        </v-col>
+        <v-col>{{ $t('projectInstructions.resetInstruction') }}</v-col>
+      </v-row>
+    </div>
+
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('projectInstructions.move') }}</v-col>
+      </v-row>
+    </div>
+
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-content-save" color="primary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.dontWorry') }}</div>
+    <div class="text-p">{{ $t('projectInstructions.everyTaskIsViewedBy') }}.</div>
+  </v-card-text>
+</template>
+
+<style scoped></style>
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 159ec6b..c235354 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -224,6 +224,12 @@
   },
   "conflationProject": {
     "doesTheShapeOutline": "Ist der Umriss des {feature} korrekt?",
+    "skip": "Überspringe diese Aufgabe",
     "whichShape": "Welche Form ist der korrekte {feature}-Umriss?"
+  },
+  "conflationInstructions": {
+    "oneRed": "Es gibt eine rote Form",
+    "onlyBlue": "Es gibt nur eine blaue Form",
+    "severalRed": "Es gibt mehere rote Formen"
   }
 }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 4d334f5..cb4f09e 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -224,6 +224,12 @@
   },
   "conflationProject": {
     "doesTheShapeOutline": "Does the shape accurately outline a {feature}?",
+    "skip": "Skip this task",
     "whichShape": "Which shape accurately outlines the {feature}?"
+  },
+  "conflationInstructions": {
+    "oneRed": "There is one red shape",
+    "onlyBlue": "There is only a blue shape",
+    "severalRed": "There are several red shapes"
   }
 }
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 066f055..305ff26 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -224,6 +224,12 @@
   },
   "conflationProject": {
     "doesTheShapeOutline": "Est-ce la forme correspond correctement au contour de {feature}?",
+    "skip": "Ignorez cette tâche",
     "whichShape": "Quelle forme correspond avec précision au contour de {feature}?"
+  },
+  "conflationInstructions": {
+    "oneRed": "Il y a une forme rouge",
+    "onlyBlue": "Il n'y a qu'une forme bleue",
+    "severalRed": "Il y a plusieurs formes rouges"
   }
 }

From 13bbfb213f28c3667cfe72cbeabc5a1b0ca45c1c Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 10 Apr 2025 14:20:46 +0200
Subject: [PATCH 21/29] feat(conflation): handle error on fetching from
 overpass api

---
 src/components/ConflationProject.vue   |  4 +++-
 src/i18n/locales/de.json               |  4 +++-
 src/i18n/locales/en.json               |  2 ++
 src/i18n/locales/fr.json               |  2 ++
 src/utils/fetchFeaturesFromOverpass.ts | 32 +++++++++++---------------
 src/views/ProjectView.vue              | 11 +++++++++
 6 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index f14a30a..934e10e 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -252,7 +252,7 @@ export default defineComponent({
 
         this.ready = true
       } catch (error) {
-        console.error('Error fetching OSM features:', error)
+        this.$emit('error')
       }
     },
     filterOsmFeatures() {
@@ -313,6 +313,8 @@ export default defineComponent({
     this.startTime = new Date().toISOString()
     this.taskId = this.tasks[this.taskIndex].taskId
     this.taskFeatures = this.tasks.map(this.makeTaskFeature)
+    this.mission = this.missions.conflate
+    this.currentOptions = this.options.conflate
     this.fetchOSMFeatures()
     this.$emit('created')
     this.logMappingStarted(this.project.projectType)
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index c235354..3b470c7 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -115,8 +115,10 @@
   },
   "projectView": {
     "leave": "Projekt verlassen",
-    "saveResults": "Speichern",
     "AreYouSureYouWantToLeave": "Bist du sicher, dass du das Projekt verlassen möchtest? Deine Beiträge gehen verloren.",
+    "projectErrorTitle": "Das hat nicht geklappt",
+    "projectErrorText": "Leider können wir die Aufgaben nicht bereitstellen.",
+    "saveResults": "Speichern",
     "saveFailed": "Ergebnisse konnten nicht gespeichert werden",
     "resultsSaved": "Danke, {user}! Dein Beitrag wurde gespeichert.",
     "wellDone": "Gut gemacht, {user}!",
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index cb4f09e..42b2ee5 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -116,6 +116,8 @@
   "projectView": {
     "leave": "Leave project",
     "AreYouSureYouWantToLeave": "Are you sure you want to leave the project? Your contributions will be lost.",
+    "projectErrorTitle": "Something went wrong",
+    "projectErrorText": "Sorry, we are unable to prepare your tasks.",
     "saveResults": "Save",
     "saveFailed": "Failed to save results",
     "resultsSaved": "Thanks, {user}! Your contribution has been saved.",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 305ff26..b4cc8ac 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -116,6 +116,8 @@
   "projectView": {
     "leave": "Quitter le projet",
     "AreYouSureYouWantToLeave": "Êtes-vous certain de vouloir quitter le projet ? Vos contributions seront perdues.",
+    "projectErrorTitle": "Ça n'a pas marché",
+    "projectErrorText": "Désolé, nous n'arrivons pas à préparer vos tâches.",
     "saveResults": "Sauvegarder",
     "saveFailed": "Impossible de sauvegarder vos résultats",
     "resultsSaved": "Merci, {user} ! Votre contribution a été sauvegardée.",
diff --git a/src/utils/fetchFeaturesFromOverpass.ts b/src/utils/fetchFeaturesFromOverpass.ts
index 2174a6e..5d79949 100644
--- a/src/utils/fetchFeaturesFromOverpass.ts
+++ b/src/utils/fetchFeaturesFromOverpass.ts
@@ -4,24 +4,18 @@ const OVERPASS_API_URL = 'https://overpass-api.de/api/interpreter'
 
 export async function fetchFeaturesFromOverpass(bbox: string, filter: string) {
   const query = `[out:json][bbox];${filter}; out meta; out geom;`
-
-  try {
-    const response = await fetch(OVERPASS_API_URL, {
-      method: 'POST',
-      body: new URLSearchParams({
-        data: query,
-        bbox: bbox,
-      }),
-    })
-    if (!response.ok) {
-      throw new Error(`Error: ${response.statusText}`)
-    }
-    const json = await response.json()
-    const geojson = osmtogeojson(json, { flatProperties: true })
-    const features = geojson.features
-    return features
-  } catch (error) {
-    console.error('Error fetching geometries:', error)
-    throw error
+  const response = await fetch(OVERPASS_API_URL, {
+    method: 'POST',
+    body: new URLSearchParams({
+      data: query,
+      bbox: bbox,
+    }),
+  })
+  if (!response.ok) {
+    throw new Error(`Error: ${response.statusText}`)
   }
+  const json = await response.json()
+  const geojson = osmtogeojson(json, { flatProperties: true })
+  const features = geojson.features
+  return features
 }
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 842ce00..8fa8646 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -234,6 +234,16 @@ export default defineComponent({
     handleTaskComponentCreated() {
       goOffline(db)
     },
+    handleProjectError() {
+      this.to = '/projects'
+      this.showDialog(
+        this.$t('projectView.projectErrorTitle'),
+        this.$t('projectView.projectErrorText'),
+        this.leaveProject,
+        true,
+        false,
+      )
+    },
   },
   beforeRouteLeave(to, from, next) {
     if (this.mode === 'contribute' && to.name !== 'authentication') {
@@ -274,6 +284,7 @@ export default defineComponent({
       :tutorial="tutorial"
       :tutorialTasks="tutorialTasks"
       @created="handleTaskComponentCreated"
+      @error="handleProjectError"
     />
 
     <v-dialog v-model="nextDialog" max-width="600" persistent>

From 5d347299ad9893701ad624f66f4eae9f47618467 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 17 Apr 2025 14:38:44 +0200
Subject: [PATCH 22/29] feat(conflation): update mission on locale change

---
 src/components/ConflationProject.vue | 31 +++++++++++++++-------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index 934e10e..3793b32 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -84,6 +84,9 @@ export default defineComponent({
     ready() {
       this.filterOsmFeatures()
     },
+    '$i18n.locale'() {
+      this.updateMissionAndOptions()
+    },
   },
   computed: {
     colors() {
@@ -156,15 +159,6 @@ export default defineComponent({
         ],
       }
     },
-    missions() {
-      return {
-        validate: this.$t('conflationProject.doesTheShapeOutline', {
-          feature: this.project?.lookFor,
-        }),
-        conflate: this.$t('conflationProject.whichShape', { feature: this.project?.lookFor }),
-        skip: this.$t('conflationProject.skip'),
-      }
-    },
   },
   methods: {
     addResult(value) {
@@ -288,21 +282,30 @@ export default defineComponent({
 
       return newFeature
     },
+    missions() {
+      return {
+        validate: this.$t('conflationProject.doesTheShapeOutline', {
+          feature: this.project?.lookFor,
+        }),
+        conflate: this.$t('conflationProject.whichShape', { feature: this.project?.lookFor }),
+        skip: this.$t('conflationProject.skip'),
+      }
+    },
     updateMissionAndOptions(numberIntersecting) {
       switch (numberIntersecting) {
         case 0: {
-          this.mission = this.missions.validate
+          this.mission = this.missions().validate
           this.currentOptions = this.options.validate
           break
         }
         case 1: {
-          this.mission = this.missions.conflate
+          this.mission = this.missions().conflate
           this.currentOptions = this.options.conflate
           break
         }
         default: {
           this.currentOptions = this.options.skip
-          this.mission = this.missions.skip
+          this.mission = this.missions().skip
           this.addResult(this.options.skip[0].value)
         }
       }
@@ -313,7 +316,7 @@ export default defineComponent({
     this.startTime = new Date().toISOString()
     this.taskId = this.tasks[this.taskIndex].taskId
     this.taskFeatures = this.tasks.map(this.makeTaskFeature)
-    this.mission = this.missions.conflate
+    this.mission = this.missions().conflate
     this.currentOptions = this.options.conflate
     this.fetchOSMFeatures()
     this.$emit('created')
@@ -344,7 +347,7 @@ export default defineComponent({
       @toggle-dialog="arrowKeys = !arrowKeys"
     >
       <template #instructions>
-        <conflation-project-instructions :missions="missions" :options="options" />
+        <conflation-project-instructions :missions="missions()" :options="options" />
       </template>
       <template #tutorial>
         <validate-project-tutorial

From 2285a9a347db327c7267f728dd831d3efeae8c57 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 14 May 2025 12:11:25 +0200
Subject: [PATCH 23/29] feat(conflation): fetch osm features from raw data api

---
 src/components/ConflationProject.vue   | 42 +++++++++++------------
 src/utils/fetchFeaturesFromOverpass.ts | 21 ------------
 src/utils/fetchFeaturesFromRawData.ts  | 47 ++++++++++++++++++++++++++
 3 files changed, 67 insertions(+), 43 deletions(-)
 delete mode 100644 src/utils/fetchFeaturesFromOverpass.ts
 create mode 100644 src/utils/fetchFeaturesFromRawData.ts

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index 3793b32..eda79d3 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -14,8 +14,7 @@ import { GeoJSON } from 'ol/format'
 import { boundingExtent, extend, getArea } from 'ol/extent'
 import { transformExtent } from 'ol/proj'
 import { booleanIntersects } from '@turf/boolean-intersects'
-
-import { fetchFeaturesFromOverpass } from '@/utils/fetchFeaturesFromOverpass'
+import { fetchFeaturesFromRawData } from '@/utils/fetchFeaturesFromRawData'
 
 export default defineComponent({
   components: {
@@ -66,7 +65,7 @@ export default defineComponent({
       results: {},
       startTime: null,
       taskFeatures: null,
-      osmFeatureCollection: new Collection(),
+      osmFeatures: [],
       mission: '',
       intersectingFeatures: [],
       ready: false,
@@ -93,6 +92,17 @@ export default defineComponent({
       const colors = theme
       return colors
     },
+    defaultOsmFilters() {
+      return {
+        tags: {
+          all_geometry: {
+            join_or: {
+              building: [],
+            },
+          },
+        },
+      }
+    },
     options() {
       return {
         validate: [
@@ -213,7 +223,6 @@ export default defineComponent({
       const extentLonLat = transformExtent(extent, 'EPSG:3857', 'EPSG:4326')
 
       console.log(extentLonLat)
-
       return extentLonLat
     },
     /* TODO: fetch OSM based on array of individual task extents when overall task group extent is too large?
@@ -229,23 +238,15 @@ export default defineComponent({
     },
     */
     async fetchOSMFeatures() {
+      // TODO: accept custom filters
+      // const filters = this.project.filter || this.defaultOsmFilters
+      const filters = this.defaultOsmFilters
+      const taskGroupExtent = this.computeTaskGroupExtent()
       try {
-        this.osmFeatureCollection.clear()
-        const geoJson = new GeoJSON()
-        const taskGroupExtent = this.computeTaskGroupExtent()
-
-        const features = await fetchFeaturesFromOverpass(
-          taskGroupExtent.toString(),
-          this.project.filter ?? 'way["building"]',
-        )
-
-        features.forEach((f) => {
-          const osmFeature = geoJson.readFeature(f)
-          this.osmFeatureCollection.push(osmFeature)
-        })
-
+        this.osmFeatures = await fetchFeaturesFromRawData(taskGroupExtent, filters)
         this.ready = true
       } catch (error) {
+        console.log(error)
         this.$emit('error')
       }
     },
@@ -255,14 +256,11 @@ export default defineComponent({
         dataProjection: 'EPSG:4326',
         featureProjection: 'EPSG:3857',
       }
-      const turfOsmFeatures = this.osmFeatureCollection
-        .getArray()
-        .map((f) => geoJson.writeFeatureObject(f))
       const turfTaskFeature = geoJson.writeFeatureObject(
         this.taskFeatures?.[this.taskIndex],
         options,
       )
-      const filtered = turfOsmFeatures.filter((f) => booleanIntersects(turfTaskFeature, f))
+      const filtered = this.osmFeatures.filter((f) => booleanIntersects(turfTaskFeature, f))
       this.intersectingFeatures = filtered.map((f) => geoJson.readFeature(f, options))
       const numberIntersecting = this.intersectingFeatures.length
       this.updateMissionAndOptions(numberIntersecting)
diff --git a/src/utils/fetchFeaturesFromOverpass.ts b/src/utils/fetchFeaturesFromOverpass.ts
deleted file mode 100644
index 5d79949..0000000
--- a/src/utils/fetchFeaturesFromOverpass.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import osmtogeojson from 'osmtogeojson'
-
-const OVERPASS_API_URL = 'https://overpass-api.de/api/interpreter'
-
-export async function fetchFeaturesFromOverpass(bbox: string, filter: string) {
-  const query = `[out:json][bbox];${filter}; out meta; out geom;`
-  const response = await fetch(OVERPASS_API_URL, {
-    method: 'POST',
-    body: new URLSearchParams({
-      data: query,
-      bbox: bbox,
-    }),
-  })
-  if (!response.ok) {
-    throw new Error(`Error: ${response.statusText}`)
-  }
-  const json = await response.json()
-  const geojson = osmtogeojson(json, { flatProperties: true })
-  const features = geojson.features
-  return features
-}
diff --git a/src/utils/fetchFeaturesFromRawData.ts b/src/utils/fetchFeaturesFromRawData.ts
new file mode 100644
index 0000000..5bf6c16
--- /dev/null
+++ b/src/utils/fetchFeaturesFromRawData.ts
@@ -0,0 +1,47 @@
+const RAW_DATA_API_URL = 'https://api-prod.raw-data.hotosm.org'
+
+const geomFromExtent = (extent) => {
+  const [xmin, ymin, xmax, ymax] = extent
+  const geometry = {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [xmin, ymin],
+        [xmin, ymax],
+        [xmax, ymax],
+        [xmax, ymin],
+        [xmin, ymin],
+      ],
+    ],
+  }
+  return geometry
+}
+
+export async function fetchFeaturesFromRawData(extent, filters) {
+  const geom = geomFromExtent(extent)
+  const snapshotPlainEndpoint = new URL('/v1/snapshot/plain/', RAW_DATA_API_URL)
+  const response = await fetch(snapshotPlainEndpoint, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    },
+    body: JSON.stringify({
+      outputType: 'geojson',
+      geometryType: ['polygon'],
+      centroid: false,
+      useStWithin: true,
+      includeUserMetadata: false,
+      filters: filters,
+      includeStatsHtml: false,
+      includeTranslit: false,
+      geometry: geom,
+    }),
+  })
+  if (!response.ok) {
+    throw new Error(`Error: ${response.statusText}`)
+  }
+  const geojson = await response.json()
+  const features = geojson.features
+  return features
+}

From 585d4dc06e96d0097fdeb2439eec3691fb62de2c Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 14 May 2025 13:35:26 +0200
Subject: [PATCH 24/29] fix: use correct osm id and type reference

---
 src/components/ConflationProject.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index eda79d3..61af951 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -176,7 +176,8 @@ export default defineComponent({
       const numberIntersecting = this.intersectingFeatures.length
       var ref = { numberIntersecting: numberIntersecting }
       if (numberIntersecting == 1) {
-        ref.osmId = this.intersectingFeatures[0]?.get('id')
+        ref.osmId = this.intersectingFeatures[0]?.get('osm_id')
+        ref.osmType = this.intersectingFeatures[0]?.get('osm_type')
         ref.version = this.intersectingFeatures[0]?.get('version')
       }
       this.reference[this.taskId] = ref

From baa285e6f9924c055de3f7d20952a1a0ecf6567b Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Tue, 27 May 2025 11:51:58 +0200
Subject: [PATCH 25/29] style: fix format

---
 src/views/ProjectView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index d93ebd5..bdece6c 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -69,7 +69,7 @@ export default defineComponent({
           )
           return 0
         }
-        
+
         const numberOfTasks = Object.keys(results).length
         const endTime = new Date().toISOString()
         const dev = import.meta.env.DEV

From 658c39c7224f659b7909f8fdb49d8670f687d470 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 17 Sep 2025 17:10:48 +0200
Subject: [PATCH 26/29] fix: set skip value to 3

---
 src/components/ConflationProject.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index 61af951..c841eac 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -164,7 +164,7 @@ export default defineComponent({
             iconColor: '#F57C00',
             title: 'Skip',
             shortkey: 1,
-            value: 6,
+            value: 3,
           },
         ],
       }

From 6da2921d3f39e50d103a9a0b200b8747d6fe01ba Mon Sep 17 00:00:00 2001
From: ofritz <oliver.fritz@heigit.org>
Date: Thu, 23 Oct 2025 17:59:50 +0200
Subject: [PATCH 27/29] fix: makeXyzUrl

---
 src/utils/makeXyzUrl.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/utils/makeXyzUrl.ts b/src/utils/makeXyzUrl.ts
index 17a89b2..98915ef 100644
--- a/src/utils/makeXyzUrl.ts
+++ b/src/utils/makeXyzUrl.ts
@@ -3,8 +3,9 @@ import getQuadKeyFromCoordsAndZoom from './getQuadKeyFromCoordsAndZoom'
 const makeXyzUrl = (tileServer: string, tileCoord: [number, number, number]) => {
   const apiKey = tileServer.apiKey
   const wmtsLayerName = tileServer.wmtsLayerName
-  const [zoom, x, y] = tileCoord
-  const quadkey = getQuadKeyFromCoordsAndZoom(x, y, zoom)
+  const [zoom, x, y] = tileCoord ?? ['{z}', '{x}', '{y}']
+  const quadkey = getQuadKeyFromCoordsAndZoom(x, y, zoom) ?? '{quadkey}'
+
   const url = tileServer.url
     .replace(/({apiKey})|({key})/, apiKey)
     .replace(/({layer})|({name})/, wmtsLayerName)

From 338b5952fbffd78dfb217e988c1446608f8495ce Mon Sep 17 00:00:00 2001
From: ofritz <oliver.fritz@heigit.org>
Date: Thu, 23 Oct 2025 18:07:16 +0200
Subject: [PATCH 28/29] feat(conflation): random color assignment, combined
 extent

---
 src/components/ConflationProject.vue     |  9 +++-
 src/components/ConflationProjectTask.vue | 62 ++++++++++++++++--------
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index c841eac..e83c165 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -71,6 +71,7 @@ export default defineComponent({
       ready: false,
       taskId: undefined,
       taskIndex: 0,
+      taskIsBlue: Math.random() < 0.5,
       transparent: false,
       zoom: 3,
     }
@@ -104,6 +105,7 @@ export default defineComponent({
       }
     },
     options() {
+      const taskIsBlue = this.taskIsBlue
       return {
         validate: [
           {
@@ -138,7 +140,7 @@ export default defineComponent({
             iconColor: '#1976D2',
             shortkey: 1,
             title: 'Blue',
-            value: 1,
+            value: taskIsBlue ? 1 : 0,
           },
           {
             mdiIcon: 'mdi-shape',
@@ -146,7 +148,7 @@ export default defineComponent({
             iconColor: '#D32F2F',
             shortkey: 2,
             title: 'Red',
-            value: 0,
+            value: taskIsBlue ? 0 : 1,
           },
           {
             mdiIcon: 'mdi-close-thick',
@@ -291,6 +293,8 @@ export default defineComponent({
       }
     },
     updateMissionAndOptions(numberIntersecting) {
+      this.taskIsBlue = Math.random() < 0.5
+
       switch (numberIntersecting) {
         case 0: {
           this.mission = this.missions().validate
@@ -365,6 +369,7 @@ export default defineComponent({
       :intersectingFeatures="intersectingFeatures"
       :transparent="transparent"
       :ready="ready"
+      :taskIsBlue="taskIsBlue"
     />
   </v-container>
   <option-buttons
diff --git a/src/components/ConflationProjectTask.vue b/src/components/ConflationProjectTask.vue
index 1ed4b65..0f35892 100644
--- a/src/components/ConflationProjectTask.vue
+++ b/src/components/ConflationProjectTask.vue
@@ -38,6 +38,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    taskIsBlue: {
+      type: Boolean,
+      required: true,
+    },
   },
   data(): {
     center: [number, number]
@@ -73,30 +77,50 @@ export default defineComponent({
       // return this.project.tileServer.maxZoom ?? 19;
       return this.project.tileServer.maxZoom ?? 22
     },
+    strokeColors() {
+      const alpha = this.transparent ? 0.4 : 0.8
+      const blue = '#1976D2'
+      const red = '#D32F2F'
+      let colors = [blue, red]
+      if (!this.taskIsBlue) {
+        colors.reverse()
+      }
+      const rgbaColors = colors.map((c) => hex2rgb(c, alpha))
+      return rgbaColors
+    },
   },
   methods: {
     fitView(duration = 600, delay = 100) {
       const map = (this.$refs.map as InstanceType<typeof OlMap>).map
       const mapView = this.$refs.mapView as InstanceType<typeof OlView>
-      // TODO: Use combined extent of taskSource and osmFeatureSource
-      const extent = (
-        this.$refs.taskSource as InstanceType<typeof OlSourceVector>
-      ).source.getExtent()
+      const taskSource = this.$refs.taskSource as InstanceType<typeof OlSourceVector>
+      const osmSource = this.$refs.osmFeatureSource as InstanceType<typeof OlSourceVector>
+      const taskExtent = taskSource.source.getExtent()
+      const osmExtent = osmSource.source.getExtent()
 
-      if (!extent.some((coordinate) => coordinate == Infinity)) {
-        setTimeout(() => {
-          mapView.fit(extent, {
-            size: map.getSize(),
-            padding: this.compact ? [10, 10, 10, 10] : [20, 20, 20, 20],
-            maxZoom: this.maxZoom,
-            duration: duration,
-          })
-        }, delay)
+      const isValidExtent = (extent: number[]) => !extent.some((coord) => !isFinite(coord))
+      const extent = isValidExtent(osmExtent)
+        ? [
+            Math.min(taskExtent[0], osmExtent[0]),
+            Math.min(taskExtent[1], osmExtent[1]),
+            Math.max(taskExtent[2], osmExtent[2]),
+            Math.max(taskExtent[3], osmExtent[3]),
+          ]
+        : taskExtent
+      if (!isValidExtent(extent)) {
+        return
       }
-    },
-    strokeColor(hex) {
-      const color = hex2rgb(hex, this.transparent ? 0.4 : 0.8)
-      return color
+
+      const padding = this.compact ? [10, 10, 10, 10] : [20, 20, 20, 20]
+
+      setTimeout(() => {
+        mapView.fit(extent, {
+          size: map.getSize(),
+          padding,
+          maxZoom: this.maxZoom,
+          duration,
+        })
+      }, delay)
     },
   },
 })
@@ -130,7 +154,7 @@ export default defineComponent({
     <ol-vector-layer id="taskLayer" ref="taskLayer" :zIndex="ready ? 4 : 0" :key="ready">
       <ol-source-vector :features="[taskFeature]" ref="taskSource" ident="taskSource" />
       <ol-style :key="transparent">
-        <ol-style-stroke :color="strokeColor('#1976D2')" :width="5" />
+        <ol-style-stroke :color="strokeColors[0]" :width="5" />
         <ol-style-fill color="#0000" />
       </ol-style>
     </ol-vector-layer>
@@ -146,7 +170,7 @@ export default defineComponent({
         ident="osmFeatureSource"
       />
       <ol-style :key="transparent">
-        <ol-style-stroke :color="strokeColor('#D32F2F')" :width="5" />
+        <ol-style-stroke :color="strokeColors[1]" :width="5" />
         <ol-style-fill color="#0000" />
       </ol-style>
     </ol-vector-layer>

From ab76ca8fd8bea98ea27162197811344a72731770 Mon Sep 17 00:00:00 2001
From: ofritz <oliver.fritz@heigit.org>
Date: Wed, 10 Dec 2025 17:02:53 +0100
Subject: [PATCH 29/29] feat(conflation): add conflation tutorial component
 (wip)

---
 src/components/ConflationProject.vue          |   6 +-
 .../ConflationProjectInstructions.vue         |   2 +-
 src/components/ConflationProjectTutorial.vue  | 256 ++++++++++++++++++
 3 files changed, 260 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ConflationProjectTutorial.vue

diff --git a/src/components/ConflationProject.vue b/src/components/ConflationProject.vue
index e83c165..d8ac684 100644
--- a/src/components/ConflationProject.vue
+++ b/src/components/ConflationProject.vue
@@ -8,7 +8,7 @@ import ProjectHeader from '@/components/ProjectHeader.vue'
 import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import ConflationProjectInstructions from '@/components/ConflationProjectInstructions.vue'
-import ValidateProjectTutorial from '@/components/ValidateProjectTutorial.vue'
+import ConflationProjectTutorial from '@/components/ConflationProjectTutorial.vue'
 import ConflationProjectTask from './ConflationProjectTask.vue'
 import { GeoJSON } from 'ol/format'
 import { boundingExtent, extend, getArea } from 'ol/extent'
@@ -19,7 +19,7 @@ import { fetchFeaturesFromRawData } from '@/utils/fetchFeaturesFromRawData'
 export default defineComponent({
   components: {
     conflationProjectInstructions: ConflationProjectInstructions,
-    validateProjectTutorial: ValidateProjectTutorial,
+    conflationProjectTutorial: ConflationProjectTutorial,
     conflationProjectTask: ConflationProjectTask,
     taskProgress: TaskProgress,
     optionButtons: OptionButtons,
@@ -353,7 +353,7 @@ export default defineComponent({
         <conflation-project-instructions :missions="missions()" :options="options" />
       </template>
       <template #tutorial>
-        <validate-project-tutorial
+        <conflation-project-tutorial
           :tutorial="tutorial"
           :options="options"
           @tutorialComplete="$refs.projectInfo?.toggleDialog"
diff --git a/src/components/ConflationProjectInstructions.vue b/src/components/ConflationProjectInstructions.vue
index dd21421..00f45cf 100644
--- a/src/components/ConflationProjectInstructions.vue
+++ b/src/components/ConflationProjectInstructions.vue
@@ -12,7 +12,7 @@ export default defineComponent({
       required: true,
     },
     options: {
-      type: Array,
+      type: Object,
       required: true,
     },
   },
diff --git a/src/components/ConflationProjectTutorial.vue b/src/components/ConflationProjectTutorial.vue
new file mode 100644
index 0000000..d604717
--- /dev/null
+++ b/src/components/ConflationProjectTutorial.vue
@@ -0,0 +1,256 @@
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import matchIcon from '@/utils/matchIcon'
+import OptionButtons from '@/components/OptionButtons.vue'
+import TaskProgress from '@/components/TaskProgress.vue'
+import ConflationProjectTask, { type Project } from './ConflationProjectTask.vue'
+import TutorialCompletionCard from './TutorialCompletionCard.vue'
+import { isDefined } from '@/utils/common'
+
+interface Option {
+  title: string
+  description: string
+  iconColor: string
+  mdiIcon: string
+  shortKey: number
+  value: number
+}
+
+interface Task {
+  geojson: object
+  geometry: string
+  properties: {
+    reference: number
+    screen: number
+  }
+  screen: number
+  taskId: string
+}
+
+interface Screen {
+  title: string
+  icon: string
+  description: string
+}
+
+interface Tutorial extends Project {
+  projectId: string
+  name: string
+  lookFor?: string
+  projectInstruction?: string
+  screens: {
+    instructions: Screen
+
+    // FIXME: we may not have success and hint for this project type
+    hint: Screen
+    success: Screen
+  }[]
+}
+
+export default defineComponent({
+  components: {
+    conflationProjectTask: ConflationProjectTask,
+    optionButtons: OptionButtons,
+    taskProgress: TaskProgress,
+    tutorialCompletionCard: TutorialCompletionCard,
+  },
+  props: {
+    tutorial: Object as PropType<Tutorial>,
+    options: Object,
+    tasks: Array as PropType<Task[]>,
+  },
+  data(): {
+    currentOptions: Array
+    currentTaskIndex: number
+    results: Record<string, number>
+    userAttempts: number
+    answersRevealed: boolean
+  } {
+    return {
+      currentOptions: [],
+      currentTaskIndex: 0,
+      results: {},
+      userAttempts: 0,
+      answersRevealed: false,
+    }
+  },
+  computed: {
+    mission() {
+      const message = isDefined(this.tutorial?.projectInstruction)
+        ? this.tutorial.projectInstruction
+        : this.$t('conflationProject.doesTheShapeOutline', {
+            feature: this.tutorial?.lookFor,
+          })
+      return message
+    },
+    currentScreen() {
+      return this.tutorial?.screens[this.currentTaskIndex]
+    },
+    task() {
+      return this.tasks?.[this.currentTaskIndex]
+    },
+    hasTasks() {
+      return this.tasks.length !== 0
+    },
+    hasCompletedAllTasks() {
+      if (!this.hasTasks) {
+        return false
+      }
+
+      const maxIndex = this.tasks.length
+      return this.currentTaskIndex === maxIndex
+    },
+    answeredCorrectly() {
+      if (!this.hasTasks) {
+        return false
+      }
+
+      if (this.hasCompletedAllTasks) {
+        return true
+      }
+
+      const result = this.results[this.task?.taskId]
+      return isDefined(result) && result === this.task?.properties.reference
+    },
+    alertContent() {
+      if (!this.currentScreen) {
+        return undefined
+      }
+
+      // FIXME: we may not have success and hint for this project type
+      const { instructions, success, hint } = this.currentScreen
+
+      if (this.answeredCorrectly && success) {
+        const icon = success.icon
+
+        return {
+          type: 'success' as const,
+          title: success.title,
+          text: success.description,
+          icon: icon ? matchIcon(icon) : undefined,
+        }
+      }
+
+      if (this.userAttempts > 0 && hint) {
+        const icon = hint.icon
+
+        return {
+          type: undefined,
+          title: hint.title,
+          text: hint.description,
+          icon: icon ? matchIcon(icon) : undefined,
+        }
+      }
+
+      if (!instructions) {
+        return undefined
+      }
+
+      const icon = instructions.icon
+
+      return {
+        type: 'info' as const,
+        title: instructions.title,
+        text: instructions.description,
+        icon: icon ? matchIcon(icon) : undefined,
+      }
+    },
+  },
+  methods: {
+    nextTask() {
+      if (!this.hasCompletedAllTasks) {
+        this.currentTaskIndex += 1
+        this.userAttempts = 0
+        this.answersRevealed = false
+      }
+    },
+    addResult(value: number) {
+      if (!this.answersRevealed) {
+        this.userAttempts += 1
+        this.results[this.task.taskId] = value
+      }
+    },
+    showAnswer() {
+      this.answersRevealed = true
+      this.results[this.task.taskId] = this.task.properties?.reference
+    },
+  },
+  emits: ['tutorialComplete'],
+})
+</script>
+
+<template>
+  <v-container>
+    <v-row v-if="!hasCompletedAllTasks">
+      <v-col>
+        <div>
+          {{ mission }}
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="alertContent">
+      <v-col>
+        <v-alert
+          prominent
+          density="compact"
+          border="start"
+          variant="tonal"
+          :type="alertContent.type"
+          :title="alertContent.title"
+          :text="alertContent.text"
+          :icon="alertContent.icon"
+        >
+          <template #append>
+            <v-btn
+              v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
+              @click="showAnswer"
+            >
+              {{ $t('projectTutorial.showAnswer') }}
+            </v-btn>
+            <v-btn v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask">
+              {{ $t('projectTutorial.nextTask') }}
+            </v-btn>
+          </template>
+        </v-alert>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <conflation-project-task
+          v-if="tasks[currentTaskIndex] && tutorial"
+          :task="tasks[currentTaskIndex]"
+          :project="tutorial"
+          compact
+        />
+      </v-col>
+    </v-row>
+    <v-row v-if="options">
+      <v-col>
+        <option-buttons
+          v-if="task?.taskId"
+          :options="currentOptions"
+          :result="results[task.taskId]"
+          :taskId="task.taskId"
+          @addResult="addResult"
+        />
+      </v-col>
+    </v-row>
+    <v-row v-if="!hasTasks" justify="center">
+      <v-col cols="auto">
+        <v-progress-circular indeterminate />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasTasks && !hasCompletedAllTasks">
+      <v-col>
+        <task-progress :progress="currentTaskIndex" :total="tasks?.length ?? 0" />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasCompletedAllTasks">
+      <v-col>
+        <tutorial-completion-card @on-start-mapping-click="$emit('tutorialComplete')" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped></style>