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

​

// create data set

var data = [

    {points: [-37.85, 144.79, -33.79, 150.64], from: "Melbourne", to: "Sydney", passengers: "8 322 300"},

    {points: [-27.40, 152.44, -37.85, 144.79], from: "Brisbane", to: "Melbourne", passengers: "3 317 100"},

    {points: [-27.98, 153.04, -33.79, 150.64], from: "Gold Coast", to: "Sydney", passengers: "2 596 400", curvature: -0.5},

    {points: [-37.85, 144.79, -31.93, 115.96], from: "Melbourne", to: "Perth", passengers: "2 160 700", curvature: -0.5},

    {points: [-34.98, 138.42, -33.79, 150.64], from: "Adelaide", to: "Sydney", passengers: "1 813 000"},

    {points: [-31.93, 115.96, -33.79, 150.64], from: "Perth", to: "Sydney", passengers: "1 798 900"},

    {points: [-37.85, 144.79, -42.88, 147.31], from: "Melbourne", to: "Hobart", passengers: "1 400 200"}

];

​

// create data set for the marker series

var data_marker = [

    {lat: -37.85, long: 144.79, name: "Melbourne", label:{position:"left", anchor:"right-bottom"}},

    {lat: -33.79, long: 150.64, name: "Sydney", label:{position:"center-bottom", anchor:"left-top"}, type:"star5", fill: "gold", stroke: "#CC9900",  hoverFill: "gold", hoverStroke: "#CC9900", selectFill: "gold", selectStroke: "#CC9900"},

    {lat: -27.40, long: 152.44, name: "Brisbane", label:{position: "center-top", anchor:"right-bottom"}},

    {lat: -27.98, long: 153.04, name: "Gold Coast", label:{position:"right", anchor:"left-bottom"}},

    {lat: -34.98, long: 138.42, name: "Adelaide", label:{position:"left-bottom", anchor:"right-top"}},

    {lat: -31.93, long: 115.96, name: "Perth", label:{position:"center-top", anchor:"right-bottom"}},

    {lat: -42.88, long: 147.31, name: "Hobart", label:{position:"center-bottom", anchor:"center-top"}}

];

​

​

// create map chart

var map = anychart.map();

​

// create connector series

var series_connector = map.connector(data);

​

// create marker series

var series_marker = map.marker(data_marker);

​

// set geodata

map.geoData(anychart.maps.australia);

​

// markers of connector series

series_connector.markers(false);

​

// tooltip formatter

series_connector.tooltip().format("From: {%from} \nTo: {%to} \nPassengers (in 2013): {%passengers}");

​

// set the start and end sizes

series_connector.startSize(15);

series_connector.endSize(0);

​

// connector series colors

series_connector.fill("#339999");

series_connector.stroke("#336666");

series_connector.hovered().fill("#669999");

series_connector.hovered().stroke("#336666");

series_connector.selected().fill("#006666");

series_connector.selected().stroke("#336666")

​

// adjust marker series tooltips

series_marker.tooltip().titleFormat("{%name}");

series_marker.labels().fontColor("#000");

​

series_marker.fill("#336666");

series_marker.hovered().fill("#336666");

series_marker.selected().fill("#336666");

series_marker.stroke("#336666");

series_marker.hovered().stroke("#336666");

series_marker.selected().stroke("#336666");

series_marker.size(5);

​

series_marker.zIndex(1000);

​

// name of the chart

map.title("10 most popular flights through Australia");

// set container id for the chart

map.container('container');

// initiate chart drawing

map.draw();

});