html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/4a2e84185d754984681a89194b4282df/raw/ec70b11e8f68e5e6df60cff15bff8dd5b05ce22a/connector-map.json', function (data) {

​

    // create a connector map chart

    var map = anychart.connector();

​

    // set the geodata for france

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

​

    // add a title for the map

    map

      .title('Tour de France 2021 Route Map');

​

    // create a marker series for the place names

    var citiesSeries = map

      .marker(data[0]['citiesData'])

      .type('circle')

      .fill('#c51923')

      .stroke(0);

​

    // create individual series

    createSeries(map, 'Hilly', data[1]['hillyData']);

    createSeries(map, 'Mountain', data[2]['mountainData']);

    createSeries(map, 'Flat', data[3]['flatData']);

    createSeries(map, 'Individual Time Trial', data[4]['"timeTrialData']);

    createSeries(map, 'Connector', data[5]['connectorData']);

​

    // sets the container id for the map

    map.container('container');

​

    // command to draw the resulting connector map

    map.draw();

​

  });

});

​

// a helper function to create several series

function createSeries(map, name, data) {

  // configure and customize the series

  var connectorSeries = map

    .connector(data)

    .stroke('#3e5ca6')

    .fill('#3e5ca6');

}