Skip to content

Maps

ChartFactor has two types of maps: vector maps that are good for representing fixed regional information such as metrics about countries and provinces, and the maps that are good at representing information with high geospatial precision such as points, polygons, making use of of custom markers, etc. Vector Map: To define a VectorMap that shows the life expectancy of the world population by countries we must write the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    var metrics = [];
    var metric = cf.Metric('Life_expectancy', 'avg');
    var count = cf.Metric('count');

    // define attribute to group by
    var groups = [];
    var group = cf.Attribute('Country')
                    .limit(1000)         // The limit should be higher than the number of regions
                    .sort('desc', metric);

    metrics.push(metric);
    metrics.push(count);
    groups.push(group);

    var color = cf.Color();
    color.metric(metric)

    let myMap = cf.provider('Elasticsearch')
                    .source('life_expectancy_region')
                    .groupby(...groups)   // Is mandatory group by the region
                    .metrics(...metrics)
                    .set('map', 'world')  // Map to use could be a string ej. 'world', 'usa' or a geojson with the shape
                    .set('color', color)
                    .graph('VectorMap')
                    .element('chart')
                    .execute();

The previous code will render a Vector Map like the one below: world vector map There are two maps available out of the box:

  • "world" - the world map
  • "usa" - the map of the United States by state

Custom Areas

ChartFactor Vector Maps support custom areas in GeoJson format. Here is an example of how to inject other maps, in this case Australia and use Custom Data:

1
2
3
4
5
6
7
8
9
    var metric = cf.Metric('Population');
    var australiaShape = // Australia GeoJson object
    var data = // Custom Data

    let myChart = cf.create()
                    .data(data)                       // Set custom data
                    .set('map', australiaShape)       // Set map as GeoJson object
                    .graph('VectorMap')
                    .element('chart');

If you want see the full demo click here.

The previous code will render the following map: australia

Custom Configurations:

  1. enableZoom: Enable or disable the zoom and pan on the map Ex. ".set('enableZoom', false)". (enabled by default)
  2. zoom: Set the initial zoom of the map Ex. ".set('zoom', 0.5)". (1 by default)
  3. center: Set the initial center of the map Ex. ".set('center', [0,0])". (null by default that means the center of the shape)
  4. showNameOnHover: Set if the map will go to show the region name when the mouse go over the region Ex. ".set('showNameOnOver', true)". (false by default)

Listening to custom map events

The ChartFactor Toolkit maps have special events to which you can subscribe to obtain current zoom information or the position where the map is located, here are some examples.

1
2
3
4
5
6
7
    myChart.on('mapzoom', (x)=>{
        console.log("Current map zoom: ", x.data);
    });

    myChart.on('mapmove', (x)=>{
        console.log("Current map center: ", x.data);
    });