First attempt to bring back 3D view in map

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

@@ -1,40 +1,40 @@
-// import { Component, OnInit,Input  } from '@angular/core';
-//import { MapComponent } from 'ngx-openlayers';
-//import OLCesium from 'olcs/OLCesium.js';
-
-
-// @Component({
-//   selector: 'fm-map-switch2d3d',
-//   template: '<div (click)="handleClick($event)" class="rounded-circle twotreed">{{label}}</div>',
-//   styles: [`.twotreed {
-//     width:2.5em;
-//     height:2.5em;
-//     background-color: white;
-//     text-align:center;
-//     line-height:2.5em;
-//     font-weight:bold;
-//     cursor:default;}`]
-
-// })
-// export class Switch2D3DComponent {
-
-//   @Input() enable:boolean;
-//   public label: string = "3D";
-//   private ol3d: OLCesium;
-
-
-//   constructor(private map: MapComponent) {
-    
-//   }
-
-//   ngOnInit() {
-//     this.ol3d = new OLCesium({ map: this.map.instance }); // ol2dMap is the ol.Map instance
-//   }
-
-//   handleClick(event) {
-//     this.enable = !this.enable;
-//     if (this.enable)
-//       this.ol3d.setEnabled(this.enable);
-//       this.label = this.enable?"2D":"3D";
-//   }
-// }
+import { Component, OnInit,Input,Host  } from '@angular/core';
+import { MapComponent } from 'ngx-openlayers';
+import OLCesium from 'ol-cesium';
+
+
+@Component({
+  selector: 'fm-map-switch2d3d',
+  template: '<div (click)="handleClick($event)" class="rounded-circle twotreed">{{label}}</div>',
+  styles: [`.twotreed {
+    width:2.5em;
+    height:2.5em;
+    background-color: white;
+    text-align:center;
+    line-height:2.5em;
+    font-weight:bold;
+    cursor:default;}`]
+
+})
+export class Switch2D3DComponent {
+
+  @Input() enable:boolean;
+  public label: string = "3D";
+  private ol3d: OLCesium;
+
+
+  constructor(@Host() private map: MapComponent) {
+    
+  }
+
+  ngOnInit() {
+    this.ol3d = new OLCesium({ map: this.map.instance }); // ol2dMap is the ol.Map instance
+  }
+
+  handleClick(event) {
+    this.enable = !this.enable;
+    if (this.enable)
+      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">
-  <!--    <switch2d3d></switch2d3d>-->
+     <fm-map-switch2d3d></fm-map-switch2d3d>
       <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>