Clever Geek Handbook

JavaScript library for building maps

I am creating a dashboard for a sales company and I need to build a map of India on it. He should highlight the different states on the map according to the sales in that area. Please suggest a suitable JS library that might be helpful.

+3


source to share


3 answers


Use amCharts to display maps dynamically.

This will allow you to add interactive charts and maps using the amCharts libraries



Demo

www.amCharts.com

+3


source


Choosing the right JS library for this project will depend on a search that allows you to geographically display sales data. You have probably chosen several card options:

  • GIS maps (perhaps more complex than what is required for your needs).
  • Maps, which are simply images that represent shapes similar to your regions (for example, India and states in India).
  • Maps that are drawn using actual latitude and longitude data (seems to work best for you)

The advantage of latitude and longitude data maps is the ability to accurately plot data based on geographic information. I personally have experience with ZingChart, which is a JavaScript library that provides latitude and longitude maps (with India as the country and the level of detail in the states of India).



Here's a demo of what it looks like - http://zingchart.com/playground/run/54077e9d8cd24

And here is an example of the type of map selection I think you want to do - http://www.zingchart.com/gallery/?ID=25586

If you are looking for the next tier of states in India, the people at ZingChart can probably accept this request too. As a team member, I'm happy to help, so please contact us if you have further questions.

+2


source


highcharts.com is one of the solutions for the service you are looking for.

Here is an example of an implementation over India with a population that can be easily replaced with sales in this area.

A complete example can be found in the following jsFiddle

// Initiate the chart
$('#container').highcharts('Map', {
    title : {
        text : 'Highmaps basic demo'
    },
    subtitle : {
        text : 'Source map: <a href="https://code.highcharts.com/mapdata/countries/in/in-all.js">India</a>'
    },
    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },
    colorAxis: {
        min: 0
    },
    series : [{
        data : data,
        mapData: Highcharts.maps['countries/in/in-all'],
        joinBy: 'hc-key',
        name: 'Random data',
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }]
});
-1


source






More articles:


All Articles