202121 Sep

How to Build a Connector Map with JavaScript

Summary

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. You can select and deselect the legend items to display or hide the routes of the encoded terrain or, for instance, individual time trials. By default, the tooltip of the JavaScript connector map created so far displays the latitude and longitude of the cities and towns where stages start and finish, which is not very useful. So, I modify the connector tooltip in the helper function using HTML to show the names of the start and end points for each connecting line. An absolutely lovely and insightful JavaScript (HTML5) connector map is built to showcase the 2021 cycling route of the Tour de France, one of the most prestigious annual bicycle races!

Source: Anychart

Classifications

Companies