html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // Creates map chart

  var map = anychart.connector();

​

  // Sets settings for map chart

  map.padding([10, 10, 10, 10]);

  map.unboundRegions().enabled(true).fill('#E1E1E1').stroke('#D2D2D2');

​

  map.geoData('anychart.maps.canada');

  map.interactivity().selectionMode('none');

​

  // Sets title for map chart and customizes it

  map

    .title()

    .enabled(true)

    .useHtml(true)

    .padding([0, 0, 20, 0])

    .text(

      'Air Canada<br/>Popular Domestic Destinations<br/>' +

      '<span style="color:#212121; font-size: 13px;">According to www.aircanada.com/en/flights/</span>'

    );

​

  // Sets credits data

  map

    .credits()

    .enabled(true)

    .url('https://www.aircanada.com/en/flights/')

    .text('Data source: https://www.aircanada.com/en/flights/')

    .logoSrc('https://www.aircanada.com/shared/images/flags/ca.png');

​

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/maps-connectors/air-canada-popular-destinations/data.js

  // Creates connector series for destinations and customizes them

  var connectorSeries = map

    .connector(getDestinationData()) // eslint-disable-line no-undef

    .startSize(1.5)

    .endSize(1.5)

    .fill('#455a64')

    .stroke(null)

    .curvature(0.75);

​

  connectorSeries.hovered().fill('#1976d2').stroke(null);

​

  connectorSeries

    .markers()

    .position('70%')

    .size(15)

    .fill('#1976d2')

    .stroke('#E1E1E1');

​

  connectorSeries

    .hovered()

    .markers()

    .position('70%')

    .size(15)

    .fill('#455a64')

    .stroke('2 #455a64');

​

  // Customizes tooltips for the destination series

  connectorSeries.tooltip().title(false);

  connectorSeries

    .tooltip()

    .useHtml(true)

    .padding([8, 13, 10, 13])

    .fontSize(13)

    .format(function () {

      return (

        '<span style="font-size: 12px; color: #E1E1E1">From: </span>' +

        this.getData('from') +

        '<br/>' +

        '<span style="font-size: 12px; color: #E1E1E1">To: </span>' +

        this.getData('to')

      );

    });

​

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/maps-connectors/air-canada-popular-destinations/data.js

  // Creates marker series for airport names

  var airportSeries = map

    .marker(getAirportData()) // eslint-disable-line no-undef

    .type('circle')

    .size(5)

    .fill('#1976d2')

    .stroke('2 #E1E1E1')

    .tooltip(false);

​

  airportSeries.hovered().size(5).fill('#1976d2').stroke('2 #E1E1E1');

​

  // Customizes labels for the airport names series

  airportSeries

    .labels()

    .enabled(true)

    .position('center-bottom')

    .anchor('left-top')

    .format(function () {

      return this.getData('name');

    });

​

  // create zoom controls

  var zoomController = anychart.ui.zoom();

  zoomController.render(map);

​

  // Sets container id for the chart

  map.container('container');

​

  // Initiates chart drawing

  map.draw();

});