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>
<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 chart
  map.title("Silk Road Trade Route from Xian to Venice");
  
  // create a data set for markers
  var data_marker = [
    {"name": "Xian", "lat": 33.62, "long": 113.34},
    {"name": "Lanzhou", "lat": 36.05, "long": 103.79},
    {"name": "Dunhuang", "lat": 40.14, "long": 94.66},
    {"name": "Qiemo", "lat": 38.14, "long": 85.52},
    {"name": "Hotan", "lat": 37.11, "long": 79.91},
    {"name": "Kashgar", "lat": 39.46, "long": 75.99},
    {"name": "Merv", "lat": 37.66, "long": 62.16},
    {"name": "Tehran", "lat": 35.68, "long": 51.38},
    {"name": "Baghdad", "lat": 33.31, "long": 44.36},
    {"name": "Antioch", "lat": 36.19, "long": 36.16},
    {"name": "Athens", "lat": 37.98, "long": 23.72},
    {"name": "Venice", "lat": 45.44, "long": 12.31}
  ];
  
  // create a marker series  
  var series_marker = map.marker(data_marker);
  
  // define the scale
  var mapScale = map.scale();
  mapScale.minimumX(30);
  mapScale.maximumX(70);
  mapScale.minimumY(0);
  mapScale.maximumY(80);

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

  // draw the map
  map.draw();

});