Intro to Animated Maps
About Animated Maps
Animated Maps are included in Logi Info applications by adding the Animated Map element to a report definition.
In the example above, an Animated Map element has been added and its attributes set as shown.
The resulting map is shown above. When the cursor passes over a state, its color changes and a "tooltip" appears with the full state name. The attributes for the Animated Map element are explained below. Unless otherwise noted, attribute values are optional.
|Height||(Required) Specifies the height of the map, in pixels.|
(Required) Specifies the type of base map to be rendered; e.g. World, USA, China, USARegion etc. A complete list of base maps is provided at the end of this topic. Specific map type values can be found by examining the .js files in the application folder's rdTemplate\rdFusionMap folder. The India map, for example, is called FusionCharts.HC.india.js and the country or state name portion "india" is the value that's entered in this attribute.
|Regional Name Column||(Required) Specifies the name of a column in the datalayer, with data representing the name for each region to be mapped. If a datalayer is not being used, enter an arbitrary placeholder value.|
|Regional Value Column||(Required) Specifies the name of a column in the datalayer, with data representing the value for each region to be mapped. If a datalayer is not being used, enter an arbitrary placeholder value.|
|Width||(Required) Specifies the width of the map, in pixels.|
|Background Color||Specifies the color of the map background; can be either a color name, a decimal RGB value, or a hex RGB value prefixed with a pound sign (#112233). "Transparent" is a valid value.|
|Border Color||Specifies the color of the map border lines, can be either a color name, a decimal RGB value, or a hex RGB value prefixed with a pound sign (#112233). "Transparent" is a valid value.|
|Color||Specifies the default color of the map; can be either a color name, a decimal RGB value, or a hex RGB value prefixed with a pound sign (#112233). "Transparent" is a valid value.|
|Font||Specifies the family name of font in the map. Can be followed by a space and "bold" or "italic".|
|Font Color||Specifies the color of the font in the map; can be either a color name, a decimal RGB value, or a hex RGB value prefixed with a pound sign (#112233).|
|Font Size||Specifies the size, in points, of the font in the map.|
|Hover Color||Specifies the background color for a map region when the mouse pointer is hovered over it; can be either a color name, a decimal RGB value, or a hex RGB value prefixed with a pound sign (#112233).|
|ID||Specifies the element's unique identifier.|
|Include Value in Labels||If working with a datalayer, set this value to 1 to have data values appear in the labels along with region identifiers.|
|Outer Border Color||
Specifies the Specifies of the outer border of the chart canvas; can be either a color name, a decimal RGB value, or a hex RGB value prefixed with a pound sign (#112233). |
|Show Labels||Set this to False if you do not want the labels to be displayed. Default: True|
|Tooltip Column||An automatically-generated tooltip is displayed when the cursor is hovered over each map region, consisting of the data in the Regional Name Column and Regional Value Column attribute values specified earlier, separated by a comma and space. This attribute, Tooltip Column, specifies the name of a datalayer column containing the text for a custom tooltip, which will be shown instead of the automatic tooltip if a value is entered here. You can specify the name of a column returned from the datasource, or that of a Calculated Column you add to the datalayer to create more customized text.|
It's nice to be able to show maps, but the Animated Map element becomes really useful when it associates data with map regions. To do this, a datalayer element is added to the definition.
In the following example, a map of Canada will be produced, showing its provinces with their abbreviations. When the cursor passes over a province, a "tooltip" will appear showing the full province name and the number of members in a mythical book club chapter from that province.
In the example definition above, a DataLayer.Static element has been added as a child of the Animated Map element, and some Static Data Row elements have been added to provide data values. Naturally, depending on the datasource, other types of datalayers can be used here.
A fragment of this map's companion XML data file, Canada.xml, is shown above. Note its highlighted attributes, "InternalID" and "LongName". In order to relate the Province value in our data to the appropriate region in the map, a datalayer Join can be used between the data and the companion XML file. Here's how:
First, as shown above, the Animated Map element's Region Name Column attribute value is set to the InternalID in the companion XML file. The Regional Value Column attribute is set to the MemberCount value in the static data.
Next, a Join element is added, as shown above. The Join element performs the equivalent of a SQL JOIN on two datalayers. In this case, an Inner Join will used between the static datalayer and...
...a new DataLayer.XML File element which is added. This datalayer retrieves the data from the map's companion XML file and its XML File attribute value is shown but has been truncated to fit on this page. The complete XML File attribute value would be:
The companion XML file names correspond to those of the map type .js files (without the "FusionCharts.HC." prefix and with an .xml file extension). So, for example, the file FusionCharts.HC.canada.js corresponds to the companion XML file Canada.xml.
Finally, a Match Condition element is used to provide the JOIN criteria: the Province column value in the static datalayer must match the LongName column value in the companion XML file. Note that, as in any JOIN, the choice of which column is on the left and which is on the right is significant. Generally, the Left Data Column comes from the datalayer above the join and the Right Data Column from the datalayer below it.
Now when the map is displayed, as shown above, and the cursor is placed over a region, by default the LongName and MemberCount information appear in a tooltip.
"Drill-down" capability can be added by placing an Action element, as shown above, beneath the Animated Map element. Region-specific data can be accessed using @Chart tokens and passed, as Link Parameters, to the next report or process.
Note that the two-letter "ShortName" values in the XML data file were assigned by the map component supplier and may not be ISO standard country codes. If you wish to use ISO codes, you can edit the data file to use them (you may need to restart your server afterwards to clear any caching).
Once data values have been associated with them, individual regions in an Animated Map can be color-coded based on those values.
This is accomplished, as shown above, by adding one or more Map Color Range elements beneath the Animated Map element. Each element represents one color, which is set in its Color attribute. The value of this attribute can be set using @Session, @Request, and @Local tokens, but not @Data or @Chart tokens. A legend is automatically generated for the map and the text in the DisplayValue attribute is used in it. The assignment of a color to a particular map region is controlled by the Max Value and Min Value attributes; the color will be assigned if the data value is within this range. These values correspond to the data value identified in the Animated Map element's Region Value Column attribute.
Note this important distinction: in order to prevent overlapping ranges, the color is assigned if the data is equal to or greater than the Min Value attribute value, and less than the Max Value attribute value, and you need to provide your range values accordingly. For example,
|Data Values||Min Value ( = > )||Max Value ( < )|
|1 - 5||1||6|
|6 - 10||6||11|
|11 - n||11|
will accurately handle a data value of 10.5
And the results can be seen in the example shown above. If no text is entered in the Display Value attributes, the numeric minimum and maximum values will be displayed in the legend instead.
Instead of using Map Color Range elements, you can add a "color spectrum" legend to your animated map; this legend uses colors to illustrate the distribution of the data values used to generate the map and assigns those colors to the appropriate map regions.
The first step, as shown above, is to add a Color Spectrum Column element beneath the datalayer. Configure its attributes to identify the data column used as the Animated Map element's Region Value Column, and the desired colors for the low, medium, and high values.
The next step is to add an Animated Map Color Spectrum Legend element, as shown above, beneath the Animated Map and to set its caption. The legend appears by default below the map, but its Location attribute can be set to make it appear to the right of the map.
And the resulting map and legend are shown above.
Approximately 320 maps are distributed with Logi Info (as of v12.2) and they can all be seen in the
folder. The following table provides a partial listing of the maps distributed with Logi Info:
|World||The World, with six major regions: North and Central America, South America, Europe, Africa, Asia, and Australia.|
The World, with eight major regions: North America, Central America, South America, Europe, Africa, Middle East, Asia, and Oceana.
|World8withAntartica||The World, with nine major regions: North America, Central America, South America, Europe, Africa, Middle East, Asia, Oceana, and Antartica.|
|WorldwithAntartica||The World, with seven major regions: North and Central America, South America, Europe, Africa, Asia, Australia, and Antartica.|
|WorldwithCountries||The World, with 204 countries identified.|
|NorthAmerica||Includes Greenland, Canada, United States, Mexico, Central America, and Caribbean Islands.|
|NorthAmericaWOCentral||Includes Greenland, Canada, United States, and Mexico.|
|SouthAmerica||South America, including 16 countries.|
|CentralAmerica||Central America, including Belize, Costa Rica, El Salvador, Guatemala, Honduras, Nicaragua, and Panama.|
|CentralAmericawithCaribbean||Central America, with Caribbean Islands.|
|Europe||Europe, with 47 countries.|
|EuropewithCountries||Europe, with 49 countries (adds England, Wales, Scotland, and Northern Ireland).|
|EuropeRegion||Europe, with five major regions: Western, Central, Eastern, Northen, Southern.|
|EastEuropeanRegion||Includes Belarus, Bulgaria, Moldova, Romania, Russia, and Ukraine.|
|CentralEuropeanRegion||Includes Austria, Czech Republic, Germany, Hungary, Liechtenstein, Poland, Slovakia, Slovenia, and Switzerland.|
|WestEuropeanRegion||Includes Belgium, France, Luxembourg, Monaco, and Netherlands.|
|NorthEuropeanRegion||Includes Denmark, Estonia, Finland, Iceland, Ireland, Latvia, Lithuania, Norway, Sweden, and the U.K.|
|SouthEuropeanRegion||Includes Albania, Andorra, Bosnia & Herzegovina, Croatia, Cyprus, Greece, Italy, Macedonia, Malta, Montenegro, Portugal, San Marino, Serbia, Spain, Turkey, and Vatican City.|
|Asia||Asia, including 49 countries.|
|Asia3||Asia, including 29 countries (without the Middle-East countries in the previous map).|
|Africa||Africa, including 80 countries.|
|MiddleEast||Middle East, including 20 countries.|
|Oceania||Australia, New Zealand, Papua New Guinea, and 12 nearby Pacific islands.|
|USA||United States, including all individual states.|
|USARegion||United States, with five regions: Northwest, Southwest, Central, Northeast, Southeast.|
|USANorthWestRegion||Northwest states, including Alaska, Idaho, Montana, Oregon, Washington, and Wyoming,|
|USASouthWestRegion||Southwest states, including Arizona, California, Colorado, Hawaii, Nevada, New Mexico, and Utah.|
|USACentralRegion||Central states, including Illinois, Iowa, Kansas, Michigan, Minnesota, Missouri, Nebraska, North Dakota, Oklahoma, South Dakota, Texas, and Wisconsin.|
|USANorthEastRegion||Northeast states, including Connecticut, Delaware, District of Columbia, Indiana, Kentucky, Maine, Maryland, Massachusetts, Michigan, New Hampshire, New Jersey, New York, Ohio, Pennsylvania, Rhode Island, Vermont, Virginia, and West Virginia.|
|USASouthEastRegion||Southeast states, including Alabama, Arkansas, Florida, Georgia, Louisiana, Mississippi, North Carolina, South Carolina, and Tennessee.|
|(Individual States)||Map Type value is the state name, without any spaces; maps show counties.|
|Canada||Canada, including thirteen provinces: Alberta, British Columbia, Manitoba, New Brunswick, Newfoundland & Labrador, Northwest Territories, Nova Scotia, Nunavut, Ontario, Prince Edward Island, Quebec, Saskatchewan, and Yukon Territory.|
|(Provinces)||Map Type value is the province name, without any spaces; maps show counties.|
|UK||United Kingdom, including England, North Ireland, Scotland, and Wales.|
|UK7||United Kingdom, including Channel Islands, England, Isle of Man, North Ireland, Scotland, and Wales.|
|(UK Countries)||Map Type value is one of four country names included in UK map, maps show counties.|
|EnglandRegion||England, with nine regions: East, East Midlands, London, North East, North West, South East, South West, West Midlands, and Yorkshire & the Humber.|
|ScotlandRegion||Scotland, with ten regions: Borders, Central, Dumfries & Galloway, Fife, Grampian, Highland, Lothian, Strathclyde, Tayside, and Western Isles.|
These maps provide counties or other regional divisions. The Map Type values are: Afghanistan, Albania, Andorra, Antigua, Argentina, Armenia, AsiaGeorgia, Australia, Austria, Azerbaijan, Bahamas, Bahrain, Bangladesh, Barbados, Belarus, Belgium, Belize, Bolivia, BosniaHerzegovina, Brazil, BritishColumbia, Bulgaria, Canada, Chile, China, China2 (includes HongKong, Taiwan, etc.), Columbia, CostaRica, Croatia, Cuba, Cyprus, CzechRepublic, Denmark, Dominica, DominicanRepublic, Ecuador, Egypt, ElSalvador,
Estonia, Finland, France, Germany, Greece, Greenland,
Grenada, Guatemala, Haiti, Honduras, Hungary, Iceland, India, Indonesia, Iraq, Ireland, Israel, Italy, Jamaica, Japan, Kenya, Latvia, Liechtenstein, Lithuania, Luxembourg, Macedonia, Malaysia, Malta, Mexico, Moldova, Monaco, Montenegro, Mozambique, Netherland, NewZealand, Nicaragua, NorthIreland, NorthKorea, Norway, Paraguay, Peru, Poland, Portugal, PuertoRico, Romania, Russia, SaintKittsAndNevia, SaintLucia, SaintVincentAndtheGrenadines, SanMarino, SaudiaArabia, Slovakia, Slovenia, SouthAfrica, SouthKorea,
Spain, Suriname, Sweden, Switzerland,
Thailand, Turkey, UAE, Ukraine, Uruguay, Vatican City, and Venezuela. |
|(Special Maps)||These maps provide regions or provinces: NorwayRegion, SpainProvinces.|