AnyChart Documentation
Still have questions?
Contact support
Still have questions?
Contact support

© 2024 AnyChart.Com All rights reserved.

Quick Start

Getting Started

To get started with AnyMap follow these simple steps and you will get your first web html5 ready geo map in a minute.

Modules

AnyMap requires adding the Core and Geo Maps modules. Reference two JavaScript files in the <head> section of your web page: 

<head>
  <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js" type="text/javascript"></script>
  <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-map.min.js" type="text/javascript"></script>
</head>

Note: These files can be downloaded from the AnyChart download page.

Learn more: Modules.

Include the GeoData

Reference the GeoData JavaScript file in the <head> section of your web page.

<head>
  <script src="https://cdn.anychart.com/geodata/2.2.0/countries/australia/australia.js"></script>
</head>

You also can use GeoJSON, TopoJSON or SVG formats. See AnyChart Map List and Supported Formats to learn more about supported formats and ways of creating maps.

You can use the link as shown above or download file from the Map Collection, put it into any folder of your site (you'll have to use your own link in such case).

If you are going to use geographic cooridnates, it is necessary to reference to proj4.js library file:

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js" data-export="true"></script>
</head>

Create a Container

Add a block-level HTML element into your page, set the id, width and height attributes. Unless you don't, AnyMap will use 100% of the container.

<body>
  <div id="container" style="width: 500px; height: 400px;"></div>
</body>

Prepare the Data

Map Data should be defined as an array of objects (each represents a region) containing at least a region id and a value. The number of fields that might a data object have is unlimited. 

data = [
    {'id': 'AU.WA', 'value': 300},
    {'id': 'AU.JB', 'value': 230}, 
    {'id': 'AU.NS', 'value': 240}, 
    {'id': 'AU.VI', 'value': 275}, 
    {'id': 'AU.NT', 'value': 130}, 
    {'id': 'AU.TS', 'value': 190}, 
    {'id': 'AU.CT', 'value': 100}, 				 
    {'id': 'AU.SA', 'value': 305},                
    {'id': 'AU.QL', 'value': 190}                 
];

Create the Map

Add the JavaScript tag <script> with the following code anywhere in the page. 

<script>
anychart.onDocumentReady(function () {
    var data = [
  		{'id': 'AU.WA', 'value': 300},
  		{'id': 'AU.JB', 'value': 230}, 
  		{'id': 'AU.NS', 'value': 240}, 
  		{'id': 'AU.VI', 'value': 275}, 
  		{'id': 'AU.NT', 'value': 130}, 
  		{'id': 'AU.TS', 'value': 190}, 
  		{'id': 'AU.CT', 'value': 100}, 				 
  		{'id': 'AU.SA', 'value': 305},                
  		{'id': 'AU.QL', 'value': 190}  
    ];

    //
    var map = anychart.map();
    map.geoData(anychart.maps.australia);

    // set the series
    var series = map.choropleth(data);
	
	  // disable labels
    series.labels(false);

    // set the container
    map.container('container');
    map.draw();
  });
</script>

Several map series types are available, see AnyChart Map Series Types to learn more.

See the Map

After all these steps you should have the following result. You can launch and explore this example further here:

Playground

Full source code

You can copy this code to a file on your computer and open it in your browser to display the map above:

<!doctype html>
<html>
  <head>
    <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js" type="text/javascript"></script>
    <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-map.min.js" type="text/javascript"></script>
    <script src="https://cdn.anychart.com/geodata/2.2.0/countries/australia/australia.js"></script>
    <style>
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
    	anychart.onDocumentReady(function () {
        var dataSet = [
    		{'id': 'AU.WA', 'value': 300},
    		{'id': 'AU.JB', 'value': 230}, 
    		{'id': 'AU.NS', 'value': 240}, 
    		{'id': 'AU.VI', 'value': 275}, 
    		{'id': 'AU.NT', 'value': 130}, 
    		{'id': 'AU.TS', 'value': 190}, 
    		{'id': 'AU.CT', 'value': 100}, 				 
    		{'id': 'AU.SA', 'value': 305},                
    		{'id': 'AU.QL', 'value': 190}  
        ];

        //
        var map = anychart.map();
        map.geoData(anychart.maps.australia);

        // set the series
        var series = map.choropleth(dataSet);
    	
    	  // disable labels
        series.labels(false);

        // set the container
        map.container('container');
        map.draw();
      });
    </script>
  </body>
</html>