diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ecd914b30..8ac8f03c5 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,6 +11,7 @@ import { DataViewComponent } from './pages/home/data-view.component';
import { HighchartsChartModule } from 'highcharts-angular';
import { CountriesMapOverviewComponent } from './pages/home/countries-map-overview.component';
import { CountryPageComponent } from './pages/countrypage/country-page.component';
+import { CountryMapComponent } from './pages/countrypage/country-map.component';
@NgModule({
declarations: [
@@ -19,7 +20,8 @@ import { CountryPageComponent } from './pages/countrypage/country-page.component
CountriesTableComponent,
DataViewComponent,
CountriesMapOverviewComponent,
- CountryPageComponent
+ CountryPageComponent,
+ CountryMapComponent
],
imports: [
BrowserModule,
diff --git a/src/app/pages/countrypage/country-map.component.html b/src/app/pages/countrypage/country-map.component.html
new file mode 100644
index 000000000..3c780b409
--- /dev/null
+++ b/src/app/pages/countrypage/country-map.component.html
@@ -0,0 +1,9 @@
+
+
+
+
diff --git a/src/app/pages/countrypage/country-map.component.ts b/src/app/pages/countrypage/country-map.component.ts
new file mode 100644
index 000000000..6d049a3a4
--- /dev/null
+++ b/src/app/pages/countrypage/country-map.component.ts
@@ -0,0 +1,138 @@
+import { MapCountryData } from '../../domain/map-country-data';
+
+declare var require: any;
+
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+
+import * as Highcharts from 'highcharts';
+import MapModule from 'highcharts/modules/map';
+import {CountryOverview} from '../../domain/overview-data';
+
+const mapWorld = require('@highcharts/map-collection/custom/world.geo.json');
+const mapEurope = require('@highcharts/map-collection/custom/europe.geo.json');
+
+MapModule(Highcharts);
+
+@Component({
+ selector: 'app-country-map',
+ templateUrl: './country-map.component.html',
+ encapsulation: ViewEncapsulation.None
+})
+
+export class CountryMapComponent implements OnInit {
+
+ @Input() country: string;
+
+ Highcharts: typeof Highcharts = Highcharts;
+
+ chartMapOptions: Highcharts.Options;
+
+ mapCountryData: MapCountryData[] = [];
+ seriesColor: string = '#ff9800';
+ seriesName: string = 'OA publications';
+
+ europe: string[] = [];
+ countryNames: string[] = [];
+
+ constructor() {}
+
+ ngOnInit(): void {
+ this.countryNames.push(this.country);
+ console.log('this.country', this.country);
+ console.log('this.countryNames', this.countryNames);
+ this.mapCountryData.push(this.overviewToMapData());
+ this.loadMap(this.mapCountryData, this.seriesColor, this.seriesName, this.country);
+ }
+
+ overviewToMapData(): MapCountryData {
+ this.seriesColor = '#A26C0A';
+ this.seriesName = 'OA policies';
+ return {
+ id: this.country,
+ country: this.country,
+ z: 5
+ };
+ }
+
+ loadMap(mapCountryData: MapCountryData[], seriesColor: string, seriesName: string, countryName: string) {
+ this.chartMapOptions = {
+ chart: {
+ map: mapWorld,
+ events: {
+ load: function() {
+ // this.series[0].data = this.series[0].data.map((el) => {
+ // if (countryCodes.includes(el['hc-key'])) {
+ // el.color = 'rgba(139,151,167,0.6)';
+ // return el;
+ // }
+ // return el;
+ // });
+ // this.update({
+ // series: [{
+ // data: this.series[0].data as Highcharts.SeriesMapbubbleDataOptions,
+ // } as Highcharts.SeriesMapbubbleOptions]
+ // });
+ // // this.mapZoom(0.24, 4518.24, -8188.36);
+ // this.mapZoom(0.2, this.get('Germany')['x'], this.get('Germany')['y']);
+ },
+ // click: event => {
+ // if (event.target.hasOwnProperty('point')) {
+ // console.log(event.target['point']['name']);
+ // // this.countrySelected(event.target['point']['name']);
+ // }
+ // }
+ }
+ },
+ title: {
+ text: 'Highmaps basic demo'
+ },
+ // subtitle: {
+ // text: 'Source map: World, Miller projection, medium resolution'
+ // },
+ // mapNavigation: {
+ // enabled: true,
+ // buttonOptions: {
+ // alignTo: 'spacingBox'
+ // }
+ // },
+ legend: {
+ enabled: false
+ },
+ colorAxis: {
+ min: 0
+ },
+ series: [{
+ name: 'Countries',
+ borderColor: '#fff',
+ negativeColor: 'rgba(139,151,167,0.2)',
+ enableMouseTracking: false,
+ type: 'map'
+ }, {
+ name: 'Random data',
+ type: 'map',
+ joinBy: ['name', 'country'],
+ data : mapCountryData,
+ // data: [
+ // ['is', 1],
+ // ['no', 1],
+ // ['se', 1],
+ // ['dk', 1],
+ // ['fi', 1]
+ // ],
+ // states: {
+ // hover: {
+ // color: '#BADA55'
+ // }
+ // },
+ // dataLabels: {
+ // enabled: true,
+ // format: '{point.name}'
+ // },
+ // allAreas: false,
+ // joinBy: ['name', 'country'],
+ // data : mapCountryData
+ } as Highcharts.SeriesMapOptions]
+ };
+
+ }
+}
diff --git a/src/app/pages/countrypage/country-page.component.html b/src/app/pages/countrypage/country-page.component.html
index e69de29bb..b0ed0d6ed 100644
--- a/src/app/pages/countrypage/country-page.component.html
+++ b/src/app/pages/countrypage/country-page.component.html
@@ -0,0 +1,55 @@
+
diff --git a/src/app/pages/home/data-view.component.html b/src/app/pages/home/data-view.component.html
index 58ac12d73..78a15fd32 100644
--- a/src/app/pages/home/data-view.component.html
+++ b/src/app/pages/home/data-view.component.html
@@ -42,13 +42,13 @@
-
+
-
+
-
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 27af41507..b9e70e37b 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -69,7 +69,7 @@
-
+