feature: center marker for externalurl (origo-map#1686)

Fixes origo-map#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

@@ -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');
+    }
+  });
+}

src/controls/externalurl/externalurlSeveralButtons.js

@@ -17,13 +17,15 @@ 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');
       });
       document.getElementById(externalUrlMainButton.getId()).classList.remove('tooltip');
       isMainButtonActive = true;
     } else {
       document.getElementById(externalUrlMainButton.getId()).classList.remove('active');
+      viewer.centerMarker.hide();
       subButtons.forEach((button) => {
         document.getElementById(button.getId()).classList.add('hidden');
       });

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
   });
 };