Back to amMap.com

Basics

AmMap is a tool that lets you have good-looking and functional maps on your website. The tool use Adobe Flash technology for a compelling online experience. You can display maps in any HTML page (web page), or inside another Flash movie. You can also use the maps in PowerPoint presentations.

To start, download the map package. Save the ZIP files to your hard drive, then use WinZIP (or your favourite archive software) to extract the contents into a new folder.

Adding map to a web page is done by manually inserting an HTML code snippet in the right place. Most content management systems, blog engines, etc. have a way for you to paste HTML code into the page. If you are not using a content management system, you probably know enough about HTML to have no problem with adding the code snippet.

You don't need any special tools to work with the maps, but we recommend that you download and install PSPad for Windows or Smultron for Mac OS X. They are free and convenient. You can use Notepad instead, though. To keep things simple, these help files will just refer to Notepad - you can use PSPad or your favourite plaintext editor instead of it in all cases.

You will also need a web browser. Visitors to your website will need the Adobe Flash Player 8 (or later) to view the maps. Almost everyone has it.

PLEASE NOTE: Most of the file and folder names in this tutorial refer to the contents of the distribution package. This allows you to set up a chart quickly. You can rename every file and folder, as long as you edit the HTML code accordingly.

When you extract the ZIP file, you will notice that there are a lot of files and folders there. Most of these are optional, examples you can use to quickly build an elaborate chart.

After extracting the ZIP contents to a folder, go inside this folder, and open ammap.html file in your browser by doubleclicking on it. You will see this map:

Changing the data

Go to the ammap folder and open ammap_data.xml with your text editor. Locate this line:

<area title="UNITED STATES" mc_name="US"></area>

and add color="#CC0000" attribute to it:

<area title="UNITED STATES" mc_name="US" color="#00CC00"></area>

Save the changes, and go to your browser with ammap.html opened. Refresh the page, and here is what you should see now:

As you see, the color of US changed to green. All the information about countries (areas), cities (movies), texts (labels), descriptions is held in the data file and is modified by editing this file.

Changing the look

Now, open the file ammap_settings.xml from the ammap folder with your text editor. You will see lots of XML tags with comments next to them. These are settings that control the look and behavior of the map. Locate the <small_map> setting group and set the <enabled>false</enabled>. Save the changes, reload the page, and the small map in the right bottom will disappear. For a better understanding of what you can achieve, go through all the settings and read the comments next to them, try to change some of the settings and check the result.

Using examples

The map package contains several examples that illustrate how the maps can look. You can view the examples by opening the HTML files in the examples folder. If you like one of them, you can use the data and settings files of the example to achieve your purpose more quickly. Simply overwrite the data and settings files in the ammap/ folder with the files from the examples folder. You might also need to change the file name in your HTML file. Some of the examples use additional files that must also be copied.

Summary

To summarize, the files that are involved in displaying this map are:

  • ammap.html - embeds ammap/ammap.swf file into a web page. Map size, the names of data and settings files and some other properties are set in this file.
  • swfobject.js - is a widely-used SWFObject script that makes embedding a Flash object into a web page more convenient. You can also embed Flash in your page without swfobject.
  • ammap.swf - the Flash file that displays the map
  • maps/world.swf - world map
  • ammap_data.xml - the data file
  • ammap_settings.xml - the settings file

After you modify the data and settings files so that the map looks like you want, you will need to upload the files to your web server. The contents must be placed in an online folder, so all the files inside can be accessed by a browser. The recommended place is the same folder where your web page is; or if you will be using the same map in multiple pages, the main folder of your web server.

Back to top