{"id":15206,"date":"2022-07-15T17:41:30","date_gmt":"2022-07-15T17:41:30","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=15206"},"modified":"2022-08-13T11:12:24","modified_gmt":"2022-08-13T11:12:24","slug":"connector-map","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/","title":{"rendered":"Creating Connector Map with JavaScript"},"content":{"rendered":"<p><a href=\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png\" alt=\"Creating a Connector Map with JavaScript\" width=\"100%\" class=\"alignnone size-full wp-image-15218\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png 1200w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript-300x158.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript-768x403.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript-1024x538.png 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a><a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-type\/connector-map\/\">Connector maps<\/a> are designed to be ideal for visualizing routes and other links between locations in geospatial data analysis. In this tutorial, you\u2019ll learn how to quickly create a compelling interactive one using JavaScript.<\/p>\n<p>Step by step, we will be visualizing a route of the famous ancient Silk Road. We\u2019ll start with the development of a basic JS connector map in four moves and then make a few tweaks to make it look awesome. Let\u2019s start the voyage!<\/p>\n<p><!--more Read the JS charting tutorial \u00bb--><\/p>\n<h2>Connector Map Preview<\/h2>\n<p>Here is a preview of how the final JavaScript-based connector map of the tutorial will look.<\/p>\n<p><iframe sandbox=\"allow-scripts allow-pointer-lock allow-same-origin\n                 allow-popups allow-modals allow-forms\" frameBorder=\"0\" class=\"anychart-embed anychart-embed-S5T88706\"\n        allowtransparency=\"true\" allowfullscreen=\"true\"\n        src=\"https:\/\/playground.anychart.com\/S5T88706\/iframe\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-S5T88706{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<p>Without more ado, let\u2019s get to the connector mapping business!<\/p>\n<h2>Building a Basic JS Connector Map<\/h2>\n<p>The logic behind creating connector maps with JavaScript is pretty straightforward. The entire path can be broken down into four fundamental moves:<\/p>\n<ol>\n<li>Create an HTML page.<\/li>\n<li>Add the necessary JavaScript files.<\/li>\n<li>Prepare and load the data.<\/li>\n<li>Write some JS code to draw the connector map.<\/li>\n<\/ol>\n<h3>1. Create an HTML page<\/h3>\n<p>First of all, where should we put our interactive connector map? Let\u2019s create a basic HTML page.<\/p>\n<p>Right there, we add an HTML block element and assign it a unique identifier. Then, we set a style declaration in a style sheet.<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n\u00a0\u00a0&lt;head&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;meta charset=\"utf-8\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;title&gt;JavaScript Connector Map&lt;\/title&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;style type=\"text\/css\"&gt;      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0&lt;\/style&gt;\r\n\u00a0\u00a0&lt;\/head&gt;\r\n\u00a0\u00a0&lt;body&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n\u00a0\u00a0&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>In the example above, the block element is <code>&lt;div&gt;<\/code>. Its <code>id<\/code> attribute is set as \u201ccontainer.\u201d The <code>width<\/code> and <code>height<\/code> parameters of the element are 100%, which will ensure the connector map is displayed over the entire screen.<\/p>\n<h3>2. Add the necessary JavaScript files<\/h3>\n<p>Second, we need to reference all scripts that will be used for data visualization, in the <code>&lt;head&gt;<\/code> section.<\/p>\n<p>In most cases, you can choose from a wide range of <a href=\"https:\/\/en.wikipedia.org\/wiki\/Comparison_of_JavaScript_charting_libraries\" target=\"_blank\" rel=\"nofollow\">JavaScript charting libraries<\/a> to handle interactive data visualization on the web. Each has pros and cons, so which one to pick always depends on exactly what, where, and how you want. The basic approach is quite similar for all, though. In this tutorial, for illustration, we will be using a JS charting library called <a href=\"https:\/\/www.anychart.com\/\">AnyChart<\/a>. It has connector maps among the supported chart types, a detailed <a href=\"https:\/\/docs.anychart.com\/\" target=\"_blank\" rel=\"nofollow\">documentation<\/a>, and a free version.<\/p>\n<p>We need the Core and Geo Map\u00a0<a href=\"https:\/\/docs.anychart.com\/Quick_Start\/Modules\" target=\"_blank\" rel=\"nofollow noopener\">modules<\/a>\u00a0to take care of data visualization in the form of a connector map,\u00a0<a href=\"https:\/\/cdn.anychart.com\/#geodata\" target=\"_blank\" rel=\"nofollow noopener\">geodata<\/a>\u00a0for a world map, and the\u00a0<a href=\"http:\/\/proj4js.org\/\" target=\"_blank\" rel=\"nofollow noopener\">Proj4js<\/a>\u00a0library to take care of geographic coordinates.<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n\u00a0\u00a0&lt;head&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;meta charset=\"utf-8\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;title&gt;JavaScript Connector Map&lt;\/title&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-map.min.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/geodata\/custom\/world\/world.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/proj4js\/2.8.0\/proj4.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;style type=\"text\/css\"&gt;      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0&lt;\/style&gt;\r\n\u00a0\u00a0&lt;\/head&gt;\r\n\u00a0\u00a0&lt;body&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ The JS connector map code will be written here.\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/script&gt;\r\n\u00a0\u00a0&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h3>3. Prepare and load the data<\/h3>\n<p>Third, let\u2019s set data for our JavaScript-based connector map.<\/p>\n<p>The Silk Road was a <a href=\"https:\/\/www.nationalgeographic.org\/maps\/silk-roads\/\" target=\"_blank\" rel=\"nofollow\">series of routes<\/a>. Let\u2019s visualize one of them, from Xian to Venice, which lied through the cities of Lanzhou, Dunhuang, Qiemo, Hotan, Kashgar, Merv, Tehran, Baghdad, Antioch, and Athens.<\/p>\n<p>In a connector map, the start and end points of each connection line are defined using their latitude and longitude. In order to get the coordinates of the cities mentioned above, we can use one of multiple coordinate generator tools. I have already collated them from <a href=\"https:\/\/www.latlong.net\/\" target=\"_blank\" rel=\"nofollow\">LatLong.net<\/a>. Here is the list of the cities along the route that will be visualized, with their latitudes and longitudes:<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<th style=\"padding: 6px 15px;\">City<\/th>\n<th style=\"padding: 6px 15px;\">Latitude, longitude<\/th>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Xian<\/td>\n<td style=\"padding: 6px 15px;\">33.62, 113.34<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Lanzhou<\/td>\n<td style=\"padding: 6px 15px;\">36.05, 103.79<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Dunhuang<\/td>\n<td style=\"padding: 6px 15px;\">40.14, 94.66<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Qiemo<\/td>\n<td style=\"padding: 6px 15px;\">38.14, 85.52<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Hotan<\/td>\n<td style=\"padding: 6px 15px;\">37.11, 79.91<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Kashgar<\/td>\n<td style=\"padding: 6px 15px;\">39.46, 75.99<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Merv<\/td>\n<td style=\"padding: 6px 15px;\">37.66, 62.16<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Tehran<\/td>\n<td style=\"padding: 6px 15px;\">35.68, 51.38<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Baghdad<\/td>\n<td style=\"padding: 6px 15px;\">33.31, 44.36<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Antioch<\/td>\n<td style=\"padding: 6px 15px;\">36.19, 36.16<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Athens<\/td>\n<td style=\"padding: 6px 15px;\">37.98, 23.72<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Venice<\/td>\n<td style=\"padding: 6px 15px;\">45.44, 12.31<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<br \/>\nFor a connector map, data can be arranged as <a href=\"https:\/\/docs.anychart.com\/Maps\/Connector_Maps#data\" target=\"_blank\" rel=\"nofollow\">objects or arrays<\/a>. We will be using the object notation in this tutorial. So, our dataset will be an array of objects, where each object is a connector defined by four values: the latitude of the start point, the longitude of the start point, the latitude of the end point, and the longitude of the end point. Here\u2019s a dataset for our connector map visualization:<\/p>\n<pre><code class=\"javascript\">var dataSet = [    \r\n  {points: [33.62, 113.34, 36.05, 103.79]},\r\n  {points: [36.05, 103.79, 40.14, 94.66]},\r\n  {points: [40.14, 94.66, 38.14, 85.52]},\r\n  {points: [38.14, 85.52, 37.11, 79.91]},\r\n  {points: [37.11, 79.91, 39.46, 75.99]},\r\n  {points: [39.46, 75.99, 37.66, 62.16]},\r\n  {points: [37.66, 62.16, 35.68, 51.38]},\r\n  {points: [35.68, 51.38, 33.31, 44.36]},\r\n  {points: [33.31, 44.36, 36.19, 36.16]},\r\n  {points: [36.19, 36.16, 37.98, 23.72]},\r\n  {points: [37.98, 23.72, 45.44, 12.31]}\r\n];<\/code><\/pre>\n<p>Now, just a few lines of JS code to get our connector map up and running on the web page!<\/p>\n<h3>4. Write some JS code to draw the connector map<\/h3>\n<p>Fourth and finally, let\u2019s put together the JavaScript code that will draw the connector map.<\/p>\n<p>At the start, we add the <code>anychart.onDocumentReady()<\/code> function, which will enclose all the JS connector mapping code. This makes sure that everything inside it will execute only after the HTML page is loaded.<\/p>\n<pre><code class=\"html\">&lt;script&gt;\r\n  anychart.onDocumentReady(function () {\r\n    \/\/ The connector map code will be written here.\r\n  });\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>So, we add the data just prepared in the third step.<\/p>\n<pre><code class=\"javascript\">anychart.onDocumentReady(function () {\r\n\r\n  var dataSet = [    \r\n    {points: [33.62, 113.34, 36.05, 103.79]},\r\n    {points: [36.05, 103.79, 40.14, 94.66]},\r\n    {points: [40.14, 94.66, 38.14, 85.52]},\r\n    {points: [38.14, 85.52, 37.11, 79.91]},\r\n    {points: [37.11, 79.91, 39.46, 75.99]},\r\n    {points: [39.46, 75.99, 37.66, 62.16]},\r\n    {points: [37.66, 62.16, 35.68, 51.38]},\r\n    {points: [35.68, 51.38, 33.31, 44.36]},\r\n    {points: [33.31, 44.36, 36.19, 36.16]},\r\n    {points: [36.19, 36.16, 37.98, 23.72]},\r\n    {points: [37.98, 23.72, 45.44, 12.31]}\r\n  ];\r\n\r\n});<\/code><\/pre>\n<p>Everything else goes into the same enclosing function. We create a map using the <code>map()<\/code> function, then a connector map series using the <code>connector()<\/code> function (and passing the dataset into it), and set the world map geodata.<\/p>\n<pre><code class=\"javascript\">var map = anychart.map();\r\nvar series = map.connector(dataSet);\r\nmap.geoData(anychart.maps['world']);<\/code><\/pre>\n<p>Then we can add a title to make it clear what is shown on the map.<\/p>\n<pre><code class=\"javascript\">map.title(\"Silk Road Trade Route from Xian to Venice\");<\/code><\/pre>\n<p>And the last two quick lines will place the map within the \u0441ontainer element and display it on the page.<\/p>\n<pre><code class=\"javascript\">map.container('container');\r\nmap.draw();<\/code><\/pre>\n<p>There you go! Our connector map is ready, and it has been quite easy to make it in just a few lines of code!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-basic.png\" alt=\"JS connector map, a basic version\" width=\"100%\" class=\"alignnone size-full wp-image-15216\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-basic.png 1220w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-basic-300x159.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-basic-768x407.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-basic-1024x543.png 1024w\" sizes=\"(max-width: 1220px) 100vw, 1220px\" \/><\/p>\n<p>The interactive version of this basic JavaScript connector map can be found on <a href=\"https:\/\/jsfiddle.net\/awanshrestha\/wugxeyct\/\" target=\"_blank\" rel=\"nofollow\">JSFiddle<\/a> [and on <a href=\"https:\/\/playground.anychart.com\/MoyQ1HA4\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>] where you can review the code and play around with it. I am also putting the full code below.<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n\u00a0\u00a0&lt;head&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;meta charset=\"utf-8\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;title&gt;JavaScript Connector Map&lt;\/title&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-map.min.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/geodata\/custom\/world\/world.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/proj4js\/2.8.0\/proj4.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;style type=\"text\/css\"&gt;      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0&lt;\/style&gt;\r\n\u00a0\u00a0&lt;\/head&gt;\r\n\u00a0\u00a0&lt;body&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0anychart.onDocumentReady(function () {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ create a data set for connectors\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var dataSet = [    \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{points: [33.62, 113.34, 36.05, 103.79]},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{points: [36.05, 103.79, 40.14, 94.66]},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{points: [40.14, 94.66, 38.14, 85.52]},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{points: [38.14, 85.52, 37.11, 79.91]},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{points: [37.11, 79.91, 39.46, 75.99]},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{points: [39.46, 75.99, 37.66, 62.16]},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{points: [37.66, 62.16, 35.68, 51.38]},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{points: [35.68, 51.38, 33.31, 44.36]},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{points: [33.31, 44.36, 36.19, 36.16]},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{points: [36.19, 36.16, 37.98, 23.72]},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{points: [37.98, 23.72, 45.44, 12.31]}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0];\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ create a map\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var map = anychart.map();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ create a connector series\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var series = map.connector(dataSet);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set geodata\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map.geoData(anychart.maps['world']);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ title the map\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map.title(\"Silk Road Trade Route from Xian to Venice\");\r\n  \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the container id\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map.container('container');\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ draw the map\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map.draw();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/script&gt;\r\n\u00a0\u00a0&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h2>Customizing JavaScript Connector Map<\/h2>\n<p>The initial, basic connector map already gives a general idea of how that Silk Road route looked. But there is something we can quickly change to make it better.<\/p>\n<h3>A. Scale the map<\/h3>\n<p>When you look at the basic connector map critically, one of the first things you might notice is that so much space is not being used. The connector series only spans from East China to Southern Europe.<\/p>\n<p>We can actually scale the map to let it show the route closer once it is opened. (You can set the maximum and minimum values as per your requirement.)<\/p>\n<pre><code class=\"javascript\">var mapScale = map.scale();\r\nmapScale.minimumX(30);\r\nmapScale.maximumX(70);\r\nmapScale.minimumY(0);\r\nmapScale.maximumY(80);<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-1.png\" alt=\"A customized connector map build with JavaScript 1\" width=\"100%\" class=\"alignnone size-full wp-image-15215\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-1.png 1220w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-1-300x159.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-1-768x407.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-1-1024x543.png 1024w\" sizes=\"(max-width: 1220px) 100vw, 1220px\" \/><\/p>\n<h3>B. Add city labels<\/h3>\n<p>We have got our connector map with the default arrows all the way from Xian to Venice, city by city. However, it seems very empty to me, as there are no city names on the map.<\/p>\n<p>Let\u2019s add a marker series with the names of the cities set as a new array of objects, where each object has a name, latitude, and longitude property.<\/p>\n<pre><code class=\"javascript\">\/\/ create a data set for markers\r\nvar data_marker = [\r\n  {\"name\": \"Xian\", \"lat\": 33.62, \"long\": 113.34},\r\n  {\"name\": \"Lanzhou\", \"lat\": 36.05, \"long\": 103.79},\r\n  {\"name\": \"Dunhuang\", \"lat\": 40.14, \"long\": 94.66},\r\n  {\"name\": \"Qiemo\", \"lat\": 38.14, \"long\": 85.52},\r\n  {\"name\": \"Hotan\", \"lat\": 37.11, \"long\": 79.91},\r\n  {\"name\": \"Kashgar\", \"lat\": 39.46, \"long\": 75.99},\r\n  {\"name\": \"Merv\", \"lat\": 37.66, \"long\": 62.16},\r\n  {\"name\": \"Tehran\", \"lat\": 35.68, \"long\": 51.38},\r\n  {\"name\": \"Baghdad\", \"lat\": 33.31, \"long\": 44.36},\r\n  {\"name\": \"Antioch\", \"lat\": 36.19, \"long\": 36.16},\r\n  {\"name\": \"Athens\", \"lat\": 37.98, \"long\": 23.72},\r\n  {\"name\": \"Venice\", \"lat\": 45.44, \"long\": 12.31}\r\n];\r\n  \r\n\/\/ create a marker series  \r\nvar series_marker = map.marker(data_marker);<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-2.png\" alt=\"A customized connector map build with JavaScript 2\" width=\"100%\" class=\"alignnone size-full wp-image-15214\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-2.png 1220w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-2-300x159.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-2-768x407.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-2-1024x543.png 1024w\" sizes=\"(max-width: 1220px) 100vw, 1220px\" \/><\/p>\n<p>Check out the resulting JS-based connector map with the full code on <a href=\"https:\/\/jsfiddle.net\/awanshrestha\/o8hkjnt4\/\" target=\"_blank\" rel=\"nofollow\">JSFiddle<\/a> [or on <a href=\"https:\/\/playground.anychart.com\/nXXSuNbQ\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>].<\/p>\n<h3>C. Customize the markers<\/h3>\n<p>The city markers can be styled in a straightforward manner. Let\u2019s change their shape to circles and their color to red. In addition, we\u2019ll format the labels to make them better legible.<\/p>\n<pre><code class=\"javascript\">\/\/ set the marker shape and color  \r\nseries_marker\r\n  .type('circle')\r\n  .fill('red')\r\n  .stroke('#000');\r\n  \r\n\/\/ format the marker series labels  \r\nseries_marker\r\n  .labels()\r\n  .enabled(true)\r\n  .position('center')\r\n  .fontColor('#242424')\r\n  .offsetY(0)\r\n  .offsetX(5)\r\n  .anchor('left-center');<\/code><\/pre>\n<p>Oh, and let\u2019s also get rid of the arrow markers so they don\u2019t cluster the outlook. (No worries, in this way, they will still show up when you hover over the connectors.)<\/p>\n<pre><code class=\"javascript\">\/\/ hide arrows in the normal state\r\nseries.normal().markers().size(0);\r\n\/\/ hide arrows in the hovered state\r\nseries.hovered().markers().size(0);\r\n\/\/ hide arrows in the selected state\r\nseries.selected().markers().size(0);<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-3.png\" alt=\"A customized connector map build with JavaScript 3\" width=\"100%\" class=\"alignnone size-full wp-image-15213\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-3.png 1220w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-3-300x159.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-3-768x407.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-3-1024x543.png 1024w\" sizes=\"(max-width: 1220px) 100vw, 1220px\" \/><\/p>\n<h3>D. Enhance the tooltip<\/h3>\n<p>By default, the tooltip of the connector map displays the latitude and longitude, which seems boring. Let\u2019s enhance it by displaying some more information.<\/p>\n<p>For example, we can add the city names to the marker series tooltip.<\/p>\n<pre><code class=\"javascript\">series_marker.tooltip().format(\"{%name} is a city located at latitude {%lat}\u00b0 and longitude {%long}\u00b0\");<\/code><\/pre>\n<p>Also, we can provide each connector with the start and end city names. Here is a way (using a token):<\/p>\n<p>Add the information straight to the data.<\/p>\n<pre><code class=\"javascript\">var dataSet = [    \r\n  {points: [33.62, 113.34, 36.05, 103.79], travel: \"From Xian to Lanzhou\"},\r\n  {points: [36.05, 103.79, 40.14, 94.66], travel: \"From Lanzhou to Dunhuang\"},\r\n  {points: [40.14, 94.66, 38.14, 85.52], travel: \"From Dunhuang to Qiemo\"},\r\n  {points: [38.14, 85.52, 37.11, 79.91], travel: \"From Qiemo to Hotan\"},\r\n  {points: [37.11, 79.91, 39.46, 75.99], travel: \"From Hotan to Kashgar\"},\r\n  {points: [39.46, 75.99, 37.66, 62.16], travel: \"From Kashgar to Merv\"},\r\n  {points: [37.66, 62.16, 35.68, 51.38], travel: \"From Merv to Tehran\"},\r\n  {points: [35.68, 51.38, 33.31, 44.36], travel: \"From Tehran to Baghdad\"},\r\n  {points: [33.31, 44.36, 36.19, 36.16], travel: \"From Baghdad to Antioch\"},\r\n  {points: [36.19, 36.16, 37.98, 23.72], travel: \"From Antioch to Athens\"},\r\n  {points: [37.98, 23.72, 45.44, 12.31], travel: \"From Athens to Venice\"}\r\n];<\/code><\/pre>\n<p>Add that to the connector series tooltip.<\/p>\n<pre><code>series.tooltip().format('{%travel}');<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-4-1.png\" alt=\"A customized connector map build with JavaScript 4\" width=\"100%\" class=\"alignnone size-full wp-image-15221\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-4-1.png 1220w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-4-1-300x159.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-4-1-768x407.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-4-1-1024x543.png 1024w\" sizes=\"(max-width: 1220px) 100vw, 1220px\" \/><\/p>\n<h3>E. Customize the connectors<\/h3>\n<p>It\u2019s easy to change the color of the connectors\u2019 stroke. Let\u2019s make it brown, for example<\/p>\n<pre><code class=\"javascript\">series.stroke('brown');<\/code><\/pre>\n<p>Actually, the journey from Antioch to Venice was via the sea. Why don\u2019t we make that part of the route look different?<\/p>\n<p>We can modify the settings of individual connectors in the data. Let\u2019s customize those two, from Antioch to Athens and from Athens to Venice. First, we make them blue. Second, we change their curvature. So, the connector series data will be as follows:<\/p>\n<pre><code class=\"javascript\">var dataSet = [    \r\n  {points: [33.62,113.34, 36.05,103.79], travel: \"From Xian to Lanzhou\"},\r\n  {points: [36.05,103.79, 40.14, 94.66], travel: \"From Lanzhou to Dunhuang\"},\r\n  {points: [40.14, 94.66, 38.14, 85.52], travel: \"From Dunhuang to Qiemo\"},\r\n  {points: [38.14, 85.52, 37.11, 79.91], travel: \"From Qiemo to Hotan\"},\r\n  {points: [37.11, 79.91, 39.46, 75.99], travel: \"From Hotan to Kashgar\"},\r\n  {points: [39.46, 75.99, 37.66, 62.16], travel: \"From Kashgar to Merv\"},\r\n  {points: [37.66, 62.16, 35.68, 51.38], travel: \"From Merv to Tehran\"},\r\n  {points: [35.68, 51.38, 33.31, 44.36], travel: \"From Tehran to Baghdad\"},\r\n  {points: [33.31, 44.36, 36.19, 36.16], travel: \"From Baghdad to Antioch\"},\r\n  {points: [36.19, 36.16, 37.98, 23.72], travel: \"From Antioch to Athens\", curvature: -0.3, stroke: \"blue\"},\r\n  {points: [37.98, 23.72, 45.44, 12.31], travel: \"From Athens to Venice\", curvature: -0.5, stroke: \"blue\"}\r\n];<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-5.png\" alt=\"A customized connector map build with JavaScript 5\" width=\"100%\" class=\"alignnone size-full wp-image-15211\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-5.png 1220w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-5-300x159.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-5-768x407.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-custom-5-1024x543.png 1024w\" sizes=\"(max-width: 1220px) 100vw, 1220px\" \/><\/p>\n<h3>F. Add zoom actions and control<\/h3>\n<p>One last customization. By default, our connector map can be zoomed with the help of the keyboard: press Ctrl and + (Cmd and + on Mac) to zoom in or Ctrl and &#8211; (Cmd and &#8211; on Mac) to zoom out; use the arrow keys to navigate. But we can easily make it zoomable in other ways, too!<\/p>\n<p>First, we enable mouse zoom actions.<\/p>\n<pre><code class=\"javascript\">\/\/ zoom using the mouse wheel\r\nmap.interactivity().zoomOnMouseWheel(true);\r\n\r\n\/\/ double-click zoom\r\nmap.interactivity().zoomOnDoubleClick(true);<\/code><\/pre>\n<p>Second, we add the zoom UI controls:<\/p>\n<ul>\n<li>They require the following JS and CSS files that we reference:<\/li>\n<\/ul>\n<pre><code class=\"html\">&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-ui.min.js\"&gt;&lt;\/script&gt;\r\n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/css\/anychart-ui.min.css\"\/&gt;\r\n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/fonts\/css\/anychart-font.min.css\"\/&gt;<\/code><\/pre>\n<ul>\n<li>Now we set them up in the JS code:<\/li>\n<\/ul>\n<pre><code class=\"javascript\">var zoomController = anychart.ui.zoom();\r\nzoomController.target(map);\r\nzoomController.render();<\/code><\/pre>\n<p>Here\u2019s the final connector map of this tutorial!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-final.png\" alt=\"Final JavaScript connector map\" width=\"100%\" class=\"alignnone size-full wp-image-15217\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-final.png 1220w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-final-300x159.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-final-768x407.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-js-final-1024x543.png 1024w\" sizes=\"(max-width: 1220px) 100vw, 1220px\" \/><\/p>\n<p>This final interactive JS connector map is available on <a href=\"https:\/\/jsfiddle.net\/awanshrestha\/jp71z3wu\/2\" target=\"_blank\" rel=\"nofollow\">JSFiddle<\/a> [and on <a href=\"https:\/\/playground.anychart.com\/S5T88706\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>] where you can try further experimentation with it. Just in case, the full code is also here below:<\/p>\n<pre><code class=\"html\">&lt;html&gt;\r\n\u00a0\u00a0&lt;head&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;meta charset=\"utf-8\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;title&gt;JavaScript Connector Map&lt;\/title&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-map.min.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/geodata\/custom\/world\/world.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/proj4js\/2.8.0\/proj4.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-ui.min.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/css\/anychart-ui.min.css\"\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/fonts\/css\/anychart-font.min.css\"\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;style type=\"text\/css\"&gt;      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0&lt;\/style&gt;\r\n\u00a0\u00a0&lt;\/head&gt;\r\n\u00a0\u00a0&lt;body&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;script&gt;\r\n\r\n      anychart.onDocumentReady(function () {\r\n\r\n        \/\/ create a data set for connectors\r\n        var dataSet = [    \r\n          {points: [33.62, 113.34, 36.05, 103.79], travel: \"From Xian to Lanzhou\"},\r\n          {points: [36.05, 103.79, 40.14, 94.66], travel: \"From Lanzhou to Dunhuang\"},\r\n          {points: [40.14, 94.66, 38.14, 85.52], travel: \"From Dunhuang to Qiemo\"},\r\n          {points: [38.14, 85.52, 37.11, 79.91], travel: \"From Qiemo to Hotan\"},\r\n          {points: [37.11, 79.91, 39.46, 75.99], travel: \"From Hotan to Kashgar\"},\r\n          {points: [39.46, 75.99, 37.66, 62.16], travel: \"From Kashgar to Merv\"},\r\n          {points: [37.66, 62.16, 35.68, 51.38], travel: \"From Merv to Tehran\"},\r\n          {points: [35.68, 51.38, 33.31, 44.36], travel: \"From Tehran to Baghdad\"},\r\n          {points: [33.31, 44.36, 36.19, 36.16], travel: \"From Baghdad to Antioch\"},\r\n          {points: [36.19, 36.16, 37.98, 23.72], travel: \"From Antioch to Athens\", curvature: -0.3, stroke: \"blue\"},\r\n          {points: [37.98, 23.72, 45.44, 12.31], travel: \"From Athens to Venice\", curvature: -0.5, stroke: \"blue\"}\r\n        ];\r\n\r\n        \/\/ create a map\r\n        var map = anychart.map();\r\n\r\n        \/\/ create a connector series\r\n        var series = map.connector(dataSet);\r\n  \r\n        \/\/ set geodata\r\n        map.geoData(anychart.maps['world']);\r\n\r\n        \/\/ title the map\r\n        map.title(\"Silk Road Trade Route from Xian to Venice\");\r\n  \r\n        \/\/ create a data set for markers\r\n        var data_marker = [\r\n          {\"name\": \"Xian\", \"lat\": 33.62, \"long\": 113.34},\r\n          {\"name\": \"Lanzhou\", \"lat\": 36.05, \"long\": 103.79},\r\n          {\"name\": \"Dunhuang\", \"lat\": 40.14, \"long\": 94.66},\r\n          {\"name\": \"Qiemo\", \"lat\": 38.14, \"long\": 85.52},\r\n          {\"name\": \"Hotan\", \"lat\": 37.11, \"long\": 79.91},\r\n          {\"name\": \"Kashgar\", \"lat\": 39.46, \"long\": 75.99},\r\n          {\"name\": \"Merv\", \"lat\": 37.66, \"long\": 62.16},\r\n          {\"name\": \"Tehran\", \"lat\": 35.68, \"long\": 51.38},\r\n          {\"name\": \"Baghdad\", \"lat\": 33.31, \"long\": 44.36},\r\n          {\"name\": \"Antioch\", \"lat\": 36.19, \"long\": 36.16},\r\n          {\"name\": \"Athens\", \"lat\": 37.98, \"long\": 23.72},\r\n          {\"name\": \"Venice\", \"lat\": 45.44, \"long\": 12.31}\r\n        ];\r\n  \r\n        \/\/ create a marker series  \r\n        var series_marker = map.marker(data_marker);\r\n  \r\n        \/\/ define the scale\r\n        var mapScale = map.scale();\r\n        mapScale.minimumX(30);\r\n        mapScale.maximumX(70);\r\n        mapScale.minimumY(0);\r\n        mapScale.maximumY(80);\r\n  \r\n        \/\/ set the marker shape and color  \r\n        series_marker\r\n          .type('circle')\r\n          .fill('red')\r\n          .stroke('#000');\r\n  \r\n        \/\/ format the marker series labels  \r\n        series_marker\r\n          .labels()\r\n          .enabled(true)\r\n          .position('center')\r\n          .fontColor('#242424')\r\n          .offsetY(0)\r\n          .offsetX(5)\r\n          .anchor('left-center');\r\n  \r\n        \/\/ customize the tooltip\r\n        \/\/ for the connector series\r\n        series.tooltip().format('{%travel}');\r\n        \/\/ for the marker series\r\n        series_marker.tooltip().format(\"{%name} is a city located at latitude {%lat}\u00b0 and longitude {%long}\u00b0\");\r\n  \r\n        \/\/ hide the connector marker (arrows) in all states\r\n        series.normal().markers().size(0);\r\n        series.hovered().markers().size(0);\r\n        series.selected().markers().size(0);\r\n\r\n        \/\/ change the connector series color\r\n        series.stroke('brown');\r\n  \r\n        \/\/ enable zoom actions\r\n        map.interactivity().zoomOnMouseWheel(true);\r\n        map.interactivity().zoomOnDoubleClick(true);\r\n  \r\n        \/\/ add zoom controls\r\n        var zoomController = anychart.ui.zoom();\r\n        zoomController.target(map);\r\n        zoomController.render();\r\n\r\n        \/\/ set the container id\r\n        map.container('container');\r\n\r\n        \/\/ draw the map\r\n        map.draw();\r\n\r\n      });\r\n\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h2>Conclusion<\/h2>\n<p>You see it is not really difficult to build a nice interactive connector map with JavaScript. If you have a question feel free to ask in the comments. To complete mastering this data visualization technique, explore the <a href=\"https:\/\/docs.anychart.com\/Maps\/Connector_Maps\" target=\"_blank\" rel=\"nofollow\">connector map documentation<\/a> and see how it goes with other <a href=\"https:\/\/onextrapixel.com\/8-javascript-libraries-for-interactive-map-visualizations\/\" target=\"_blank\" rel=\"nofollow\">JS map libraries<\/a>.<\/p>\n<hr \/>\n<p><em>Published with the permission of Awan Shrestha. Originally appeared on <a href=\"https:\/\/www.codementor.io\/@awanshrestha\/how-to-create-a-connector-map-in-javascript-1v6rpvb57l\" target=\"_blank\" rel=\"nofollow\">Codementor<\/a> with the title <em>&#8220;How to Create a Connector Map in JavaScript&#8221;<\/em> on July 14, 2022.<\/p>\n<p>You may also want to see the basic JavaScript <a href=\"https:\/\/www.anychart.com\/blog\/2021\/09\/21\/connector-map-javascript\/\">Connector Map Tutorial<\/a> originally published on our blog last year.<\/p>\n<p>See more <a href=\"https:\/\/www.anychart.com\/blog\/category\/javascript-chart-tutorials\/\">JavaScript charting tutorials<\/a> on our blog.<\/p>\n<hr \/>\n<p><!-- SyntaxHighlighter --><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\"><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/atom-one-light.min.css\"><script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script><script>hljs.initHighlightingOnLoad();<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Connector maps are designed to be ideal for visualizing routes and other links between locations in geospatial data analysis. In this tutorial, you\u2019ll learn how to quickly create a compelling interactive one using JavaScript. Step by step, we will be visualizing a route of the famous ancient Silk Road. We\u2019ll start with the development of [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":22,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,66,23,13,279,4],"tags":[843,53,92,3173,260,235,1740,1758,3149,284,127,258,2656,232,471,620,1759,1293,2906,2907,2171,2220,2838,54,1389,1760,2757,256,3377,1111,1379,844,165,313,1370,743,133,774,1498,805,2652,1528,2050,1527,236,1762,2013,2014,32,55,150,144,146,809,151,36,907,141,249,81,57,142,96,99,67,2904,2398,58,65,56,2649,101,3395,2903,2655,68,2902,3394,1858,1859,1728,2870,3172,340,2654,237,418,2900,3393,3392,3391,3099,30,172,3100,2816,1763,804,2657],"class_list":["post-15206","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-anymap","category-html5","category-javascript","category-javascript-chart-tutorials","category-tips-and-tricks","tag-advanced-data-visualization","tag-anychart","tag-anymap","tag-app-development","tag-best-data-visualization-examples","tag-bubble-map","tag-bubble-maps","tag-chart-design","tag-chart-development","tag-chart-examples","tag-chart-types","tag-charts","tag-codementor","tag-connector-map","tag-data-analysis","tag-data-analytics-examples","tag-data-design","tag-data-map","tag-data-mapping","tag-data-maps","tag-data-vis","tag-data-visual","tag-data-visualisation","tag-data-visualization","tag-data-visualization-best-pracices","tag-data-visualization-design","tag-data-visualization-development","tag-data-visualization-examples","tag-data-visualization-guide","tag-data-visualization-practice","tag-data-visualization-tool","tag-data-visualization-tutorial","tag-data-visualizations","tag-data-visuals","tag-data-viz-examples","tag-data-viz","tag-dataviz","tag-dataviz-examples","tag-example","tag-front-end-development","tag-geodata","tag-geography","tag-geospatial-analysis","tag-geospatial-technologies","tag-geovisualization","tag-guest-post","tag-html","tag-html-charts","tag-html5","tag-html5-charts","tag-html5-maps","tag-infographics","tag-interactive-data-visualization","tag-interactive-maps","tag-interactive-visualizations","tag-javascript","tag-javascript-chart-tutorial","tag-javascript-charting","tag-javascript-charting-api","tag-javascript-charting-library","tag-javascript-charts","tag-javascript-graphics","tag-javascript-graphics-library","tag-javascript-library","tag-javascript-map","tag-javascript-map-tutorial","tag-javascript-mapping-library","tag-js-chart","tag-js-charting","tag-js-charts","tag-js-connector-map","tag-js-graphics","tag-js-line-map","tag-js-map","tag-js-mapping","tag-js-maps","tag-js-route-map","tag-line-map","tag-location-data","tag-location-data-visualization","tag-map","tag-map-design","tag-map-development","tag-map-visualizations","tag-mapping","tag-maps","tag-national-geographic","tag-route-map","tag-route-mapping","tag-route-visualization","tag-silk-road","tag-storytelling-examples","tag-tips-and-tricks","tag-tutorial","tag-visual-storytelling-examples","tag-web-design","tag-web-developers","tag-web-development","tag-web-maps","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Connector Map with JavaScript | Step-by-Step Tutorial<\/title>\n<meta name=\"description\" content=\"Learn to easily create an interactive JS (HTML5) connector map while visualizing the Silk Road route from Xian to Venice along this stepwise tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Connector Map with JavaScript\" \/>\n<meta property=\"og:description\" content=\"Learn to quickly create an interactive JS connector map while visualizing the Silk Road route from Xian to Venice.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-15T17:41:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-13T11:12:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png\" \/>\n<meta name=\"author\" content=\"Awan Shrestha\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Creating Connector Map with JavaScript\" \/>\n<meta name=\"twitter:description\" content=\"Learn to quickly create an interactive JS connector map while visualizing the Silk Road route from Xian to Venice.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Awan Shrestha\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/\"},\"author\":{\"name\":\"Awan Shrestha\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1\"},\"headline\":\"Creating Connector Map with JavaScript\",\"datePublished\":\"2022-07-15T17:41:30+00:00\",\"dateModified\":\"2022-08-13T11:12:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/\"},\"wordCount\":1479,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png\",\"keywords\":[\"advanced data visualization\",\"AnyChart\",\"AnyMap\",\"app development\",\"best data visualization examples\",\"bubble map\",\"bubble maps\",\"chart design\",\"chart development\",\"chart examples\",\"chart types\",\"charts\",\"Codementor\",\"connector map\",\"data analysis\",\"data analytics examples\",\"data design\",\"data map\",\"data mapping\",\"data maps\",\"data vis\",\"data visual\",\"data visualisation\",\"Data Visualization\",\"data visualization best practices\",\"data visualization design\",\"data visualization development\",\"data visualization examples\",\"data visualization guide\",\"data visualization practice\",\"data visualization tool\",\"data visualization tutorial\",\"data visualizations\",\"data visuals\",\"data viz examples\",\"data-viz\",\"dataviz\",\"dataviz examples\",\"example\",\"front-end development\",\"geodata\",\"geography\",\"geospatial analysis\",\"geospatial technologies\",\"geovisualization\",\"guest post\",\"HTML\",\"HTML charts\",\"HTML5\",\"html5 charts\",\"html5 maps\",\"infographics\",\"interactive data visualization\",\"interactive maps\",\"interactive visualizations\",\"JavaScript\",\"javascript chart tutorial\",\"javascript charting\",\"javascript charting api\",\"JavaScript charting library\",\"javascript charts\",\"javascript graphics\",\"JavaScript graphics library\",\"JavaScript library\",\"javascript map\",\"javascript map tutorial\",\"JavaScript mapping library\",\"js chart\",\"js charting\",\"js charts\",\"js connector map\",\"JS graphics\",\"js line map\",\"js map\",\"js mapping\",\"js maps\",\"js route map\",\"line map\",\"location data\",\"location data visualization\",\"map\",\"map design\",\"map development\",\"map visualizations\",\"mapping\",\"maps\",\"National Geographic\",\"route map\",\"route mapping\",\"route visualization\",\"Silk Road\",\"storytelling examples\",\"Tips and tricks\",\"tutorial\",\"visual storytelling examples\",\"web design\",\"web developers\",\"web development\",\"web maps\"],\"articleSection\":[\"AnyChart Charting Component\",\"AnyMap\",\"HTML5\",\"JavaScript\",\"JavaScript Chart Tutorials\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/\",\"name\":\"Connector Map with JavaScript | Step-by-Step Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png\",\"datePublished\":\"2022-07-15T17:41:30+00:00\",\"dateModified\":\"2022-08-13T11:12:24+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1\"},\"description\":\"Learn to easily create an interactive JS (HTML5) connector map while visualizing the Silk Road route from Xian to Venice along this stepwise tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Connector Map with JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1\",\"name\":\"Awan Shrestha\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/02ebd18c927547ca82372246dddcc3aebfa98928cb91405eef1a63ece7f17518?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/02ebd18c927547ca82372246dddcc3aebfa98928cb91405eef1a63ece7f17518?s=96&r=g\",\"caption\":\"Awan Shrestha\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/awan-shrestha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Connector Map with JavaScript | Step-by-Step Tutorial","description":"Learn to easily create an interactive JS (HTML5) connector map while visualizing the Silk Road route from Xian to Venice along this stepwise tutorial.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/","og_locale":"en_US","og_type":"article","og_title":"Creating Connector Map with JavaScript","og_description":"Learn to quickly create an interactive JS connector map while visualizing the Silk Road route from Xian to Venice.","og_url":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2022-07-15T17:41:30+00:00","article_modified_time":"2022-08-13T11:12:24+00:00","og_image":[{"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png","type":"","width":"","height":""}],"author":"Awan Shrestha","twitter_card":"summary_large_image","twitter_title":"Creating Connector Map with JavaScript","twitter_description":"Learn to quickly create an interactive JS connector map while visualizing the Silk Road route from Xian to Venice.","twitter_image":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Awan Shrestha","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/"},"author":{"name":"Awan Shrestha","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1"},"headline":"Creating Connector Map with JavaScript","datePublished":"2022-07-15T17:41:30+00:00","dateModified":"2022-08-13T11:12:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/"},"wordCount":1479,"commentCount":0,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png","keywords":["advanced data visualization","AnyChart","AnyMap","app development","best data visualization examples","bubble map","bubble maps","chart design","chart development","chart examples","chart types","charts","Codementor","connector map","data analysis","data analytics examples","data design","data map","data mapping","data maps","data vis","data visual","data visualisation","Data Visualization","data visualization best practices","data visualization design","data visualization development","data visualization examples","data visualization guide","data visualization practice","data visualization tool","data visualization tutorial","data visualizations","data visuals","data viz examples","data-viz","dataviz","dataviz examples","example","front-end development","geodata","geography","geospatial analysis","geospatial technologies","geovisualization","guest post","HTML","HTML charts","HTML5","html5 charts","html5 maps","infographics","interactive data visualization","interactive maps","interactive visualizations","JavaScript","javascript chart tutorial","javascript charting","javascript charting api","JavaScript charting library","javascript charts","javascript graphics","JavaScript graphics library","JavaScript library","javascript map","javascript map tutorial","JavaScript mapping library","js chart","js charting","js charts","js connector map","JS graphics","js line map","js map","js mapping","js maps","js route map","line map","location data","location data visualization","map","map design","map development","map visualizations","mapping","maps","National Geographic","route map","route mapping","route visualization","Silk Road","storytelling examples","Tips and tricks","tutorial","visual storytelling examples","web design","web developers","web development","web maps"],"articleSection":["AnyChart Charting Component","AnyMap","HTML5","JavaScript","JavaScript Chart Tutorials","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/","url":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/","name":"Connector Map with JavaScript | Step-by-Step Tutorial","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png","datePublished":"2022-07-15T17:41:30+00:00","dateModified":"2022-08-13T11:12:24+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1"},"description":"Learn to easily create an interactive JS (HTML5) connector map while visualizing the Silk Road route from Xian to Venice along this stepwise tutorial.","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2022\/07\/connector-map-javascript.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2022\/07\/15\/connector-map\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Connector Map with JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/3f107fdcb3fe326a63cd52812f5287c1","name":"Awan Shrestha","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/02ebd18c927547ca82372246dddcc3aebfa98928cb91405eef1a63ece7f17518?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/02ebd18c927547ca82372246dddcc3aebfa98928cb91405eef1a63ece7f17518?s=96&r=g","caption":"Awan Shrestha"},"url":"https:\/\/www.anychart.com\/blog\/author\/awan-shrestha\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/15206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=15206"}],"version-history":[{"count":22,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/15206\/revisions"}],"predecessor-version":[{"id":15532,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/15206\/revisions\/15532"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=15206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=15206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=15206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}