JSFiddle - React, Tailwind, and code Playground

by awanshrestha

HTML

<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-map.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/geodata/custom/world/world.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.8.0/proj4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.8.0/proj4.js"></script>
<div id="container"></div>

CSS

html, body, #container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

anychart.onDocumentReady(function () {

  // create a data set for connectors
  var dataSet = [    
    {points: [33.62, 113.34, 36.05, 103.79]},
    {points: [36.05, 103.79, 40.14, 94.66]},
    {points: [40.14, 94.66, 38.14, 85.52]},
    {points: [38.14, 85.52, 37.11, 79.91]},
    {points: [37.11, 79.91, 39.46, 75.99]},
    {points: [39.46, 75.99, 37.66, 62.16]},
    {points: [37.66, 62.16, 35.68, 51.38]},
    {points: [35.68, 51.38, 33.31, 44.36]},
    {points: [33.31, 44.36, 36.19, 36.16]},
    {points: [36.19, 36.16, 37.98, 23.72]},
    {points: [37.98, 23.72, 45.44, 12.31]}
  ];

  // create a map
  var map = anychart.map();

  // create a connector series
  var series = map.connector(dataSet);

  // set geodata
  map.geoData(anychart.maps['world']);

  // title the map
  map.title("Silk Road Trade Route from Xian to Venice");

  // set the container id
  map.container('container');

  // draw the map
  map.draw();

});