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://cdn.anychart.com/releases/8.11.0/js/anychart-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css">
<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.11.0/fonts/css/anychart-font.min.css">
<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], travel: "From Xian to Lanzhou"},
    {points: [36.05, 103.79, 40.14, 94.66], travel: "From Lanzhou to Dunhuang"},
    {points: [40.14, 94.66, 38.14, 85.52], travel: "From Dunhuang to Qiemo"},
    {points: [38.14, 85.52, 37.11, 79.91], travel: "From Qiemo to Hotan"},
    {points: [37.11, 79.91, 39.46, 75.99], travel: "From Hotan to Kashgar"},
    {points: [39.46, 75.99, 37.66, 62.16], travel: "From Kashgar to Merv"},
    {points: [37.66, 62.16, 35.68, 51.38], travel: "From Merv to Tehran"},
    {points: [35.68, 51.38, 33.31, 44.36], travel: "From Tehran to Baghdad"},
    {points: [33.31, 44.36, 36.19, 36.16], travel: "From Baghdad to Antioch"},
    {points: [36.19, 36.16, 37.98, 23.72], travel: "From Antioch to Athens", curvature: -0.3, stroke: "blue"},
    {points: [37.98, 23.72, 45.44, 12.31], travel: "From Athens to Venice", curvature: -0.5, stroke: "blue"}
  ];

  // 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");
  
  // 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...