Add ozone logo

Author: vicb

frontend/src/viewer/components/2d/map-element.ts

@@ -161,6 +161,12 @@ export class MapElement extends connect(store)(LitElement) {
       controls.map = this.map;
       this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controls);
 
+      const ad = document.createElement('a');
+      ad.setAttribute('href', 'https://www.flyozone.com/');
+      ad.setAttribute('target', '_blank');
+      ad.innerHTML = `<img width="210" height="35" src="img/ozone.svg">`;
+      this.map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(ad);
+
       this.map.addListener('click', (e: google.maps.MouseEvent) => {
         const latLng = e.latLng;
         const found = findClosestFix(this.tracks, latLng.lat(), latLng.lng());

frontend/src/viewer/components/3d/map3d-element.ts

@@ -136,6 +136,13 @@ export class Map3dElement extends connect(store)(LitElement) {
       const controls = document.createElement('controls3d-element');
       this.view.ui.add(controls, 'top-right');
 
+      const ad = document.createElement('a');
+      ad.setAttribute('href', 'https://www.flyozone.com/');
+      ad.setAttribute('target', '_blank');
+      ad.className = 'ad';
+      ad.innerHTML = `<img width="210" height="35" src="img/ozone.svg">`;
+      this.view.ui.add(ad);
+
       const layerSwitcher = this.renderRoot.querySelector('#layers') as HTMLSelectElement;
       this.view.ui.add(layerSwitcher, 'top-left');
       this.view.ui.move([layerSwitcher, 'compass', 'navigation-toggle'], 'top-left');
@@ -296,6 +303,12 @@ export class Map3dElement extends connect(store)(LitElement) {
         #layers {
           font: 18px Roboto, arial, sans-serif !important;
         }
+        .ad {
+          box-shadow: none;
+          bottom: 10px;
+          left: 50%;
+          transform: translate(-50%, 0);
+        }
       </style>
       <div id="map"></div>
       <select id="layers" @change=${(e: any) => this.map?.set('basemap', this.basemaps[e.target.value])}>