How to create a simple map and embed it into a web page

Intro

AnyChart is a flexible component for creation charts and maps in Web, you can easily create a lot of maps and charts using it, so let's see step by step how to create a page with flash map.

Note: in this document only AnyChart.swf is mentioned, but you can optimize the page with selected chart type if you use custom type dependent swf. These swfs are described in SWFs Guide.

to top

Create a web page

First of all we need a plain HTML page that contains a Flash object, and place it to some folder on your web site: Below we've done it, creating AnyChartTest folder in IIS wwwroot folder with the following structure:

to top

Terms

Container page: a page where chart will be displayed; this page can be HTML, ASP, ASP.NET, CF, PHP, CGI, Perl (or any other scripting language capable to produce HTML output).

Data provider: AnyChart accepts all data needed to show the map in a single XML File. The structure of this file will be explained later.

Chart SWF: Charts and Maps displayed by AnyChart are rendered using single swf file - that is why we created an swf sub folder.

Map Data File : Map data file containing map of the certain region.

AnyChart JavaScript library: to embed a chart into a web page we'll use AnyChart JavaScript Integration Library.

to top

Choosing Map data and its visual style

As we are creating a map we need some data for it - an XML file that will tell chart how it should display map and what map to display and Map data file containing map itself. Imagine that we want to show simple colored map of USA.

We will put a map of all states - this map is stored in states.amap file that we placed in /swf folder. amap files are AnyChart proprietary format to store map data.

To tell AnyChart to use this file and show the map we need create XML settings file, like that:

XML Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03   <charts>
04     <chart plot_type="Map">
05       <chart_settings>
06         <title>
07           <text><![CDATA[USA Map]]></text>
08         </title>
09       </chart_settings>
10       <data_plot_settings>
11         <map_series source="states.amap">
12           <projection type="mercator" />
13           <undefined_map_region palette="default">
14             <label_settings enabled="True" />
15           </undefined_map_region>
16         </map_series>
17       </data_plot_settings>
18     </chart>
19   </charts>
20 </anychart>

Now copy the above code, open anychart.xml from AnyChartTest folder in any plain text editor and paste code there.

XML structure may look complex, but most of the tags are self descriptive and we can describe everything done in XML in several words:

In <chart> node we set that AnyChart should render map: we've set a "Map" plot type - <chart plot_type="Map">

In <chart_settings> node we described how our chart should look like:

We've set a map title text:

XML Syntax
Plain code
01 <title>
02   <text><![CDATA[USA Map]]></text>
03 </title>

In <data_plot_settings> we've set that "states.amap" file should be used as source for map (there are a lot of other maps in AnyChart package - see full list):

XML Syntax
Plain code
01 <map_series source="states.amap" />

Also we've set that map projection should be Mercator (learn more about projections), set palette to color states in different colors and enabled labels for all map regions:

XML Syntax
Plain code
01 <map_series source="states.amap">
02   <projection type="mercator" />
03   <undefined_map_region palette="default">
04     <label_settings enabled="True" />
05   </undefined_map_region>
06 </map_series>

to top

Attaching Custom Data to a map

With AnyChart you can attach any custom data to any map and then use this data for coloring, in labels, tooltips, legend and custom actions - learn more about this feature in How to attach data to a map tutorial.

to top

HTML File structure

Only one step remains and we will see our map on the Web!

Here is the code you should paste in anychart.html (just open it in any text editor and copy-paste the code):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AnyChart Sample Flash Map </title>
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script>
</head>
<body>
    <script type="text/javascript" language="javascript">
    //<![CDATA[
    var chart = new AnyChart( './swf/AnyChart.swf');
    chart.width = 600;
    chart.height = 450;
    chart.setXMLFile('./anychart.xml');
    chart.write();
    //]]>
    </script>
</body>
</html>

Only text in bold is the html code, that you need to embed AnyChart Flash Map into a HTML page.

to top

Final

Now we should launch our html page in a web browser, in our case we can use both:
http://localhost/AnyChartTest/anychart.html
or
C:\Inetpub\wwwroot\AnyChartTest\anychart.html

If everything was done exactly as described above, you will see the following map:
Results

You can open this sample from here: Open the Simple Map Sample

You can download the sample files from here: Download the Sample

If you want to try to modify sample in a folder other than live sample folder of AnyChart Documentation you should follow the installation tutorial: Installation of AnyChart to the Web Server of Local Machine

to top