Maps Visualization Configuration

• Overview
• Defined and Undefined Regions
• Map Region Styles
• Styles Inheritance
• Palettes
• Color all map regions series in a map
• Color given regions series
• Color all undefined regions
• Use palette via Automatic Thresholds
• Threshold coloring

Overview

AnyChart allows you to configure visual style of any map region, to be able to configure how map regions will looks like you have to know what are defined and undefined regions, what is map region style and what it consists of.

Other useful features used to configure map coloring are palettes and thresholds.

Defined and Undefined Regions

Difference between defined and undefined regions is very easy to learn - if there is any point in series of "MapRegions" - then this region is defined, otherwise (no such point) - the region is undefined.

This distinction is made to make easier the creation of simple color maps (with no additional data attached in XML), and to ease coloring of those regions that have no data attached (to make them all gray and non-interactive, for example)

So, there are two almost identical nodes in <map_series>: <defined_map_region> and <undefined_map_region>.

Both of them contain <map_region_style> node that is used configuration, but undefined<undefined_map_region> also has palette attribute (used to color all undefined regions) and threshold attribute (used to apply threshold to color undefined regions - in case when some data is built-in into .amap file).

Also, <undefined_map_region> can contain <actions> subnode to attach actions to regions without data attached, if you want to attach actions to regions with data - use <actions> in <data>, <series> or <point> nodes.

In the next chapter you can learn what can be configured in <map_region_style> node.

Map Styles

In this section we will describe main parts of map regions style and demonstrate how style can be created and applied.

The main idea of styles is to segregate visualization and data definition. Visual appearance of regions is defined using certain styles and then you just apply the style to the certain regions. Style can be applied to all defined regions, to all undefined regions, to a series or a single region.

Style can be configured in <map_region_style>, <defined_map_region> and <undefined_map_region> nodes. On the sample image below you can see what map_region_style consists of: fill (including solid color fill, hatch fill, image fill and gradient fill), border and effects applied to whole region.

Now we will take a closer look at XML settings that allowed us to create a map displayed on image above.

Undefined regions

There are two "Undefined" regions - Wales and Northern Ireland, their appearance is configured in <map_region_style> sub-node of <undefined_map_region>:

As you can see, you can change style for all undefined regions in this node (in this sample change the opacity of background and disable hatch fill).

Defined regions

We have two defined regions - England and Scotland, we could color them just the same way - setting <map_region_style> sub-node of <defined_map_region>, but we will demonstrate creation and applying styles on this two regions.

For England we will create a "SimpleStyle", which XML settings are:

In this ("SimpleStyle") style we changed fill and border colors, enabled hatch fill, and added drop shadow effect.

For Scotland we will create a "Scotland" style, which XML settings are:

In "Scotland" style we changed fill to image (using image old Royal coat of arms of Scotland), set border color, disabled hatch fill and effects.

As soon as this two styles are created - we can apply them to regions:

England gets its simple style from style attribute of <defined_map_region> node - this attribute sets default style for all defined regions (<undefined_map_region> also has such attribute).

Scotland region style is set explicitly in <point> node:

And here is a live sample of the map with styles defined, you can take a closer look at XML settings:

Styles Inheritance

Important thing about styles defined in <styles> node is that they can be inherited, and you can define one "Basic" style and inherit several styles from it - just changing a few setting instead of duplicating all style.

Lets look at the sample of styles inheritance. We will display map of the USA, all states will be styled using one basic style, and some states will be styled using styles inherited from the basic one.

Basic style settings will look like that:

You can see that is is pretty complex style - in configures gradient background and defines how region looks like in selected and pushed states (Read more about region states).

We want to create a style ("Child1") that will be almost similar and don't want to duplicate this complex settings, so we just create new style and set "Basic" as a parent:

And one more ("Child2") style - another color, and hatch fill enabled in normal state:

So, in "Child1" style we just disabled hatch fill (hatch fill on select is enabled in Basic), and set the Khaki color.

Now we will apply these two styles, "Basic" style will be applied to all undefined regions:

"Child1" and "Child2" style will be applied to the certain states in <point> and <series> nodes:

Sample USA map with style inheritance use:

Palettes

AnyChart palettes allow you to color your map without setting certain color to each regions personally, there are built-in palettes, custom color range palettes and custom distinct colors palettes. You also can use Hatch Palettes and Marker Palettes as well.

General information about palettes can be found in Palettes tutorial.

You have the following options when applying palettes to a map:

• Apply palette to all series in a map
• Apply palette to the given series
• Apply palette to the undefined regions
• Apply palette via Automatic Thresholds

Color all map regions series in a map

When you have several series of Map Regions, and want all of them to be colored with a different color you may either explicitly set the color in each <series> node, or apply palette ("Default" or Custom) to <data> node:

In the sample below we will add five series in <data> and apply default palette to <data>:

Color given regions series

If you want to color all regions in one series on different colors - you can use palette attribute of <series> node:

In the sample below we will put all regions from the sample above in one series and apply default color and hatch palettes to <series>:

Color all undefined regions

Applying palette to all undefined regions is useful when you are not attaching any data to your map, but want it to be colorful. Just set palette attribute to <undefined_map_region> node and all regions on a map will be colored. If there are more regions on a map, than the number of the colors in a palette - palette will be cycled.

In the sample below we will display a map of the world and color all countries using palette.

Also we will attach an actions to all countries - to show message box with country name and open a Wikipedia Page about this country after that.

 

Use palette via Automatic Thresholds

Automatic Thresholds color regions only using some palette - color range or distinct colors, this allows you to switch palette when needed, and, for example use grayscale palette instead of colorful palette.

Read more about automatic thresholds in: Automatic Thresholds

Threshold coloring

Thresholds is a great feature for map coloring, they allow to create the thematic maps (choropleth maps) in which areas are shaded in proportion to the measurement of the statistical variable being displayed on the map, such as population density or per-capita income. It provides an easy way to visualize how a measurement varies across a geographic area.

AnyChart features custom and automatic thresholds, that give you a very flexible options for map coloring. Please refer to the following documents to learn how to color maps using thresholds:

• Thresholds in maps
• Custom Thresholds
• Automatic Thresholds
• Color Swatch Control