add map view for continent page

src/app/app.module.ts

@@ -34,7 +34,7 @@ import {environment} from '../environments/environment';
     // CountriesTableComponent,
     DataViewComponent,
     CountriesMapOverviewComponent,
-    EuropeMapOverviewComponent,
+    // EuropeMapOverviewComponent,
     // CountryComponent,
     CountryMapComponent,
     GaugeChartComponent,
@@ -49,7 +49,7 @@ import {environment} from '../environments/environment';
     // NgxEchartsModule.forRoot({
     //   echarts
     // }),
-    NgxEchartsModule,
+    // NgxEchartsModule,
     HighchartsChartModule,
     AutocompleteLibModule,
     MatomoModule.forRoot({

src/app/pages/continent/continent.component.html

@@ -10,6 +10,15 @@
           <li><span>{{continentName | titlecase}}</span></li>
         </ul>
 
+        <!-- Europe Map -->
+        <div class="uk-align-right">
+          <a *ngIf="mapViewActive" (click)="toggleView('columns')">
+            <img src="../../../assets/img/icons/switch_view_list_active.svg">
+          </a>
+          <a *ngIf="!mapViewActive" (click)="toggleView('map')">
+            <img src="../../../assets/img/icons/switch_view_grid_active.svg">
+          </a>
+        </div>
 
         <div *ngIf="continentName" class="">
           <img src="../../../assets/img/flags/{{continentName}}-flag.jpg" class="flag-image" width="132" height="132">
@@ -38,10 +47,10 @@
 
 
   <section class="uk-padding-small uk-margin-top">
-    <div class="uk-container uk-container-center uk-margin-medium-top">
+    <div class="uk-container uk-container-center uk-margin-medium-top" [ngClass]="{'uk-container-expand': mapViewActive}">
 
       <!--LAPTOP & PAD LANDSCAPE-->
-      <div class="uk-visible@m">
+      <div *ngIf="!mapViewActive" class="uk-visible@m">
         <div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
         <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer">
 
@@ -171,6 +180,142 @@
         </div>
       </div>
 
+      <!-- Europe Map -->
+      <div *ngIf="mapViewActive" class="uk-visible@m">
+        <div class="uk-grid uk-grid-small">
+
+          <div class="uk-width-4-5@m">
+
+            <!--Map Container-->
+            <app-europe-map-overview (emitSelectedCountry)="countrySelected($event)"></app-europe-map-overview>
+            <!--<app-map-overview *ngIf="overviewData?.countries" (emitSelectedCountry)="selectedCountry($event)"></app-map-overview>-->
+
+          </div>
+
+          <div class="uk-width-1-5@m">
+            <div class="md-card infoBox">
+              <ng-container *ngIf="!selectedCountry">
+                <div class="md-card-toolbar">
+                  <h3 class="uk-text-center">OPENAIRE OPEN SCIENCE OBSERVATORY</h3>
+                </div>
+                <div *ngIf="!selectedCountry" class="md-card-content">
+                  <div>An OpenAIRE service to:</div>
+                  <ul>
+                    <li>
+                      Better understand the European open research landscape
+                    </li>
+                    <li>
+                      Track trends for open access to publications, data, software
+                    </li>
+                    <li>
+                      Reveal hidden potential on existing resources
+                    </li>
+                    <li>
+                      View open collaboration patterns
+                    </li>
+                  </ul>
+                  <!--<div class="uk-text-center uk-margin-medium-top uk-margin-medium-bottom">-->
+                  <!--<button [routerLink]="['/methodology']" class="md-btn md-btn-primary">Learn More</button>-->
+                  <!--</div>-->
+
+                </div>
+                <div></div>
+              </ng-container>
+
+              <ng-container *ngIf="selectedCountry">
+                <div class="md-card-toolbar">
+                  <h3 class="uk-text-center uk-margin-small-top">
+                    <a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>
+                    <img src="../../../assets/img/flags/{{selectedCountry.code | lowercase}}-flag-round.png" class="small-flag-image uk-margin-small-right" width="24" style="margin-top: -3px">
+                    <span>{{selectedCountry.name | uppercase}}</span>
+                  </h3>
+                </div>
+                <div *ngIf="!selectedCountryData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
+                <!--<div *ngIf="!selectedCountryData" class="loading-big">-->
+                <!--<div uk-spinner="ratio: 2" class="uk-overlay uk-position-center uk-dark" style="margin: auto"></div>-->
+                <!--&lt;!&ndash;<div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">&ndash;&gt;-->
+                <!--&lt;!&ndash;{{ loadingMessage }}&ndash;&gt;-->
+                <!--&lt;!&ndash;</div>&ndash;&gt;-->
+                <!--<div class="transparentFilm"></div>-->
+                <!--</div>-->
+                <div *ngIf="selectedCountryData" class="md-card-content">
+                  <div class="numbers">
+                    <div class="uk-margin-small-top">
+
+                      <div class="indicator">
+                        <span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated!=null">{{selectedCountryData.publicationsAffiliated | number}}</span>
+                        <span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated===null">--</span>
+                        <span><i>OA publications</i> affiliated to an organization in the country</span>
+                      </div>
+
+                      <div class="indicator uk-margin-small-top">
+                        <span class="number publications" *ngIf="selectedCountryData.publicationsDeposited!=null">{{selectedCountryData.publicationsDeposited | number}}</span>
+                        <span class="number publications" *ngIf="selectedCountryData.publicationsDeposited===null">--</span>
+                        <span><i>OA publications</i> from institutional repositories</span>
+                      </div>
+
+                      <hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
+
+                      <div class="indicator">
+                        <span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated!=null">{{selectedCountryData.datasetsAffiliated | number}}</span>
+                        <span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated===null">--</span>
+                        <span><i>OA datasets</i> affiliated to an organization in the country</span>
+                      </div>
+
+                      <div class="indicator uk-margin-small-top">
+                        <span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited!=null">{{selectedCountryData.datasetsDeposited | number}}</span>
+                        <span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited===null">--</span>
+                        <span><i>OA datasets</i> from institutional repositories</span>
+                      </div>
+
+                      <hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
+
+                      <div class="indicator">
+                        <span class="number repositories" *ngIf="selectedCountryData.repositories!=null">{{selectedCountryData.repositories | number}}</span>
+                        <span class="number repositories" *ngIf="selectedCountryData.repositories===null">--</span>
+                        <span><i>repositories</i> from openDOAR & re3data</span>
+                      </div>
+
+                      <hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
+
+                      <div class="indicator">
+                        <span class="number journals" *ngIf="selectedCountryData.journals!=null">{{selectedCountryData.journals | number}}</span>
+                        <span class="number journals" *ngIf="selectedCountryData.journals===null">--</span>
+                        <span><i>journals</i> from DOAJ</span>
+                      </div>
+
+                      <!--<hr class="greyBoldDivider uk-margin-top uk-margin-bottom">-->
+
+                      <!--<div class="indicator">-->
+                      <!--<span class="number policies" *ngIf="selectedCountryData.policies!=null">{{selectedCountryData.policies | number}}</span>-->
+                      <!--<span class="number policies" *ngIf="selectedCountryData.policies===null">&#45;&#45;</span>-->
+                      <!--<span>organisations with <i>OA policies</i></span>-->
+                      <!--</div>-->
+
+                    </div>
+
+                  </div>
+
+                  <div class="uk-text-center uk-margin-medium-top">
+                    <!--<button [routerLink]="['/country/' + selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>-->
+                    <button [routerLink]="['/country' , selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>
+                  </div>
+
+                </div>
+                <div></div>
+              </ng-container>
+            </div>
+          </div>
+
+          <!--<div class="uk-width-large-3-5 uk-container-center uk-text-center">-->
+          <!--<h2 class="heading_b">-->
+          <!--Our Team-->
+          <!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
+          <!--</h2>-->
+          <!--</div>-->
+        </div>
+      </div>
+
       <!--MOBILE & PAD PORTRAIT-->
       <div class="uk-hidden@m uk-text-center">
         <div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>

src/app/pages/continent/continent.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
 import { DataService } from '../../services/data.service';
 import { DataHandlerService } from '../../services/data-handler.service';
-import { EuropeData } from '../../domain/overview-map-data';
+import {CountryOverviewData, EuropeData, SelectedCountry} from '../../domain/overview-map-data';
 
 @Component({
   selector: 'app-continent',
@@ -18,6 +18,10 @@ export class ContinentComponent implements OnInit {
 
   europeOverviewData: EuropeData;
 
+  mapViewActive = false;
+  selectedCountry: SelectedCountry = null;
+  selectedCountryData: CountryOverviewData = null;
+
   constructor(private dataService: DataService,
               private dataHandlerService: DataHandlerService,
               private route: ActivatedRoute,
@@ -107,4 +111,31 @@ export class ContinentComponent implements OnInit {
     }
   }
 
+  /** Europe Map  --> **/
+  toggleView(show: string) {
+    if (show === 'map') {
+      this.mapViewActive = true;
+    } else if (show === 'columns') {
+      this.mapViewActive = false;
+    }
+  }
+
+  countrySelected(selectedCountry: SelectedCountry) {
+    this.selectedCountry = selectedCountry;
+    this.selectedCountryData = null;
+    this.dataService.getCountryOverviewData(this.selectedCountry.code).subscribe(
+      rawData => {
+        this.selectedCountryData = this.dataHandlerService.convertRawDataToCountryOverviewData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+  }
+
+  deselectCountry() {
+    this.selectedCountry = null;
+    this.selectedCountryData = null;
+  }
+  /** <-- Europe Map **/
+
 }

src/app/shared/reusablecomponents/reusable-components.module.ts

@@ -14,6 +14,8 @@ import { TopmenuComponent } from '../topmenu/top-menu.component';
 import {TreemapHighchartsComponent} from '../../chart-components/treemap-highcharts/treemap-highcharts.component';
 import {HighchartsChartModule} from 'highcharts-angular';
 import {CountriesTableComponent} from '../../pages/home/countries-table.component';
+import {EuropeMapOverviewComponent} from "../../pages/home/europe-map-overview.component";
+import {NgxEchartsModule} from "ngx-echarts";
 
 const myGroups = [
 ];
@@ -28,6 +30,7 @@ const myGroups = [
     ReactiveFormsModule,
     HttpClientModule,
     HighchartsChartModule,
+    NgxEchartsModule
   ],
   declarations: [
     HelpContentComponent,
@@ -38,7 +41,8 @@ const myGroups = [
     CountriesTableComponent,
     ReadMoreComponent,
     ReadMoreTextComponent,
-    ...myGroups
+    ...myGroups,
+    EuropeMapOverviewComponent
   ],
   exports: [
     HelpContentComponent,
@@ -48,6 +52,7 @@ const myGroups = [
     TreemapHighchartsComponent,
     CountriesTableComponent,
     ...myGroups,
+    EuropeMapOverviewComponent,
     ReadMoreComponent,
     ReadMoreTextComponent
   ],

src/assets/img/icons/switch_view_grid_active.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="79px" height="28px" viewBox="0 0 79 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>switch_view_grid_active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="UI--Category_Rearch-Result-Page-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="VS03" transform="translate(-1271.000000, -104.000000)">
+            <g id="Group-6" transform="translate(410.000000, 104.000000)">
+                <g id="switch_view_grid_active" transform="translate(861.000000, 0.000000)">
+                    <rect id="Rectangle-2" stroke="#37833F" fill="#BBD5BE" x="0.5" y="0.5" width="77.974359" height="27" rx="3"></rect>
+                    <path d="M39.4900017,1 L39.4900017,27 L4,27 C2.34314575,27 1,25.6568542 1,24 L1,4 C1,2.34314575 2.34314575,1 4,1 L39.4900017,1 Z" id="Combined-Shape" fill="#FFFFFF"></path>
+                    <g id="Group-16" transform="translate(10.769231, 6.461538)" stroke="#37833F" stroke-linecap="square" stroke-width="2">
+                        <g id="Group-13">
+                            <path d="M0.345167653,1.07692308 L17.658689,1.07692308" id="Line-2"></path>
+                            <path d="M0.345167653,7.53846154 L17.658689,7.53846154" id="Line-2-Copy"></path>
+                            <path d="M0.345167653,14 L17.658689,14" id="Line-2-Copy-2"></path>
+                        </g>
+                    </g>
+                    <g id="Group-15" transform="translate(51.692308, 5.743590)" fill="#37833F">
+                        <rect id="Rectangle" x="0" y="0" width="7.17948718" height="7.17948718"></rect>
+                        <rect id="Rectangle-Copy" x="9.33333333" y="0" width="7.17948718" height="7.17948718"></rect>
+                        <rect id="Rectangle-Copy-3" x="0" y="9.33333333" width="7.17948718" height="7.17948718"></rect>
+                        <rect id="Rectangle-Copy-2" x="9.33333333" y="9.33333333" width="7.17948718" height="7.17948718"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/switch_view_list_active.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="79px" height="28px" viewBox="0 0 79 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>switch_view_list_active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="UI--Category_Rearch-Result-Page-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="VS01" transform="translate(-1271.000000, -167.000000)">
+            <g id="Group-11" transform="translate(93.000000, 167.000000)">
+                <g id="switch_view_list_active" transform="translate(1178.000000, 0.000000)">
+                    <path d="M39.4871795,0 L39.4871795,28 L3,28 C1.34314575,28 2.02906125e-16,26.6568542 0,25 L0,3 C-2.02906125e-16,1.34314575 1.34314575,3.04359188e-16 3,0 L39.4871795,0 Z" id="Combined-Shape" fill="#BBD5BE"></path>
+                    <g id="Group-16" transform="translate(10.769231, 6.461538)" stroke="#37833F" stroke-linecap="square" stroke-width="2">
+                        <g id="Group-13">
+                            <path d="M0.345167653,1.07692308 L17.658689,1.07692308" id="Line-2"></path>
+                            <path d="M0.345167653,7.53846154 L17.658689,7.53846154" id="Line-2-Copy"></path>
+                            <path d="M0.345167653,14 L17.658689,14" id="Line-2-Copy-2"></path>
+                        </g>
+                    </g>
+                    <g id="Group-15" transform="translate(51.692308, 5.743590)" fill="#37833F">
+                        <rect id="Rectangle" x="0" y="0" width="7.17948718" height="7.17948718"></rect>
+                        <rect id="Rectangle-Copy" x="9.33333333" y="0" width="7.17948718" height="7.17948718"></rect>
+                        <rect id="Rectangle-Copy-3" x="0" y="9.33333333" width="7.17948718" height="7.17948718"></rect>
+                        <rect id="Rectangle-Copy-2" x="9.33333333" y="9.33333333" width="7.17948718" height="7.17948718"></rect>
+                    </g>
+                    <rect id="Rectangle-2" stroke="#37833F" x="0.5" y="0.5" width="77.974359" height="27" rx="3"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>