{"id":13572,"date":"2021-09-21T10:21:46","date_gmt":"2021-09-21T10:21:46","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=13572"},"modified":"2023-07-29T13:12:32","modified_gmt":"2023-07-29T13:12:32","slug":"connector-map-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/09\/21\/connector-map-javascript\/","title":{"rendered":"How to Build Interactive Connector Map with JavaScript"},"content":{"rendered":"

\"Building<\/a>A connector map<\/a> is a set of straight or curved lines that link points on a geographical map. It is commonly used to\u00a0graphically\u00a0represent routes or any other connections between locations.\u00a0Would you like to learn how to build an attractive data visualization like that for a web page or app?<\/p>\n

Actually, it is easy to create an interactive connector map\u00a0using JavaScript.\u00a0And I\u00a0am ready to show you how right now! Follow along with this tutorial as I depict the cycling path of the 2021 Tour de France<\/a> in the form of a JS connector map and thoroughly explain all steps.<\/p>\n

<\/p>\n

Here is a preview to get you excited for the ride, the beautiful interactive JavaScript connector map that will have been built by the end of the tutorial!<\/p>\n

\"Final<\/p>\n

Creating JS Connector Map in Four Basic Steps<\/h2>\n

Building a connector map with JavaScript is a bit more complex than other basic charts. But it becomes simpler when we use a JS charting library that can provide an out-of-the-box option to create it. In this tutorial, I will use AnyChart<\/a>, one such library that has a special AnyMap<\/a> product with good mapping documentation<\/a> to help develop a connector map with ease, and I\u2019ll explain the entire process from start to finish so you perfectly understand what each step and line of code do.<\/p>\n

Get ready to build a stunning, interactive JavaScript connector map in four basic steps.<\/p>\n

1. Creating an HTML page<\/h3>\n

Firstly I require a blank HTML page to hold my connector map. I add a <div><\/code> element with a unique id in the <body><\/code> of my HTML page, which I will reference later.<\/p>\n

I also set the width and height of the <div><\/code> to 100% using the <style><\/code> tag to make my map fit the entire screen. You can adjust these parameters based on your requirements.<\/p>\n

<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Connector Map<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
2. Adding the necessary scripts<\/h3>\n
I am going to use the AnyChart library, so I need to add the necessary JS scripts in the <head><\/code> part of the HTML page.<\/p>\n
To create the connector map, I need AnyChart\u2019s \u2018core<\/a>\u2019 and \u2018map<\/a>\u2019 modules. Moreover, I also add the geodata<\/a> of France since the route points are all there.<\/p>\n
One more script to wrap up the map-related additions is Proj4js<\/a>, a JavaScript library that ensures the plotting of coordinates over the appropriate geographical area.<\/p>\n
<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Connector Map<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/geodata\/latest\/countries\/france\/france.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-map.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/proj4js\/2.3.15\/proj4.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ All the code for the JS connector map will come here\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
3. Preparing the data<\/h3>\n
I collect the data for the cycling route from the official website<\/a> of the Tour de France. A JS connector map requires the data to be in a certain format, so I created a specific dataset by adding the data in the required format. You can check out the file here<\/a>.<\/p>\n
In a connector map dataset, the main thing to remember is that the start and end points are defined by the latitude and longitude of each location where the latitude is defined first and then the longitude. For your information, I took the latitude and longitude information for each point from LatLong.net<\/a>.<\/p>\n
To use the data in the code, I need to include the handy Data Adapter<\/a> script that comes with the AnyChart JavaScript charting library to load the file.<\/p>\n
<script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-data-adapter.min.js\"><\/script>\r\n<\/code><\/pre>\n
4. Writing the JS code to draw the connector map<\/h3>\n
Now is the time for the final and most important stage of the race, which is writing the main lines of JavaScript code for generating the connector map itself.<\/p>\n
To begin with, I enclose all the code inside the anychart.onDocumentReady()<\/code> function to ensure that it is executed only when the web page is fully loaded. Then I add the data using the anychart.data.loadJsonFile()<\/code> function.<\/p>\n
<script>\r\n\u00a0\u00a0anychart.onDocumentReady(function () {\r\n\u00a0\u00a0\u00a0\u00a0anychart.data.loadJsonFile(\r\n'https:\/\/gist.githubusercontent.com\/shacheeswadia\/4a2e84185d754984681a89194b4282df\/raw\/ec70b11e8f68e5e6df60cff15bff8dd5b05ce22a\/connector-map.json', function (data) {\r\n\u00a0\u00a0\u00a0\u00a0});\r\n\u00a0\u00a0});\r\n<\/script>\r\n<\/code><\/pre>\n
To create a connector map, I use the connector()<\/code> function and set the geodata of France. Next, I just provide the map with a title.<\/p>\n
\/\/ create a connector map chart\r\nvar map = anychart.connector();\r\n\r\n\/\/ set the geodata for france\r\nmap.geoData('anychart.maps.france');\r\n\r\n\/\/ add a title for the map\r\nmap\r\n  .title('Tour de France 2021 Route Map');<\/code><\/pre>\n
Before showing the connections, I plot all the places on the route using the marker()<\/code> function. I use the circle marker and fill it with the red color of the French flag.<\/p>\n
\/\/ create a marker series for the place names\r\nvar citiesSeries = map\r\n  .marker(data[0]['citiesData'])\r\n  .type('circle')\r\n  .fill('#c51923')\r\n  .stroke(0);<\/code><\/pre>\n
Now I represent the various connections using a helper function that accepts the map, the name of the series, and the data. You will see later on in this tutorial why I have made five different series. In the helper function, I create the links with the connector()<\/code> function and set the color of the lines to the blue color of the French flag.<\/p>\n
\/\/ create individual series\r\ncreateSeries(map, 'Hilly', data[1]['hillyData']);\r\ncreateSeries(map, 'Mountain', data[2]['mountainData']);\r\ncreateSeries(map, 'Flat', data[3]['flatData']);\r\ncreateSeries(map, 'Individual Time Trial', data[4]['timeTrialData']);\r\ncreateSeries(map, 'Connector', data[5]['connectorData']);\r\n\r\n...\r\n\r\n\/\/ a helper function to create several series\r\nfunction createSeries(map, name, data) {\r\n  \/\/ configure and customize the series\r\n  var connectorSeries = map\r\n    .connector(data)\r\n    .stroke('#3e5ca6')\r\n    .fill('#3e5ca6');\r\n}<\/code><\/pre>\n
In the last two steps, I reference the container div to display the chart and draw the map.<\/p>\n
\/\/ set the container id for the map\r\nmap.container('container');\r\n\r\n\/\/ command to draw the resulting connector map\r\nmap.draw();<\/code><\/pre>\n
And that\u2019s the finish line! A beautiful JavaScript connector map is all ready!<\/p>\n