How To Insert Amcharts Map In Angular

Hello Guys,

This article will show you every step you need to use amCharts  in Angular.

• use this command to install amCharts

npm i @amcharts/amcharts4-geodata

npm i @amcharts/amcharts4

• And use the following code in app component.ts

import { AfterViewInit, Component, NgZone } from '@angular/core';
import * as am4core from '@amcharts/amcharts4/core';
import * as am4maps from '@amcharts/amcharts4/maps';
import am4geodata_worldHigh from '@amcharts/amcharts4-geodata/worldHigh';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {

  id: any
  btn: any
  constructor(private zone: NgZone) {

  }

  ngAfterViewInit() {

    /* Create map instance */
    var chart = am4core.create('chartdiv', am4maps.MapChart);

    /* Set map definition */
    chart.geodata = am4geodata_worldHigh;

    /* Set projection */
    chart.projection = new am4maps.projections.Miller();

    /* Create map polygon series */
    var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

    /* Make map load polygon (like country names) data from GeoJSON */
    polygonSeries.useGeodata = true;

    /* Configure series */
    var polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.tooltipText = '{name}';
    polygonTemplate.fill = am4core.color('#e2e2e2');
    polygonTemplate.events.on('hit', function (ev) {
      ev.target.series.chart.zoomToMapObject(ev.target);
    });

    /* Create hover state and set alternative fill color */
    var hs = polygonTemplate.states.create('hover');
    hs.properties.fill = am4core.color('#b3aead');

    // No thanks, Antarctica, no thanks.
    polygonSeries.exclude = ['AQ'];

    chart.zoomControl = new am4maps.ZoomControl();

    polygonSeries.events.on('inited', () => {
      polygonSeries.mapPolygons.each(polygon => {
        let assignButton;

        switch (this.id) {
          case 'US':
            assignButton = 'us';
            break;

          case 'BR':
            assignButton = 'br';
            break;

          default:
            break;
        }
        if (assignButton) {
          this.btn = document.getElementById(`${assignButton}-button`);
          this.btn.addEventListener('click', () => {
            chart = createMarkers(chart);
            setTimeout(() => {
              const animation = chart.zoomToMapObject(polygon);
              animation.events.on('animationended', () => {
                chart.homeGeoPoint = chart.centerGeoPoint;
                chart.homeZoomLevel = chart.zoomLevel;
              });
            }, 500);
          });
        }
      });
    });
  }
}
function createMarkers(chart: any) {
  console.log('calling createMarkers');
  const demoAddress = { my_lat: 35.6895, my_lng: 139.6917 };
  const mapImageSeries = chart.series.push(new am4maps.MapImageSeries());
  const imageSeriesTemplate = mapImageSeries.mapImages.template;
  const circle = imageSeriesTemplate.createChild(am4core.Circle);
  circle.radius = 10;
  circle.fill = am4core.color('#000');
  circle.stroke = am4core.color('#FFFFFF');
  circle.strokeWidth = 2;
  circle.nonScaling = true;
  circle.tooltipText = 'hi';
  imageSeriesTemplate.propertyFields.latitude = 'latitude';
  imageSeriesTemplate.propertyFields.longitude = 'longitude';
  return chart;
}

• And also use the following code in app.component.html

<h1 class="text-center">Map</h1>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>
<div id="chartdiv" style="height: 300px; width: 500px;border: 1px solid;"></div>