Creating a JS Connector Map to Visualize Tour de France 2021 Route

A connector map is a set of straight or curved lines that link points on a geographical map. It is commonly used to graphically represent routes or any other connections between locations. Would you like to learn how to build an attractive data visualization like that for a web page or app?

Actually, it is easy to create an interactive connector map using JavaScript. And I am ready to show you how right now! Follow along with this tutorial as I depict the cycling path of the 2021 Tour de France in the form of a JS connector map and thoroughly explain all steps.

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!

Creating a JS Connector Map in Four Basic Steps

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, one such library that has a special AnyMap product with good mapping documentation to help develop a connector map with ease, and I’ll explain the entire process from start to finish so you perfectly understand what each step and line of code do.

Get ready to build a stunning, interactive JavaScript connector map in four basic steps.

1. Creating an HTML page

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

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

<html>
  <head>
    <title>JavaScript Connector Map</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. Adding the necessary scripts

I am going to use the AnyChart library, so I need to add the necessary JS scripts in the <head> part of the HTML page.

To create the connector map, I need AnyChart’s ‘core’ and ‘map’ modules. Moreover, I also add the geodata of France since the route points are all there.

One more script to wrap up the map-related additions is Proj4js, a JavaScript library that ensures the plotting of coordinates over the appropriate geographical area.

<html>
  <head>
    <title>JavaScript Connector Map</title>
    <script src="https://cdn.anychart.com/geodata/latest/countries/france/france.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-map.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS connector map will come here
    </script>
  </body>
</html>

3. Preparing the data

I collect the data for the cycling route from the official website 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.

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.

To use the data in the code, I need to include the handy Data Adapter script that comes with the AnyChart JavaScript charting library to load the file.

<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-data-adapter.min.js"></script>

4. Writing the JS code to draw the connector map

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.

To begin with, I enclose all the code inside the anychart.onDocumentReady() 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() function.

<script>
  anychart.onDocumentReady(function () {
    anychart.data.loadJsonFile(
'https://gist.githubusercontent.com/shacheeswadia/4a2e84185d754984681a89194b4282df/raw/ec70b11e8f68e5e6df60cff15bff8dd5b05ce22a/connector-map.json', function (data) {
    });
  });
</script>

To create a connector map, I use the connector() function and set the geodata of France. Next, I just provide the map with a title.

// create a connector map chart
var map = anychart.connector();

// set the geodata for france
map.geoData('anychart.maps.france');

// add a title for the map
map
  .title('Tour de France 2021 Route Map');

Before showing the connections, I plot all the places on the route using the marker() function. I use the circle marker and fill it with the red color of the French flag.

// create a marker series for the place names
var citiesSeries = map
  .marker(data[0]['citiesData'])
  .type('circle')
  .fill('#c51923')
  .stroke(0);

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() function and set the color of the lines to the blue color of the French flag.

// create individual series
createSeries(map, 'Hilly', data[1]['hillyData']);
createSeries(map, 'Mountain', data[2]['mountainData']);
createSeries(map, 'Flat', data[3]['flatData']);
createSeries(map, 'Individual Time Trial', data[4]['timeTrialData']);
createSeries(map, 'Connector', data[5]['connectorData']);

...

// a helper function to create several series
function createSeries(map, name, data) {
  // configure and customize the series
  var connectorSeries = map
    .connector(data)
    .stroke('#3e5ca6')
    .fill('#3e5ca6');
}

In the last two steps, I reference the container div to display the chart and draw the map.

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

// command to draw the resulting connector map
map.draw();

And that’s the finish line! A beautiful JavaScript connector map is all ready!

Here is the complete code and you can also check it out on AnyChart Playground.

<html>
  <head>
    <title>JavaScript Connector Map</title>
    <script src="https://cdn.anychart.com/geodata/latest/countries/france/france.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-map.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-data-adapter.min.js"></script>
    <style type="text/css">
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>

      anychart.onDocumentReady(function () {
        anychart.data.loadJsonFile(
'https://gist.githubusercontent.com/shacheeswadia/4a2e84185d754984681a89194b4282df/raw/ec70b11e8f68e5e6df60cff15bff8dd5b05ce22a/connector-map.json', function (data) {

          // create a connector map chart
          var map = anychart.connector();

          // set the geodata for france
          map.geoData('anychart.maps.france');

          // add a title for the map
          map
            .title('Tour de France 2021 Route Map');

          // create a marker series for the place names
          var citiesSeries = map
            .marker(data[0]['citiesData'])
            .type('circle')
            .fill('#c51923')
            .stroke(0);

          // create individual series
          createSeries(map, 'Hilly', data[1]['hillyData']);
          createSeries(map, 'Mountain', data[2]['mountainData']);
          createSeries(map, 'Flat', data[3]['flatData']);
          createSeries(map, 'Individual Time Trial', data[4]['timeTrialData']);
          createSeries(map, 'Connector', data[5]['connectorData']);

          // sets the container id for the map
          map.container('container');

          // command to draw the resulting connector map
          map.draw();

        });
      });

      // a helper function to create several series
      function createSeries(map, name, data) {
        // configure and customize the series
        var connectorSeries = map
          .connector(data)
          .stroke('#3e5ca6')
          .fill('#3e5ca6');
      }

    </script>
  </body>
</html>

Customizing a JavaScript Connector Map

I think the current connector map already looks great. But we can certainly pack in more information and also improve it aesthetically. So pedal on with me to see how a JavaScript-based connector map visualization can be customized and become even more awesome.

Setting the colors according to the stage route terrain
Formatting the labels
Changing the curvature of the connector lines
Formatting the connector line type
Enhancing the tooltip
Modifying the marker size
Enhancing the title

CONTINUE READING HERE FOR A WALKTHROUGH OF THESE JS CONNECTOR MAP CUSTOMIZATIONS

Blog