{"id":16427,"date":"2023-03-22T16:17:14","date_gmt":"2023-03-22T16:17:14","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16427"},"modified":"2023-03-22T16:40:35","modified_gmt":"2023-03-22T16:40:35","slug":"flow-map","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/03\/22\/flow-map\/","title":{"rendered":"Creating Interactive Flow Maps with JavaScript"},"content":{"rendered":"

\"A<\/a>Flow maps are a powerful way to represent the movement of objects between different geographic locations, and with JavaScript, creating an interactive flow map is easier than you might think. Flow maps combine<\/a> the functionality of a map and a flow diagram; this type of visualization shows the direction of movement of people, goods, money, or information, as well as the quantity of those.<\/p>\n

In this step-by-step tutorial<\/a>, we’ll guide you through the process of creating a JavaScript flow map. To make it more practical, we’ll use the example of visualizing the number of students from India studying abroad in different countries. By following the tutorial, you’ll learn how to create your own flow maps using JavaScript, regardless of the data you choose to use.<\/p>\n

So, let’s get started! Follow along with us to learn how to develop your own JS Flow Map.<\/p>\n

<\/p>\n

Flow Map Preview<\/h2>\n

Take a look at what your finished JavaScript flow map will look like once you’ve completed this tutorial. By following the step-by-step instructions, you’ll have the skills to build your own interactive flow maps using JavaScript.<\/p>\n

\"Final<\/a><\/p>\n

Follow along with me to see how it’s done. I\u2019ll guide you through each step of the process so you can create your own JS-based flow maps with ease.<\/p>\n

How to Build Basic Flow Map with JavaScript<\/h2>\n

Creating a JavaScript-based flow map can be done in four basic steps:<\/p>\n

    \n
  1. Create a web\u00a0page using HTML.<\/li>\n
  2. Include the necessary JavaScript files.<\/li>\n
  3. Add the data.<\/li>\n
  4. Write JavaScript code to draw the chart.<\/li>\n<\/ol>\n

    While having a good understanding of HTML, CSS, and JavaScript can be helpful, don’t worry if you’re new to these concepts. In this tutorial, we’ll guide you through each step in detail, and you’ll be able to follow along easily.<\/p>\n

    1. Create a web page\u00a0using HTML<\/h3>\n

    To begin, let’s create a basic HTML page, as we need a container to display our flow map. We’ll do this by creating\u00a0a <div><\/code> element and setting its id<\/code> attribute to “container”. This will allow us to reference the container later when we add the map.<\/p>\n

    To make sure the flow map is displayed over the entire page, we’ll also set the <div><\/code>‘s height and width to 100% using CSS. Feel free to adjust the styling to suit your preferences.<\/p>\n

    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>Flow Map<\/title>\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; \r\n        height: 100%; \r\n        margin: 0; \r\n        padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    2. Include the necessary JavaScript files<\/h3>\n
    Next, we’ll include the necessary scripts in the head section of our HTML file to develop the JS flow map.<\/p>\n
    Using a JavaScript charting library<\/a> is the quickest and easiest way to create an interactive JavaScript flow map visualization. However, not all libraries support flow maps. For this tutorial, we’ll be using\u00a0AnyChart JS Charts<\/a>, which supports flow maps and is a great choice due to its excellent mapping documentation<\/a> and numerous ready-to-use\u00a0map examples<\/a>.<\/p>\n
    To build our flow map, we’ll need to add a few AnyChart modules<\/a>: the Core and Geo Map modules for data visualization, and geodata for the map. The Proj4js<\/a> library will be used for geographic coordinates, so it is also included. In addition, we\u2019ll need AnyChart\u2019s Common UI module and CSS, for zoom UI controls.<\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>Flow Map<\/title>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-map.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/geodata\/custom\/world\/world.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/proj4js\/2.8.0\/proj4.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-ui.min.js\"><\/script>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/css\/anychart-ui.min.css\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/fonts\/css\/anychart-font.min.css\">\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; \r\n        height: 100%; \r\n        margin: 0; \r\n        padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n    <script>\r\n      \/\/ The JS flow map code will be written here.\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    3. Add the data<\/h3>\n
    In this JS flow map tutorial, we will be visualizing the Top 10 destination countries for Indian students as of 2022. The data source for this visualization is the Ministry of External Affairs, India, which provides information on the number of Indian students studying abroad<\/a>.<\/p>\n
    To filter out the top 10 countries, I have analyzed the data and selected the following countries based on the number of Indian students studying there: Australia, Canada, Germany, Oman, Qatar, the Russian Federation, Saudi Arabia, the United Arab Emirates, the United Kingdom, and the United States.<\/p>\n
    To create the flow map, we will be using the capital cities of these countries as the ending points of the connectors, while the starting point for all connectors will be New Delhi, India. To determine the latitude and longitude of the capital cities, I used the website LatLong.net<\/a>. The table below shows the list of the selected countries, along with the total number of Indian students studying there and the coordinates of their respective capital cities.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Country<\/th>\nNumber of Indian students<\/th>\nLatitude and longitude of the capital city<\/th>\n<\/tr>\n<\/thead>\n
    Australia<\/td>\n100009<\/td>\n-30.59, 145.94<\/td>\n<\/tr>\n
    Canada<\/td>\n183310<\/td>\n45.41, -75.69<\/td>\n<\/tr>\n
    Germany<\/td>\n34864<\/td>\n52.51, 13.40<\/td>\n<\/tr>\n
    Oman<\/td>\n39550<\/td>\n23.58, 58.38<\/td>\n<\/tr>\n
    Qatar<\/td>\n46000<\/td>\n25.28, 51.53<\/td>\n<\/tr>\n
    Russian Federation<\/td>\n18039<\/td>\n55.74, 37.62<\/td>\n<\/tr>\n
    Saudi Arabia<\/td>\n65800<\/td>\n24.71, 46.67<\/td>\n<\/tr>\n
    United Arab Emirates<\/td>\n164000<\/td>\n24.45, 54.37<\/td>\n<\/tr>\n
    United Kingdom<\/td>\n55465<\/td>\n52.66, -0.95<\/td>\n<\/tr>\n
    United States<\/td>\n465791<\/td>\n38.88, -77.03<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
     
    \nBelow is the dataset that we will use to build our flow map. It is an array of objects<\/a>, where each object represents one flow direction. Each object contains the starting point and ending point latitude and longitude, the name of the destination country, and the number of Indian students studying there according to India\u2019s MEA.<\/p>\n
    var data = [\r\n  { points: [28.610198, 77.207584, -30.59, 145.94], to: \"Australia\", total: 100009 },\r\n  { points: [28.610198, 77.207584, 45.41, -75.69], to: \"Canada\", total: 183310 },\r\n  { points: [28.610198, 77.207584, 52.51, 13.40], to: \"Germany\", total: 34864 },\r\n  { points: [28.610198, 77.207584, 23.58, 58.38], to: \"Oman\", total: 39550 },\r\n  { points: [28.610198, 77.207584, 25.28, 51.53], to: \"Qatar\", total: 46000 },\r\n  { points: [28.610198, 77.207584, 55.74, 37.62], to: \"Russian Federation\", total: 18039 },\r\n  { points: [28.610198, 77.207584, 24.71, 46.67], to: \"Saudi Arabia\", total: 65800 },\r\n  { points: [28.610198, 77.207584, 24.45, 54.37], to: \"United Arab Emirates\", total: 164000 },\r\n  { points: [28.610198, 77.207584, 52.66, -0.95], to: \"United Kingdom\", total: 55465 },\r\n  { points: [28.610198, 77.207584, 38.88, -77.03], to: \"United States\", total: 465791 }\r\n];<\/code><\/pre>\n
    4. Write JavaScript code to draw the map<\/h3>\n
    Now that we have prepared our data, let’s move on to the main part of putting our flow map on our web page.<\/p>\n
    Before we begin, we need to make sure that our code only runs once the page has fully loaded and is ready. To do this, we will use the anychart.onDocumentReady()<\/code> function to enclose all our flow map\u2019s JavaScript code.<\/p>\n
    <script>\r\n  anychart.onDocumentReady(function () {\r\n    \/\/ The flow map code will be written here.\r\n  });\r\n<\/script><\/code><\/pre>\n
    Once that’s done, we can add the data we prepared in the previous step.<\/p>\n
    anychart.onDocumentReady(function () {\r\n  var data = [\r\n    { points: [28.610198, 77.207584, -30.59, 145.94], to: \"Australia\", total:    100009 },\r\n    { points: [28.610198, 77.207584, 45.41, -75.69], to: \"Canada\", total: 183310 },\r\n    { points: [28.610198, 77.207584, 52.51, 13.40], to: \"Germany\", total: 34864 },\r\n    { points: [28.610198, 77.207584, 23.58, 58.38], to: \"Oman\", total: 39550 },\r\n    { points: [28.610198, 77.207584, 25.28, 51.53], to: \"Qatar\", total: 46000 },\r\n    { points: [28.610198, 77.207584, 55.74, 37.62], to: \"Russian Federation\", total: 18039 },\r\n    { points: [28.610198, 77.207584, 24.71, 46.67], to: \"Saudi Arabia\", total: 65800 },\r\n    { points: [28.610198, 77.207584, 24.45, 54.37], to: \"United Arab Emirates\", total: 164000 },\r\n    { points: [28.610198, 77.207584, 52.66, -0.95], to: \"United Kingdom\", total: 55465 },\r\n    { points: [28.610198, 77.207584, 38.88, -77.03], to: \"United States\", total: 465791 }\r\n  ];\r\n});<\/code><\/pre>\n
    To create our flow map chart, we’ll use the AnyChart connector()<\/code> function, passing in our data to create the flow map connectors, and including the world map geodata.<\/p>\n
    var map = anychart.connector();\r\nvar connectorSeries = map.connector(data);\r\nmap.geoData(anychart.maps.world);<\/code><\/pre>\n
    Then, we’ll set the labels and add arrow markers at the end of each flow line.<\/p>\n
    connectorSeries\r\n  .labels()\r\n  .enabled(true)\r\n  .position('100%')\r\n  .format(function () {\r\n    return this.getData('to')\r\n  });\r\n\r\nconnectorSeries\r\n  .markers()\r\n  .position('100%')\r\n  .size(12);<\/code><\/pre>\n
    Next, let\u2019s add a title<\/a> for our flow map.<\/p>\n
    map.title(\"Top 10 Destination Countries for Indian Students Studying Abroad\");<\/code><\/pre>\n
    Finally, we’ll reference the container ID, place the map in the container element, and display it on the page using the draw()<\/code> function.<\/p>\n
    map.container('container');\r\nmap.draw();<\/code><\/pre>\n
    This should be enough to get our JavaScript-based flow map onto the webpage. However, since we’re working with a world map, it would be helpful to add some zoom controls to allow users to easily zoom in and out.<\/p>\n
    Believe it or not, it’s actually quite simple! We just need to add three lines of code.<\/p>\n
    var zoomController = anychart.ui.zoom();\r\nzoomController.target(map);\r\nzoomController.render();<\/code><\/pre>\n
    And that’s it! Our basic JavaScript flow map is now ready.<\/p>\n
    Take a look at the interactive version of this JavaScript flow map and play around with it in the AnyChart Playground<\/a>. I’ve included the entire code for our basic map below for your convenience.<\/p>\n