Animated Maps

Logi Info includes Animated Maps, which are animated, interactive, data-driven, JavaScript-based maps, for your applications. Data range coloring makes it easy to relate data within specified thresholds to map regions.



About Animated Maps

Logi Info's Animated Maps are animated, interactive, data-driven, JavaScript-based maps for Logi applications. Developers can use them to display geographical data distributed by category, regions, or entities. The best usage examples include statistical display of data, flight routes, office locations, election results, survey results, or business intelligence such as "Revenue by Regions" or "Revenue by States". They do not work with zip codes or geocoded data (latitude- & longitude-based). Like all Logi data visualizations, map portions can be interactive links that can be clicked in order to "drill-down" to other reports, charts, and URLs. These maps do not require Adobe's Flash Player browser-extension be installed in order to view them. Maps for 198 countries and regions are included with Logi Info; see the list of available maps below. In almost all of these maps, their subdivisions (regions, provinces, states, etc.) are referenced by a internal numeric ID. In order to relate these ID numbers to "real world" names more likely to be encountered in your data, such as "Montana" or "Belgium", each map has a companion XML data file that can be used to cross-reference a region name to the internal ID. This is discussed in detail later in the Referencing Data section.  Animated Maps can be exported to PDF. Prior to this version, they could not be exported to PDF. Animated Maps cannot be exported to other formats, such as Word and Excel.

 

The Animated Map Element

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.  

Attribute

Description

Height (Required) Specifies the height of the map, in pixels.
Map Type
(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 LabelsIf 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.
 

Referencing Data

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:

    @Function.AppPhysicalPath~\rdTemplate\rdFusionMap\Canada.xml    

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).

 

Adding Color Ranges

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 ValuesMin Value ( = > )Max Value ( < )
1 - 516
6 - 10611
11 - n11 

  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.

 

Using a Color Spectrum Legend

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.  

Available Maps

Approximately 320 maps are distributed with Logi Info (as of v12.2) and they can all be seen in the

    <yourApplication>\rdTemplate\rdFusionMap

folder. The following table provides a partial listing of the maps distributed with Logi Info:
 

Map Type

Description

World The World, with six major regions: North and Central America, South America, Europe, Africa, Asia, and Australia.
World8
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.
WorldwithCountriesThe 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.
SouthAmericaSouth America, including 16 countries.
CentralAmericaCentral 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.
AsiaAsia, including 49 countries.
Asia3Asia, including 29 countries (without the Middle-East countries in the previous map).
AfricaAfrica, including 80 countries.
MiddleEast Middle East, including 20 countries.
OceaniaAustralia, New Zealand, Papua New Guinea, and 12 nearby Pacific islands.
  
USAUnited States, including all individual states.
USARegionUnited 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.
  
(Countries) 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, Taiwan, Thailand, Turkey, UAE, Ukraine, Uruguay, Vatican City, and Venezuela.
(Special Maps) These maps provide regions or provinces: NorwayRegion, SpainProvinces.
 

Sample Application

A sample application can be found in the DevNet Sample Applications page.