Making your first map in javascript

Information TechnologyTech News

Suppose you are a business owner and your offices are located in 10 different Indian states. Now you want to display this data on your website, then this article is for you, where I am going to cover the process of creating an interactive map using FusionCharts core JavaScript charts library and it’s maps package.

Firstly, there are two ways to display data on your website −

  • A list with all the addresses or

  • An interactive map?

If you are a visual learner like most people, you will go with the second option – an interactive map.

And if you want to learn how to make an interactive map, you are at the right place.

To make it easy to understand I have divided this tutorial intro into four steps −

  • Step 1 − Structuring data

  • Step 2 − Including FusionCharts JavaScript files

  • Step 3 − Creating Container Element for Chart

  • Step 4 − Rendering the Map

Step 1 − Structuring Data

We are going to plot map of India representing number of computers with internet per state for 2013. Below is the tabular data for the same −

StateNo. of Computers
Jammu & Kashmir58438
Himachal Pradesh41344
Punjab292124
and so on…

FusionCharts understands XML and JSON data and we are going to use JSON for this tutorial.

As we have the data now, we will form the data array in JSON for our map. Data array for maps consists of one object for each state/entity which includes a unique id and value for that state. This id acts as identifier for the state and its corresponding value.

Here is how we will form data for our map −

"data": [
   { "id": "015", "value": "58438" },
   { "id": "014", "value": "41344" },
   { "id": "028", "value": "292124" },
   // more map data…
]

Step 2 − Including FusionCharts JavaScript Files

This is the first thing that every web developer has to do before actual programming of web-app starts – including dependencies for the project.

In this step we will include JavaScript files provided by FusionCharts using <script> tags in head section of our web page.

We will be including these three files −

  • FusionCharts core JavaScript file

  • FusionCharts core maps file

  • Map definition file for India

And here’s how we do it −

<head>
   <script type="text/javascript" src="location/of/fusioncharts.js"></script>
   <script type="text/javascript" src="location/of/fusioncharts.maps.js"></script>
   <script type="text/javascript" src="location/of/fusioncharts.india.js"></script>
</head>

fusioncharts.js and fusioncharts.maps.js are required to plot any map, while fusioncharts.india.js is required to plot map of India.

To plot map for any other country or state you will have to include JavaScript file for that particular country or state which are available under map definition package provided by FusionCharts.

Step 3 − Creating Container Element for Chart

Our map will occupy its position on web page inside an HTML <div> element. Here is how we do it −

<div id="indian-map">Just a Second!</div>

id for each map or chart on a web page must be unique.

Step 4 − Rendering the Map

Now that all the things we need to render the map are in place, we will finally use FusionCharts instance to create an object for our chart.

Here is the syntax for the same −

FusionCharts.ready(function() { // // FusionCharts instance
   var mapObj=new FusionCharts({ // Map Object // map definition });
});

Now we will implement the above syntax to create object for our map and use render() method to render the chart.

FusionCharts.ready(function() {
   var mapOfIndia = new FusionCharts({
      type: "maps/india",
      renderAt: "indian-map", // div container for our map
      height: "650",
      width: "100%",
      dataFormat: "json",
      dataSource: {
         "chart": {
            "caption": "No. of Computers with Internet in India",
            "subCaption": "Census 2011",
            "captionFontSize": "25",
            // other chart configurations
         },
         "colorrange": {
            "minvalue": "300",
            "startlabel": "Low",
            "endlabel": "High",
            "code": "#efedf5",
            "gradient": "1",
            "color": [{
               "maxvalue": "220000",
               "displayvalue": "Avg.",
               "code": "#bcbddc"
            }, {
               "maxvalue": "1400000",
               "code": "#756bb1"
            }]
         },
         "data": [{
            "id": "015",
            "value": "58438"
         }, {
               "id": "014",
               "value": "41344"
         }, {
               "id": "028",
               "value": "292124"
            },
            // more data
         ]
      }
   }).render(); // render method
});

If you have followed all the steps described above, you should have a great looking map of India with you like the one below –

Next Steps

Basic map is good to represent the data, but there are a lot of things that can be done using maps and charts. I am discussing some of them below −

  • Customizing the Design − FusionCharts provides tons of attributes to customize the map’s look and feel.Here are some of attributes I used to enhance the above map

    • captionFontSize − (int) It is used to change caption’s font size.

    • baseFont − (string) It is used to change the font style across the chart. You are not restricted only to use system fonts, but can also opt for any font family you like. All you have to do is include it in HTML and declare it using this attribute.

  • Adding Markers − FusionCharts provides an awesome feature in maps to add markers which can be used to represent locations like cities, malls and landmarks.

  • Moving to Next Level − FusionCharts allows you to take your data viz experience to next level by adding awesome features like drill-down, annotations and events to your map or chart.

raja
Published on 21-Oct-2019 12:15:21
Advertisements