Highmaps Integration Into a Web Application

by Shahid Ayoub

Highmaps can be very useful when we have to depict statistics related to geographical areas in our web applications. Graphical representation of data in highmaps, whether it is unemployment rate, population density or literacy rate etc. of a country or state, help in expressing it in a convenient fashion. Moreover, it also attracts users.

Highmaps is Highcharts for geo maps. Mainly choropleth maps where the color intensity relates to some value of a geographic area, but Highmaps also supports different features like lines (roads, rivers etc.) and points (cities, points of interest) and more. Highmaps offer a free collection of maps, optimized for use with it. For common maps, it saves you the trouble of finding or drawing suitable SVG or GeoJSON maps. Instead, you can choose between hundreds of pre-generated maps of countries, regions, and other administration levels.

For full list of Map Collection visit: http://code.highcharts.com/mapdata/

Below is a screenshot of one of our projects at Applied Informatics Inc  showing Statewise Distribution of Grants for research purposes provided to different states in US:

Screen Shot

Now, in order to integrate highmaps into our application we first have to add following script file links to our html file. Our html will look like this:

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>

The below mentioned div tag will be the position for map to be displayed on our application. We can set styles as per our requirements:

<div id="GrantsMap" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

Note: Here we have added US maps in map data script file link. It can be map of any other country depending on the requirement of the application. For example, if  we have to show statistics of some data in Australia, this link will be :

<script src="https://code.highcharts.com/mapdata/countries/au/au-all.js"></script>

Next, we will write javascript for our map, which will define various characteristics of our map. Javascript will look like this:

$(function () {

 

data = [

    {

        "value": 238,

        "code": "nj"

    },

    {

        "value": 345,

        "code": "ri"

    },

    {

        "value": 300,

        "code": "ma"

    },

    {

        "value": 231,

        "code": "ct"

    },

    {

        "value": 207,

        "code": "md"

    },

    {

        "value": 195,

        "code": "ny"

    },

    {

        "value": 164,

        "code": "de"

    },

    {

        "value": 174,

        "code": "fl"

    },

    {

        "value": 307,

        "code": "oh"

    },

    {

        "value": 165,

        "code": "pa"

    },

    {

        "value": 21,

        "code": "ak"

    }

];

 

        // Make codes uppercase to match the map data

        $.each(data, function () {

            this.code = this.code.toUpperCase();

        });

 

        // Instantiate the map

        $('#GrantsMap').highcharts('Map', {

 

            chart : {

                borderWidth : 1

            },

 

            title : {

                text : 'Statewise Distribution of Grants'

            },

 

            legend: {

                layout: 'horizontal',

                borderWidth: 0,

                backgroundColor: 'rgba(255,255,255,0.85)',

                floating: true,

                verticalAlign: 'top',

                y: 25

            },

 

            mapNavigation: {

                enabled: true

            },

 

            colorAxis: {

                min: 1,

                type: 'logarithmic',

                minColor: '#EEEEFF',

                maxColor: '#000022',

                stops: [

                    [0, '#EFEFFF'],

                    [0.67, '#4444FF'],

                    [1, '#000022']

                ]

            },

 

            series : [{

                animation: {

                    duration: 1000

                },

                data : data,

                mapData: Highcharts.maps['countries/us/us-all'],

                joinBy: ['postal-code', 'code'],

                dataLabels: {

                    enabled: true,

                    color: '#FFFFFF',

                    format: '{point.code}'

                },

                name: 'Grants',

                tooltip: {

                    pointFormat:  '{point.code}:$ {point.value}'            

  }

            }]

        });

});

Here, we can see that data is in the form of a dictionary. And this data is mapped with map-data using  joinBy attribute of highchart. We are mapping it on the basis of postal-code of mapdata with code of our data. And color-axis attribute will determine the color intensity related to Grants allocated value of a geographic area. This will display Grant Status of the states of US as shown below:

StateMap

Note: Data used in the above example is the dummy data for demo purpose only.

We can thus use various types of maps available with Highcharts. Hopefully this blog will lay the stepping stone for you as a developer to start using Highmaps in your web applications.

Leave a Reply

Your email address will not be published. Required fields are marked *

Tools & Practices

Tools and Technologies we use at Applied

Contact us now

Popular Posts