Change map button styling

projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.html

@@ -1,4 +1,4 @@
-<div (click)="handleClick($event)" class="btn btn-outline-secondary gps-location">
+<div (click)="handleClick($event)" class="btn btn-outline-primary gps-location">
   <svg height="100%" width="100%" viewBox="0 0 96 96">
     <g
     id="XMLID_1_"><circle      

projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.html

@@ -1,4 +1,4 @@
-<div (click)="handleClick($event)" class="btn btn-outline-secondary compass" [style.transform]="Rotation()" [ngClass]="{'compass-n':IsNorth()}">
+<div (click)="handleClick($event)" class="btn btn-outline-primary compass" [style.transform]="Rotation()" [ngClass]="{'compass-n':IsNorth()}">
   <svg height="100%" width="100%" viewBox="0 0 132.29166 132.29167">
     <g
      inkscape:label="Laag 1"

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

@@ -1,4 +1,4 @@
-<div class="btn btn-outline-secondary layer-switcher" (click)="handleClick($event)">
+<div class="btn btn-outline-primary layer-switcher" (click)="handleClick($event)">
   <i class="fal fa-layer-group"></i>  
   <div class="layers hidden" [ngClass]="{'hidden':!(showLayerSwitcher|async)}" (click)="$event.stopPropagation();">
     <div class="card layers-card m-1">

projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.html

@@ -1 +1 @@
-<div *fm-haspackage="'vnd.farmmaps.package.3d'" (click)="handleClick($event)" class="btn btn-outline-secondary twotreed">{{label}}</div>
+<div *fm-haspackage="'vnd.farmmaps.package.3d'" (click)="handleClick($event)" class="btn btn-outline-primary twotreed"><i class="fas fa-spinner fa-spin loading"  [class]="{'loading':loading}"></i>{{label}}</div>

projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.scss

@@ -12,4 +12,12 @@
   border-radius: 1.75em;
   padding: 0;
   color: $secondary;
+}
+
+.fa-spinner {
+  display: none;
+}
+
+.fa-spinner.loading {
+  display: inline-block;
 }

projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.ts

@@ -15,6 +15,7 @@ export class Switch2D3DComponent {
   public label: string = "3D";
   private ol3d: OLCesium;
   private synchronizers:any[];
+  public loading:boolean = true;
 
 
   constructor(private map: MapComponent) {
@@ -28,6 +29,7 @@ export class Switch2D3DComponent {
             new olcs.RasterSynchronizer(map,scene),
             new olcs.VectorSynchronizer(map,scene)
         ];
+        this.loading=false;
         return this.synchronizers;
     }, stopOpenLayersEventsPropagation:true}); 
   }