D-Net

<section class="section greySection uk-padding-top-remove uk-padding-bottom-remove" id="sect-country-page">

  <div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">

    <div class="uk-grid uk-grid-small">

      <div class="uk-width-large-4-5 uk-width-medium-3-4">

      </div>

      <div class="uk-width-large-1-5 uk-width-medium-1-4">

        <div id="sidebar_main" class="md-card dark-blue-box infoBox uk-sticky" uk-height-viewport="offset-bottom: 0">

          <div class="md-card-content">

            <h3 class="uk-text-center">{{countryName | uppercase}}</h3>

            <div>

              <!--<app-map-overview></app-map-overview>-->

              <app-country-map [country]="countryName"></app-country-map>

            </div>

            <div>This tool allows you to:</div>

            <ul>

              <li>

                better understand the European Open Data landscape

              </li>

              <li>

                find data catalogues and datasets analyse and visualise available metadata

              </li>

              <li>

                find data catalogues and datasets analyse and visualise available metadata

              </li>

              <li>

                access the raw data

              </li>

            </ul>

            <div class="uk-text-center uk-margin-medium-top">

              <button class="md-btn md-btn-primary">Learn More</button>

            </div>

          </div>

        </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>

</section>

<div class="">

  <highcharts-chart

    [Highcharts]="Highcharts"

    [constructorType]="'mapChart'"

    [options]="chartMapOptions"

    style="width: 100%; height: 200px; display: block;"

  ></highcharts-chart>

</div>

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: <a href="http://code.highcharts.com/mapdata/custom/world.js">World, Miller projection, medium resolution</a>'

      // },

      // 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]

    };

  }

}

  <button class="md-btn md-btn-secondary" (click)="printOverviewData('switcher-content-a-fade')"><i class="fas fa-print uk-margin-small-right"></i>Print report in PDF</button>

<ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >

              <button class="md-btn md-btn-primary" [routerLink]="['/countryDashboard/' + countrySelectedName]">Visit Country Page <i class="fas fa-arrow-right uk-margin-small-left"></i></button>

import { CountryMapComponent } from './pages/countrypage/country-map.component';

    CountryPageComponent,

    CountryMapComponent