CREATING CUSTOM MAPS

This tutorial teaches you how to create a custom map using standards which are used for amMap country maps, also contributed maps. If you are not going to share your map with other users of amMap, you do not need to follow these standards strictly. I am using this process when creating maps, however there might be more effective ways of doing it.

Quick recommendations for experienced users:

1) place country/areas borders in a separate layer, named borders;
2) give instance name "borders" for borders movie clip;
3) use 0.25 width solid white line for borders;
4) Use original country / area name for movie clip name;
5) Use lower cased names for movie clip instance name, use underscore for spaces, letters only (no apostrophes and other symbols): Hawke's Bay = hawkes_bay. Use country codes for countries instance names.

Step by step instructions

For the beginning you should have some country map in vector format with regional borders. Open Adobe flash and import this map to the stage.

1) Break apart
If your objects are grouped, break them all (ctrl+A) apart (ctrl+B). You might need to press ctrl+B for several times until you will not see any bounding rectangles on your stage.

2) Place borders and country shape in one layer
If they are in different layers, place them in one layer (select everything by pressing ctrl+A, copy to clipboard (ctrl+C), delete all layers, create an empty layer and paste everything to one layer (crt+V)

3) Change color and width of border lines
Select all country borders (roll over some line and double click, all connected lines will be selected. If not all lines are connected, hold shift and double click on every separate line. Change width of line to 0.25 px, color to white.

4) Creating movie clips of regions
Now, when you have borders and country shape on one layer, it is very easy to select shape of one area. All you need to do is to click once on it. If more then one are is selected, this means that there are gaps in your border lines. Usually you can notice them if you zoom-in the area. Fill the gaps with pencil tool ant try to select the area again. Then correct area is selected, fill it with some different color (I use #FFCC00). This will help you to see which of the areas are already converted. Then create a movie clip by pressing F8. Type in movie clip name (usually I use full official country / area name for movie clip name), click OK.

5) Give instance name for movie clip
Movie clip name which you gave is not the same as instance name of the movie clip on stage. After you created movie clip, select it on stage, and in the properties box (usually in the bottom of the page) look for a field with <Instance name> in it. Then write instance name here. When working with countries, I use official country codes for instance names: UK for United Kingdom, US for United States. For country areas usually I use lower cased area name with underscores instead of spaces. I also delete apostrophes and replace special characters with Latin letters, for example: Hawke's Bay = hawkes_bay.

6) Publish the map.
Do 4 and 5 with all areas, publish your flash movie for flash player 8, save fla file for flash 8. Copy your map swf file to ammap/maps/ folder.

7) Creating data file
Take ammap_data.xml and ammap_settings.xml of any country (USA for example) in the package, overwrite the existing ones in ammap/ folder. Open ammap_data.xml with text editor.

In this line:

replace "usa.swf" with your map file name.

Delete all lines with <area.....></area>, leave only one:

Now replace "AL" with instance name of one of your areas / countries you gave in flash, replace "Alabama" with real name of area / country.

Copy this line as many times as many countries / areas you have, and give proper instance name and title for every area / country.

Now you can open ammap.html with your browser. You should see a map you just made and all countries / areas colored in green. If there are some non green colors (yellow ones if you used my recommended color), this means that this areas instance name doesn't match the one you have in data file. Fix it and reload the page.

8) Place the map in the center
Turn developer mode on. Position your map in the center, click right mouse button, copy zoom info and paste in this line instead of existing one:

8) Change label text from <text>UNITED STATES OF AMERICA</text> to your own

9) Adjust capital
place red point in the place where capital of the country is: click right mouse button, copy longitude and latitude and paste it in this line instead of existing ones:

adjust zoom level and position, copy zoom info and paste it in the same line instead of the old one.

Change capital's name.

Refresh page in your browser and check whether everything is OK.

Turn developer mode off.

10) Congratulations! Zip amma_data.xml, ammap_settings.xml, your_map.swf, your_map.fla and contribute it to all users of amMap :)

* a very good one ;)