First attempt to bring back 3D view in map

projects/common-map/package.json

@@ -11,7 +11,7 @@
     "@ngrx/router-store": "^9.0",
     "@ngrx/store": "^9.0",
     "tassign": "^1.0.0",
-    "@farmmaps/common": ">=0.0.1-prerelease.308 <0.0.1",
+    "@farmmaps/common": ">=0.0.1-prerelease.398 <0.0.1",
     "ngx-openlayers": "1.0.0-next.13",
     "ol": "6.1.1"
   }

projects/common-map/src/fm-map/common-map.module.ts

@@ -24,7 +24,7 @@ import { IPeriodState } from './models/period.state';
 
 // components
 import { GpsLocation} from './components/aol/gps-location/gps-location.component';
-//import {Switch2D3DComponent } from './components/aol/switch2d3d/switch2d3d.component';
+import {Switch2D3DComponent } from './components/aol/switch2d3d/switch2d3d.component';
 import {FeatureListFeatureCropfieldComponent } from './components/feature-list-feature-cropfield/feature-list-feature-cropfield.component';
 import { FeatureListFeatureCroppingschemeComponent} from './components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component';
 import { ItemWidgetListComponent} from './components/item-widget-list/item-widget-list.component';
@@ -102,6 +102,7 @@ export {
   MapComponent,
   MetaDataModalComponent,
   RotationResetComponent,
+  Switch2D3DComponent,
   MapSearchComponent,
   SelectPeriodModalComponent,
   LayerListComponent,
@@ -170,6 +171,7 @@ export {
     MapComponent,
     MetaDataModalComponent,
     RotationResetComponent,
+    Switch2D3DComponent,
     MapSearchComponent,
     SelectPeriodModalComponent,
     LayerListComponent,
@@ -240,6 +242,7 @@ export {
        ItemWidgetListComponent,
        WidgetStatusComponent,
        RotationResetComponent,
+       Switch2D3DComponent,
        MapSearchComponent,
        SelectPeriodModalComponent,
        LayerListComponent,

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>