From d05a48c7eb974fd4785d6312d2289db9f0e2cefa Mon Sep 17 00:00:00 2001
From: Jonas <jonas.kumlin@karlstad.se>
Date: Wed, 15 Feb 2023 14:45:58 +0100
Subject: [PATCH] feature: center marker for externalurl (#1686)

Fixes #1672
Adds a centerMarker component to the viewer, easy to use with show/hide methods.
Future improvements are to use this along with eg the position control, but they somehow has to respect each other.
---
 src/components/centermarker.js                | 30 +++++++++++++++++++
 .../externalurl/externalurlSeveralButtons.js  |  2 ++
 src/viewer.js                                 |  6 +++-
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/components/centermarker.js

diff --git a/src/components/centermarker.js b/src/components/centermarker.js
new file mode 100644
index 000000000..b71490064
--- /dev/null
+++ b/src/components/centermarker.js
@@ -0,0 +1,30 @@
+import { Component, Icon, dom } from '../ui';
+
+export default function CenterMarker() {
+  let viewer;
+  let markerEl;
+
+  function createMarker() {
+    const markerIcon = Icon({
+      icon: '#o_centerposition_24px',
+      cls: 'o-position-marker hidden'
+    });
+    const markerElement = dom.html(markerIcon.render());
+    document.getElementById(`${viewer.getId()}`).appendChild(markerElement);
+    markerEl = document.getElementById(markerIcon.getId());
+  }
+
+  return Component({
+    name: 'centermarker',
+    onAdd(evt) {
+      viewer = evt.target;
+      createMarker();
+    },
+    hide: function hide() {
+      markerEl.classList.add('hidden');
+    },
+    show: function hide() {
+      markerEl.classList.remove('hidden');
+    }
+  });
+}
diff --git a/src/controls/externalurl/externalurlSeveralButtons.js b/src/controls/externalurl/externalurlSeveralButtons.js
index 14b677877..54a59600a 100644
--- a/src/controls/externalurl/externalurlSeveralButtons.js
+++ b/src/controls/externalurl/externalurlSeveralButtons.js
@@ -17,6 +17,7 @@ const externalurlSeveralButtons = function externalurlSeveralButtons(options = {
   function toggleMainButton() {
     if (!isMainButtonActive) {
       document.getElementById(externalUrlMainButton.getId()).classList.add('active');
+      viewer.centerMarker.show();
       subButtons.forEach((button) => {
         document.getElementById(button.getId()).classList.remove('hidden');
       });
@@ -24,6 +25,7 @@ const externalurlSeveralButtons = function externalurlSeveralButtons(options = {
       isMainButtonActive = true;
     } else {
       document.getElementById(externalUrlMainButton.getId()).classList.remove('active');
+      viewer.centerMarker.hide();
       subButtons.forEach((button) => {
         document.getElementById(button.getId()).classList.add('hidden');
       });
diff --git a/src/viewer.js b/src/viewer.js
index 64b6d2dbb..710ccc59b 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -13,6 +13,7 @@ import utils from './utils';
 import Layer from './layer';
 import Main from './components/main';
 import Footer from './components/footer';
+import CenterMarker from './components/centermarker';
 import flattenGroups from './utils/flattengroups';
 import getcenter from './geometry/getcenter';
 import isEmbedded from './utils/isembedded';
@@ -99,6 +100,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
   const footer = Footer({
     data: footerData
   });
+  const centerMarker = CenterMarker();
   let mapSize;
 
   const addControl = function addControl(control) {
@@ -588,6 +590,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
           featureinfo = Featureinfo(featureinfoOptions);
           this.addComponent(selectionmanager);
           this.addComponent(featureinfo);
+          this.addComponent(centerMarker);
 
           this.addControls();
           this.dispatch('loaded');
@@ -663,7 +666,8 @@ const Viewer = function Viewer(targetOption, options = {}) {
     zoomToExtent,
     getSelectionManager,
     getEmbedded,
-    permalink
+    permalink,
+    centerMarker
   });
 };