Refactor 3d to own library

projects/common-map/src/fm-map/components/aol/switch2d3d/switch2d3d.component.scss

@@ -1,15 +0,0 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
-.twotreed {
-  display:block; 
-  width:2.5em;
-  height:2.5em;
-  background-color: $body-bg;
-  background-size: contain;
-  margin-top:0.5em;
-  text-align: center;
-  line-height: 2.5em; 
-  border-radius: 1.75em;
-  padding: 0;
-  color: $secondary;
-}

projects/common-map/src/fm-map/components/aol/switch2d3d/switch2d3d.component.ts

@@ -1,50 +0,0 @@
-import { Component, OnInit,Input,Host  } from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
-import OLCesium from 'ol-cesium';
-//import OLCesium from '../../../../../../../../ol-cesium/src/olcs/OLCesium.js';
-
-declare var olcs: any;
-
-@Component({
-  selector: 'fm-map-switch2d3d',
-  template: '<div (click)="handleClick($event)" class="btn btn-outline-secondary twotreed">{{label}}</div>',
-  styleUrls: ['./switch2d3d.component.scss']
-})
-export class Switch2D3DComponent {
-
-  @Input() enable:boolean;
-  public label: string = "3D";
-  private ol3d: OLCesium;
-  private synchronizers:any[];
-
-
-  constructor(@Host() private map: MapComponent) {
-    
-  }
-
-  ngOnInit() {   
-   
-    this.ol3d = new OLCesium({ map: this.map.instance, createSynchronizers: (map,scene) => {
-        this.synchronizers = [
-            new olcs.RasterSynchronizer(map,scene),
-            new olcs.VectorSynchronizer(map,scene)
-        ];
-        return this.synchronizers;
-    }, stopOpenLayersEventsPropagation:true}); 
-  }
-
-  synchronize() {
-      this.synchronizers.forEach((synchronizer) => {
-        synchronizer.synchronize();
-      });
-  }
-
-  handleClick(event) {
-    this.enable = !this.enable; 
-    if(this.enable) {
-        this.synchronize();
-    }
-    this.ol3d.setEnabled(this.enable);
-    this.label = this.enable?"2D":"3D";    
-  }
-}

projects/common-map/src/fm-map/components/map/map.component.html

@@ -39,7 +39,7 @@
     </aol-layer-vector>
     <!-- <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="true" [heading]="state.compassHeading"></fm-map-gps-location> -->
     <div class="control-container">
-     <fm-map-switch2d3d></fm-map-switch2d3d>
+      <router-outlet name="map-controls"></router-outlet>
       <fm-map-layer-switcher></fm-map-layer-switcher>
       <fm-map-pan-to-location [position]="state.position" [mapState]="state.mapState" [animate]="true"></fm-map-pan-to-location>
       <fm-map-rotation-reset></fm-map-rotation-reset>