Add an option to choose between citation.js and doi.org for citation format

src/App.vue

@@ -23,6 +23,16 @@
                 <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
                 <el-button @click="setSearch()" size="small">Set Search</el-button>
               </el-row>
+              <el-row>
+                <el-col>
+                  <el-switch
+                    v-model="useDOIFormatter"
+                    size="small"
+                    active-text="Use DOI formatter"
+                    inactive-text="Use citation.js formatter"
+                  />
+                </el-col>
+              </el-row>
             </div>
             <template #reference>
 
@@ -40,6 +50,7 @@
         :shareLink="shareLink"
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
+        :useDOIFormatter="useDOIFormatter"
         @updateShareLinkRequested="updateUUID"
         @isReady="viewerIsReady"
         @mapLoaded="mapIsLoaded"
@@ -77,7 +88,8 @@ export default {
       api: import.meta.env.VITE_API_LOCATION,
       mapSettings: [],
       startingMap: "AC",
-      ElIconSetting: shallowRef(ElIconSetting)
+      ElIconSetting: shallowRef(ElIconSetting),
+      useDOIFormatter: true,
     }
   },
   computed: {

src/components/MapContent.vue

@@ -11,6 +11,7 @@
         v-if="isReady"
         @onFullscreen="onFullscreen"
         :state="stateToSet"
+        :useDOIFormatter="useDOIFormatter"
         ref="flow"
         @vue:mounted="flowMounted"
       />
@@ -99,6 +100,15 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * The option to use DOI.org as citation formatter in sidebar.
+     * If set to `false`, citation.js will be used.
+     * Default is `true`.
+     */
+    useDOIFormatter: {
+      type: Boolean,
+      default: true,
+    },
   },
   data: function () {
     return {

src/components/SplitFlow.vue

@@ -28,6 +28,7 @@
           :annotationEntry="annotationEntry"
           :createData="createData"
           :connectivityInfo="connectivityInfo"
+          :useDOIFormatter="useDOIFormatter"
           @tab-close="onSidebarTabClose"
           @actionClick="actionClick"
           @tabClicked="tabClicked"
@@ -109,7 +110,11 @@ export default {
     state: {
       type: Object,
       default: undefined,
-    }
+    },
+    useDOIFormatter: {
+      type: Boolean,
+      default: true,
+    },
   },
   data: function () {
     return {