html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

// This sample uses 3rd party proj4 component

// that makes it possible to set coordinates

// for the points and labels on the map and

// required for custom projections and grid labels formatting.

// See https://docs.anychart.com/7.14.3/Maps/Map_Projections

​

  // create data set

  var data = anychart.data.set([    

      {points: [51.5, -3.2, 57.1, -2.19], from: "Cardiff", to: "Aberdeen", time: "2h 20m"},

      {points: [55.9, -3.2, 51.45, 0], from: "Edinburgh", to: "London", time: "1h 15m"},

      {points: [54.7, -5.9, 57.6,-3.9], from: "Dublin", to: "Iverness", time: "2h 35m"}

  ]);

  // create map chart

  var map = anychart.map()

​

  //create connector series

  var series = map.connector(data);

​

  // changing the curvature of the series

  series.curvature(0.3);

​

  // changing the startSize and endSize of the connectors

  series.startSize(10);

  series.endSize(0);

​

  // set geodata

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

​

  // setting colors for hovered and selected

  series.fill("#FF9966");

  series.stroke("#CCCC99");

  series.hoverFill("#996633");

  series.selectFill("#996633");

  series.hoverStroke("#CCCC99");

  series.selectStroke("#CCCC99");

​

  // name of the chart

  map.title("Settings the markers");

​

  series.tooltip().format("A flight from {%from} to {%to} takes at least {%time}");

​

  // setting the marker position

  var markers = series.markers();

  markers.position("end");

  // setting the marker type

  markers.type(anychart.enums.MarkerType.ARROWHEAD);

  markers.size(15);

​

  // setting the anchor

  markers.anchor("leftCenter");

​

  // set container id for the chart

  map.container('container');

​

  // initiate chart drawing

  map.draw();

});