Areas are movie clips which are already in map file. You can also call areas as "countries" or "regions". Areas can contain movies, labels and lines. Areas should be placed in <areas> node:
<areas> <area mc_name="UK" title="United Kingdom"> <description><![CDATA[<b>Some html formatted description can be placed here</b>]]></description> </area> <area mc_name="US" title="United States" color="#CC0000" zoom="493%" zoom_x="-47%" zoom_y="-206%"></area> </areas>
In the example above two areas (countries) are described. The first area, "UK" has a description, this means the text box with this description will be displayed when user clicks on this area. The second area, "US" doesn't have description, but it has zoom_x, zoom_y and zoom attributes set. This means that the map will zoom to the specified position when the user clicks on it. It also has color defined - the area will be green in this case.
All available area properties (attributes)
| Name | Type | If not set | Description |
|---|---|---|---|
| mc_name | String | Movie clip instance name. This instance name is set in the map file before publishing. All the maps included in the map package has a list of all available areas, so you don't need to worry about these names if you use default maps. | |
| oid | String | Unique object id. You only need it if you want to group the areas or you want one object to work as a "link" to another. | |
| color | Hex color code | If you do not set color, the area will keep its original color. | |
| color_hover | Hex color code | <settings><area><color_hover> | Area color when user roll-overs the area. Will use value from settings file if not defined in data file. |
| alpha | Number | 100 | Opacity of an area, use 0 for invisible (but still clickable). |
| hover_alpha | Number | 100 | Opacity of an area when rolled over with mouse cursor. |
| title | String | Area title | Title can be displayed in a roll-over balloon. |
| url | String | There are several options: 1) web site address: http://www.ammap.com 2) JavaScript function: javascript:alert('area US clicked'); 3) #top - will go to top level of your map 4) #parent - will go one level up 5) #object_id - will act as if object with oid="object_id" was clicked | |
| target | String | Target of an url. Will work only if url is web site address. Do not set any target if you want this page to be opened in the same window. For a new window use "_blank". | |
| value | Number | Value of the area. Value can be displayed in a roll-over balloon. If you do not set color of the area, the areas with high value will be filled with colors close to <settings><area><color_solid>, and the areas with low values - close to <settings><area><color_light> color. | |
| zoom_x, zoom_y, zoom | Number% | You should set zoom_x, zoom_y and zoom if you want map to be zoomed or moved to a different position when user clicks on the area. To find out these values, turn developer mode on, set desired zoom level and position, copy "zoom info" to clipboard and paste it into area node. | |
| lat, long | Number% | If you set latitude, longitude of the area and some zoom level, but do not set zoom_x and zoom_y, clicking on the area will zoom-in to the given latitude and longitude. | |
| text_box | true / false | <settings><text_box><enabled> | Text box displays description of your area. If your area has description, but you don't want text box to appear, set this attribute to false. |
| text_box_x | Number, Number%, !Number | <settings><text_box><x> | Text box x position. |
| text_box_y | Number, Number%, !Number | <settings><text_box><y> | Text box y position. |
| text_box_width | Number or Number% | <settings><text_box><width> | Text box width. |
| text_box_height | Number or Number% | <settings><text_box><height> | Text box height |
| text_box_title | String | Alternate title for the text box | |
| balloon | true / false | true | If you want to disable roll over ballon for a specific area, set this attribute to false. |
| link_with | other objects' oid attributes, separated by commas | If you want some other objects to change color when user rolls over or clicks on this area, you can add object's ids (oid) here. | |
| preserve_color | true / false | false | If you want to skip coloring settings for this area and display original color as it is defined in the source map set this attribute to true. |
| auto_zoom | true / false | false | If you set this to true, the map will center and zoom in on this area even if it has no zoom properties set. (this setting can be set globally with <zoom><auto_zoom> setting. If <area> has "zoom" property set, auto_zoom will use that value for zoom level as well as center the map on the area. |