html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // the data for this sample is stored at

  // https://cdn.anychart.com/samples/maps-connectors/trip-through-the-uk/data.js

  // Creates map chart

  var map = anychart.connector();

​

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

​

  // Sets settings for map chart

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

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

​

  // Sets title for map chart and customizes it

  map

    .title()

    .enabled(true)

    .useHtml(true)

    .text(

      'Journey Route: the United Kingdom Roundtrip<br/>' +

      '<span style="color:#212121; font-size: 13px;">Example shows sample of usage a multistage connector.<br/>' +

      'All data are fictitious.</span>'

    );

​

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

  // https://cdn.anychart.com/samples/maps-connectors/trip-through-the-uk/data.js

  createSeries(map, 'Rent a Car', getCarData(), '#64b5f6'); // eslint-disable-line no-undef

  createSeries(map, 'Ferry', getShipData(), '#1976d2'); // eslint-disable-line no-undef

  createSeries(map, 'Airplane', getAirData(), '#ef6c00'); // eslint-disable-line no-undef

​

  // Turns on the legend for the sample

  map.legend(true);

​

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

  // https://cdn.anychart.com/samples/maps-connectors/trip-through-the-uk/data.js

  // Creates marker series for airport names

  var citiesSeries = map

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

    .type('circle')

    .size(4)

    .fill('#64b5f6')

    .stroke('2 #E1E1E1')

    .tooltip(false);

​

  citiesSeries.hovered().size(4).fill('#64b5f6').stroke('2 #E1E1E1');

​

  // Customizes labels for the airport names series

  citiesSeries

    .labels()

    .enabled(true)

    .position('center-bottom')

    .fontColor('#263238')

    .offsetY(0)

    .offsetX(5)

    .anchor('left-center')

    .format('{%name}');

​

  // exclude cities from the legend

  citiesSeries.legendItem(false);

​

  // 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();

});

​

// Helper function to create several series

function createSeries(map, name, data, color) {

  // Creates connector series and customizes them

  var connectorSeries = map

    .connector(data)

    .startSize(0)

    .endSize(0)

    .stroke('2 ' + color)

    .name(name)

    .curvature(0);

  connectorSeries.legendItem({

    iconType: 'circle',

    fill: color,

    iconStroke: '2 #E1E1E1'

  });

  connectorSeries.hovered().stroke('1.5 #212121');

​

  // Customizes tooltips for the destination series

  connectorSeries

    .tooltip()

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

    .fontSize(12)

    .fontColor('#fff')

    .format('{%full}')

    .titleFormat(

      '{%number}. <span style="font-size: 13px; color: #E1E1E1">{%short}</span>'

    )

    .title({ useHtml: true });

}