AnyMap Quick Start


Getting started with Maps

1. Include AnyMap into Your Web Page

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

<head>
<script src="//cdn.anychart.com/js/latest/anymap.min.js" type="text/javascript"></script> 
</head>

You can use the link as shown above or download anychart-bundle.min.js from the AnyChart download page and then put it into any folder of your site (you’ll have to use your own link in such case).

2. Include the necessary Map into Your Web Page

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

<head>
<script src="https://cdn.anychart.com/geodata/countries/aus/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).

3. Create a Container for the Map

Add a block-based 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>

4. Prepare your 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.

dataSet = anychart.data.set([
{'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}                 
]);

5. Create a map

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

<script>
anychart.onDocumentReady(function() {
var dataSet = anychart.data.set([
		{'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>

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

The result

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

JsFiddle 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/js/latest/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/geodata/1.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 = anychart.data.set([
		{'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>

You are looking at an outdated 7.11.0 version of this document. Switch to the 8.0.1 version to see the up to date information.