Thematic Mapping API

The API is still in beta. Please post any questions, bugs or areas of confusion in the Thematic Mapping API forum.

This documentation is under construction!

Using Google Visualization API

Thematic Mapping API is compatible with Google Visualization API

  1. Overview
  2. Examples
  3. Loading
  4. Data Format
  5. Configuration Options
  6. Methods
  7. Events
  8. Data Policy
  9. Notes

Overview

The Thematic Mapping Engine creates thematic maps which can be visualized in the browser using the Google Earth Plug-in or other KML viewers.

Examples

Loading

Data Format

Two data formats are suppored, depending on geometric features are included in the data table or not.

  1. Code based locations. This formats works only when geometric features (latitude, longitude and/or border) are supplied as a separate object.
    1. [Code, Required]
    2. [Name, Required]
    3. [Value, Required]
  2. Geometric locations.
    1. [Name, Required]
    2. [Latitude, Required]
    3. [Longitude, Required]
    4. [Border, Optional]
    5. [Value, Required]

Your DataTable must include every optional column preceding any column that you want to use. So, for example, if you want to specify a geometric table, and only want to use columns 1, 2, 3, and 5, your DataTable must still define column 4 (though you don't need to add any values to it).

dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'NAME', 'Name');
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'BORDER', 'Border'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'VALUE', 'Value');

dataTable.addRows(1); 
dataTable.setValue(0,0,"Hello World!");
dataTable.setValue(0,1,47.00);
dataTable.setValue(0,2,-122.00);
dataTable.setValue(0,4,455);

Configuration

Configuration options in alphabetical order:

Name Type Default Description
alphaColour number 220 0-255
barSize number 50000
colour string 'RRGGBB' 'FFFF00' The symbol colour for single colour maps.
colourType string 'single' for all map types except choropleths.
  • 'single'
  • 'scale'
chartType string 'pie'
  • 'pie'
  • 'pie3d'
  • 'bar'
  • 'column'
endColour string 'RRGGBB' 'FF6600'
geometry object null JSON format:
{
    "code": {
        "latitude": 47.00,
        "longitude": -122.00,
        "border": "KML Polygon(s)"
    },
    "code": {
        "latitude": 47.00,
        "longitude": -122.00,
        "border": "KML Polygon(s)"
    }
}

The codes are used to link the geometry object to your DataTable. Any code system can be used.

The border is a KML encoded Polygon, or multiple polygons wrapped in a MultiGeometry element.
mapType string 'choropleth' The thematic mapping technique to use:
  • 'choropleth'
  • 'prism'
  • 'bar3d'
  • 'symbolImage'
  • 'symbolPolygon'
  • 'symbolCollada'
  • 'chart'
maxHeight number 2000000
startColour string 'RRGGBB' 'FFFF99'
symbolHref string
symbolMaxSize number 10
symbolShape string 'circle' The shape of the symbols in bar3d or symbolPolygon maps:
  • 'triangle' - (3 sides)
  • 'square' - (4 sides)
  • 'pentagon' - (5 sides)
  • 'hexagonn' - (6 sides)
  • 'heptagon' - (7 sides)
  • 'octagon' - (8 sides)
  • 'nonagon' - (9 sides)
  • 'decagon' - (10 sides)
  • 'circle' - (20 sides)

Methods

Method Return Type Description
draw(data,options) None Draws the map.

Events

Events are supported through your KML viewer of choice. This example shows how you can add an event listener with the Google Earth API:

google.earth.addEventListener(kmlObject, 'click', function(event) {

    // Prevent default balloon from popping up
    event.preventDefault(); 

    var kmlPlacemark = event.getTarget();
    alert (kmlPlacemark.getName());
});
Name Description Properties

Data Policy

All code and data are processed and rendered in the browser. No data is sent to the thematicmapping.org server.

Notes