Skip to content

Geo Map V2

Please use the Geo Map GL visualization instead as it provides this functionality plus additional features and better performance.

The Geo Map V2 allows you to visualize geospatial data and provides an improved API when compared with the previous version of the Geo Map. You can configure layers to represent shapes, markers, heat maps, and proportional circles and dynamically control visibility, opacity of shape colors, between many other options. This visualization is provided in the geo visualization package.

The remainder of this document will refer to Geo Map V2 simply as Geo Map.

Initialization

The Geo Map needs access to several external libraries that are included automatically when a Geo Map visualization is used. They are loaded from their default location. If the data application does not have extranet access however, you can specify an alternate location to load these resources. The table below shows the Geo Map dependencies.

Variable Default Url
leafletLibUrl https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.1/leaflet.js
leafletCssUrl https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.1/leaflet.css
leafletClusterUrl https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js
leafletClusterCssUrl https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.css
leafletClusterCssDefaultUrl https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.css
heatMapUrl https://cdn.jsdelivr.net/npm/heatmap.js@2.0.5/build/heatmap.min.js

Note

The public repositories for these dendencies are below:

Define the global variables above to update the location of these resources. The following example shows how to inject the location of a Geo Map dependency:

1
2
3
4
    <script>
        window.leafletLibUrl = 'https://unpkg.com/leaflet@1.7.0/dist/leaflet.js';
    </script>
    <script src="../../lib/CFToolkit.min.js"></script>

Leaflet can also be added to the project by setting the references directly to the html files as shown below: leaflet-libraries

In this case, chartfactor will detect internally if the window.L variable exists, otherwise it will proceed to define it with the default urls, so that it can be used properly.

External Leaflet Plugins

Leaflet also has a large amount of plugins that are usually distributed as separated libraries. In case that a plugin is required, then the leaflet library has to be included as dependency in the html page with a script tag and before the plugin instead of using a variable:

1
2
3
4
5
    <script src="https://unpkg.com/leaflet@1.7.0/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.0/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet-plugin@1.4.0/dist/leaflef-plugin.min.js"></script>
    <script src="../../lib/cftoolkit.min.js"></script>

Most of these plugins are passed as a configuration / option for the leaflet map object at creation time. In order to do this through the ChartFactor Geo Map, the leafletMapOptions property must be used:

1
2
3
4
5
chart.set('leafletMapOptions', {
    crs: crs,
    maxZoom: window.crs.options.resolutions.length,
    // other options
})

Map settings

The Geo Map supports the settings described below.

layers

Sets the Geo Map layers. This is an array of objects where each object is the definition of a specific layer. Refer to the Layers section below for details on how to configure its different options.

enableZoom

Enables or disables the zoom and pan on the map. Example: .set('enableZoom', false). Zoom is enabled by default.

enableZoomInfo

Enables or disables the zoom number in the zoom control when the enableZoom is true. Example: .set('enableZoomInfo', true). Zoom is disabled by default. Looks like the image below.

zoom

Sets the initial zoom value of the map. Example: .set('zoom', 0.5). It is 1 by default.

center

Sets the initial center of the map. Example: .set('center', [0,0]). It is null by default which translates to the center of the shape.

showLocation

Toggles the visibility of the "Position" in the tooltip. Markers, shapes and circles layers that contain information about the latitude and longitude, will display these values as a "Position" in the tooltip. But for security reasons, this information may be hidden in some cases. True by default.

layersControl

The layers control allows users to manage their geomap layers while viewing the map, without the need to edit its code. Users can move layers up and down, make them visible or invisible, and view legends when they are enabled for their respective layers.

The layers control is not enabled by default. To enable it, you can use the layersControl setting as shown below.

.set('layersControl', true)

Accepted values for this setting are true and false. When true, the map renders the layers control on the top right corner in an "expanded" fashion.

This setting also accepts a JSON object that allows you to specify the position of the layers control as well as if it should be initially expanded collapsed. The JSON object format is shown below.

1
2
3
4
.set("layersControl", {
    "position": "right", // right by default
    "collapsed": true
})

Supported positions values are:

  • right
  • left
  • top-right
  • top-left
  • bottom-right
  • bottom-left

Supported collapsed values are true and false.

maxZoom and minZoom

Sets the max and min zoom levels. Example: .set('maxZoom', 10). Default maxZoom is 18 and default minZoom is 0.

zoomSnap

Forces the map's zoom level to always be a multiple of this value. Its default value is 1. The zoom level snaps to the nearest integer; lower values (e.g. 0.5 or 0.1) allow for greater granularity. A value of 0 means the zoom level will not be snapped after fitBounds or a pinch-zoom.

zoomDelta

Controls how much the map's zoom level will change after zomming in or zooming out by pressing + or - on the keyboard, or using the zoom controls. Its default value is 1. Values smaller than 1 (e.g. 0.5) allow for greater granularity.

zoomPosition

The zoomPosition property allows you to set the position of the zoom control. Those positions can have these 6 possible configurations:

  • topleft
  • topright
  • bottomleft
  • bottomright
  • verticalcenterleft
  • verticalcenterright

To change the position of the zoom control use the following:

1
.set("zoomPosition", "topright")

An example of how the zoom control positions would look, can be seen in the following image:

zoomPositions

Another way to accomplish the same is to access the Leaflet control object which accepts different configurations as described in their documentation. To modify the position of the Zoom control we could specify their allowed values: topleft, topright, bottomleft or bottomright once the map has been rendered as shown below:

1
2
3
map.on('execute:stop', () => {
    map.get('visual').map.zoomControl.setPosition('topright');
})

Layers

Use the Geo Map layers setting to declare your map layers. This setting consists of an array of objects where each object is the definition of a specific layer.

Declaring layers

Declare layers for your Geo Map using the structure below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
.set('layers', [
  {
    "type": "tile",
    "name": "Tile",
    "priority": 1,
    "properties": {
      /* layer's properties */
    }
  }, {
    "type": "shape",
    "name": "My Shape Layer",
    "priority": 2,
    "properties": {
      /* layer's properties */
    }
  }
])

Types of layers

Layers are divided into two main groups:

  • Non-query layers: They are tile, tile-wms, fixed-marker and shape-only
  • Data layers: They are shape, marker, circle, and heatmap. These layers obtain their data by performing queries to their associated data engine. For each data layer, ChartFactor creates an Aktive instance so that each layer can have its own data provider and data source and execute its own independent queries.

The Aktive instance ID

You may need to obtain the Aktive instance ID to configure drill-ins for a shape layer or to obtain the map layer's Aktive instance to invoke a utility function. The Aktive instance ID is the concatenation of the element ID of the Geo Map visualization and the name of the data layer. For example, if the ID of the Geo Map is specified as .element('my-map-id') and a data layer "name" is set as "My beautiful shape layer" then the Aktive instance ID of that layer is "my-map-id-My beautiful shape layer".

Layer settings

Common settings to all layers

All layers have the common settings below.

type

String representing the type of the layer

name

String with the unique name of the layer object in the array

priority

Integer greater than zero that determines which layer is rendered above the others. A layer with a higher priority is rendered on top of a layer with a lower priority. Note that in the case of tile and tile-wms layers, they will always be below the other layers, so the established priority will only influence between them.

Common settings to data layers

Data layers can specify the following settings:

provider

String with the name of a previously registered provider

providerType

String with the type of the provider such as elasticsearch, google-bigquery, redshift, snowflake, sparksql, dremio, cfnode and pandas-dataframe between others. Please refer to your data provider documentation page for its specific type.

source

String with the name of the data source

Note

The provider, providerType, and source properties are optional. If not specified, the layer will use the parent provider and source.

Let's look at the example below.

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
let provider = cf.provider("BigQuery");
let source = provider.source("bigquery-data:us_realtor.realtor_monthly_inventory_state_all");
source
  .graph("Geo Map V2")
  .set("layers", [
      {
          type: "tile",
          name: "Tile",
          priority: 1,
          properties: {
              /*layer's properties*/
          },
      },
      {
          "type": "shape",
          "name": "Realtor Monthly Inventory State",
          "priority": 1,
          "provider": "Elastic Local",
          "providerType": "elasticsearch",
          "source": "realtor_monthly_inventory_state_all",
          "properties": {
              "shapes": [
                  {
                      "url": "https://chartfactor.com/resources/us-states.json"
                  }
              ],
              "options": {
                  "rows": [
                      cf.Row("state_name", "State Name")
                  ],                    
                  "metrics": [
                      cf.Metric("median_days_on_market_mm", "avg")
                  ],
                  "color": cf.Color()
                      .autoRange({ dynamic: false })
                      .palette(["#fcfbfd", "#efedf5", "#dadaeb", "#bcbddc", "#9e9ac8", "#807dba", "#6a51a3", "#54278f", "#3f007d"].reverse())
                      .metric(cf.Metric("median_days_on_market_mm", "avg"))
              },
          }
      }
  ])
  .set("center", [51.86885231807966, -127.2658535])
  .set("zoom", 2)
  .execute();

The above example declares a Geo Map with the BigQuery provider and the bigquery-data:us_realtor.realtor_monthly_inventory_state_all source. They will be the default data provider and source. The shape layer "Realtor Monthly Inventory State" overrides this information with the Elastic Local provider and the realtor_monthly_inventory_state_all source. These are the provider and source that the "Realtor Monthly Inventory State" layer will use to query its data. If we remove the provider setting from this shape layer, then the layer will try to query the data using the parent provider.

properties

This setting is an object with layer configuration properties. A layer can have many configuration properties and they may vary depending on the layer type.

The following sections cover:

  • Common properties across layers
  • Common properties to data layers
  • Properties specific of each layer type

Common properties across layers

visible

This property allows you to hide or show a layer. When it is a data layer, the Aktive instance attached to the layer is affected by the Interaction Manager when filters are added or removed. However, it executes queries only when the layer is visible.

visibilityZoomRange

The visibilityZoomRange property allows you to define a range of zoom values where the layer is visible. For example, if you want your layer to be rendered when the map zoom is greater than or equal to 4 and less than or equal to 6, you would use the definition below:

1
"visibilityZoomRange": [4, 6]

Note

Like the visible property, if the layer is a data layer, the Aktive instance attached to it will remain active.

Common properties to data layers

filters, clientFilters, textFilter, staticFilters, and legend are properties common to all data layers. See example below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
"filters": [
    cf.Filter('state').label('state').operation('IN').value(['Utah'])
],
"clientFilters": [
    cf.Filter('state').label('state').operation('IN').value(['Utah'])
],
"textFilter": `State:CA`,
"staticFilters": [
    cf.Filter('state').label('state').operation('IN').value(['Utah'])
],
"legend": 'left'

Note that when you are using the IM (Interaction Manager) component in your application, the IM automatically manages filters, clientFilters, and textFilter depending on user interactions. You can however specify staticFilters.

For the legend property, the available positions are:

  • right
  • left
  • top-right
  • top-left
  • bottom-right
  • bottom-left

When multiple layers define a legend, the legend displayed on the Geo Map is the one that belongs to the layer on top. Please refer to the Legend documention for additional information on this visualization element.

The following sections cover properties specific to each layer type.

Properties specific to layer types

Tile

See the base and attribution properties below. The base property specifies the tile layer server to be used in the map.

1
2
3
4
5
6
7
8
9
{
  "type": "tile",
  "name": "Tile 1",
  "priority": 1,
  "properties": {
      "base": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      "attribution": "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>"
  }
}

The previous tile layer example renders with the attribution specified as shown below.

attribution

Tile-Wms

WMS (Web Map Services) can also be used as tile layers. When using a WMS we need to specify the type and the layers properties as shown below.

 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
27
{
  "type": "tile-wms",
  "name": "Tile Wms 1",
  "priority": 2,
  "properties": {
      "base": "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",                
      "headers": [
          {
              "header": "Authorization",
              "value": "Bearer "
          },
          {
              "header": "Content-Type",
              "value": "image/png"
          }
      ],
      "type": "wms",
      "layers": "nexrad-n0r-900913",
      "format": "image/png8",
      "updateWhenZooming": false,
      "transparent": true,
      "tileSize": 512,
      "tiled": true,
      "maxZoom": 21,
      "attribution": "Weather data © 2012 IEM Nexrad"
  }
}

The Headers property can be a function that returns an array of header configurations as shown below: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
const getHeaders = () => {
    // Getting the token from localStorage for example
    const authData = JSON.parse(localStorage.getItem('auth'));
    if (authData && authData.access_token) {
        const bearerToken = 'Bearer ' + authData.access_token;
        const headers = [
            { header: 'Authorization', value: bearerToken },
            { header: 'Content-Type', value: 'image/png' },
        ];

        return headers;
    }

    return [];
};

Now, your WMS requests will contain headers that include the Authorization and Content-Type items configured as specified in the function above. See below a screenshot of the browser's network tab showing the request headers after configuring the WMS tiles as specified above.

wms-tile-layers-headers

Fixed-Marker

We can define markers that are independent from the data. This is usefull when displaying for example fixed locations that are always going to be visible and are not affected by filters. These markers won't trigger any filters when clicked since they are not part of the data queried but more like static data. Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  "type": "fixed-marker",
  "name": "Fixed Marker 1",
  "priority": 3,
  "properties": {
      "pos": [40.16827581021202, -75.54729095036286],
      "label": "<div style=\"color: blue; font-size: 20px\">My custom fixed pin</div>",
      "color": "red"
  }
}

As seen in the example above, the label of the marker could be either a simple text or a string representing html code. The color used for the pin is red. The pos is a latitude and longitud array. This example will display the following:

attribution

Shape and Shape-Only

Both shape and shape-only layer types share the same properties, but the behavior is different, since while a shape layer contains an instance of the Aktive class to execute queries on the data source, the shape-only layer only takes the data from the geojson file defined in the url of each shape configured in the shapes property. See the shape type layer structure below.

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
{
  "type": "shape",
  "name": "State Name",
  "priority": 1,
  "provider": "provider-name",
  "providerType": "elasticsearch",
  "source": "source-name",
  "properties": {
      "shapes": [
          {
            "name": "State Name",
            "url": "https://chartfactor.com/resources/us-states.json",
            "fitBounds": true,
            "featureProperty": "name",
            "shapeOpacity": 0.1
          },
          {
            "name": "County Name",
            "url": "https://chartfactor.com/resources/us-states/MT-30-montana-counties.geo.json",
            "featureProperty": "name",
            "fitBounds": true            
          }
      ],
      "legend": "right",
      "options": {
          "featureProperty": "custom_name",
          "shapeFillColor": "green",
          "shapeOpacity": 1,
          "shapeBorderColor": "blue",
          "shapeFillColorHl": "white",
          "shapeOpacityHl": 0.5,
          "shapeBorderColorHl": "red",
          "shapeBorderWeightHl": 3,
          "clientFilteredOutColor": "red",
          "clientFilteredOutColorOpacity": 0.2,
          "style": {
              "color": "#999", // Equivalent to shapeBorderColor
              "weight": 2, // Border weight
              "opacity": 1, // Border opacity
              "fillOpacity": 0.8, // Equivalent to shapeOpacity
              "fillColor": "#B0DE5C" // Equivalent to shapeFillColor
          },
          "allowClick": true,
          "allowHover": true,
          "allowMultiSelect": true,
          "dataField": {
              "name": "state",              
              "label": "State",
              "type": "ATTRIBUTE"
          },
          "metrics": [
              {}
          ],
          "color": {},
          "rows": [
              {}
          ],
          "fitBounds": true,
          "animationDuration": 1.5,
          "opacityZoomLevels": [
              {
                  "zoom": 1,
                  "fillOpacity": 0.1
              },
              {
                  "zoom": 6,
                  "fillOpacity": 0.8
              },
              {
                  "zoom": 10.1,
                  "fillOpacity": 0.1
              }
          ],
          "min": 0,
          "max": 20
      }      
  }
}

Here is the structure of the shape-only layer:

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
    "type": "shape-only",
    "name": "Borough shape only",
    "priority": 2,
    "properties": {
        "shapes": [
            {
                "url": "https://chartfactor.com/resources/ny.json",
            }
        ],
        "options": {
            "featureProperty": "name",
            "shapeOpacity": 0.6,
            "metrics": [
                {
                    "name": "shape_area",
                    "label": "Shape Area",
                    "type": "NUMBER"
                }
            ],
            "color": cf.Color()
                .autoRange({ dynamic: true })
                .palette(["#08306b", "#08519c", "#2171b5", "#4292c6", "#6baed6", "#9ecae1", "#c6dbef", "#deebf7", "#f7fbff"])
                .metric(cf.Metric("shape_area", "sum")),
            "rows": [
                {
                    "name": "name",
                    "label": "Borough",
                    "type": "ATTRIBUTE"
                },
                {
                    "name": "boro_code",
                    "label": "Borough Code",
                    "type": "ATTRIBUTE"
                }
            ],
            "fitBounds": true
        }
    }
}
Properties
  • shapes is an array of JSON objects. It should be noted that:
    • The url of the GeoJSON file is the only required property
    • When multiple shape objects exist in the shapes array, the last one is the shape that is data driven. Multiple shapes in the same layer are useful when you want to allow users to drill-in into a shape (e.g. from US level to a specific US State to show its counties) and still want to keep the parent shape rendered so that users can select not only counties but also other states.
    • The name property considerations:
      • For the data-driven shape this property should match the label of the first field specified in the rows array. This allows the map to synchronize the different geometric objects in the shape file and the field values in the data.
      • The main label that will be displayed on the shape tooltip is the value specified in this property.
      • When a shape is clicked, the filter name is also the value specified in this property.
    • You can also specify custom options for each shape if required. For example "featureProperty": "boundary_name" or "shapeOpacity": 0.1. When these options exist, they override the same option set at the options level.
    • The Interaction Manager will set these options automatically when you configure drill-in functionality
  • legend this property only applies to the shape type, not for shape-only layer type. For more information visit the Legends documentation.
  • options Shape layers can be customized with options to speicify colors, borders and others. The next section describes these options in detail.
Options

Four main groups of options exist for shape layers. They are:

  • Shape-specific options
  • Interaction options
  • Data options
  • Miscellaneous options
Shape-specific options
  • featureProperty: This option should be set with the name of the GeoJSON's feature property that contains the values (e.g. county name, county code) that match the attribute values obtained from the data source. It defaults to "name".
Shape-specific options when not hovered
  • shapeFillColor: The color of the shape when it doesn't contain data. By default is white.
  • shapeOpacity: Applies some opacity to the shape. 0 is completely transparent and 1 is completely opaque.
  • shapeBorderColor: The color of the borders of the shape. Uses a dark color by default.
Shape-specific options when hovered
  • shapeBorderColorHl: The borders of the shape when it is hovered. By default it has the same value as shapeBorderColor.
  • shapeOpacityHl: Shape opacity when hovered. By default it has the same value as shapeOpacity.
  • shapeFillColorHl: The color of the shape when hovered. By default, the shape keeps its current color.
  • shapeBorderWeightHl: The thickness of the border when hovered.
Shape-specific options when client filter is enabled
  • clientFilteredOutColor: The color of filtered-out shapes, that is, when they do not match the applied client filter. By default the color is #CCC.
  • clientFilteredOutColorOpacity: Applies the specified opacity to the shapes that do not match the applied client filter. 0 is completely transparent and 1 is completely opaque. By default the value is 0.5.

It is also possible to define shape styles using the style property as specified in the Leaflet example for GeoJSON. Let's see the example below.

 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
27
28
29
30
31
32
33
{
    "type": "shape",
    "name": "Realtor Monthly Inventory State",
    "priority": 2,
    "provider": "Aktiun Elastic",
    "providerType": "elasticsearch",
    "source": "realtor_monthly_inventory_state_all",
    "properties": {
        "shapes": [
            {
                "url": "https://chartfactor.com/resources/us-states.json",
                "fitBounds": true,
                "featureProperty": "name",
                "shapeOpacity": 1,
                "name": "State Name"
            }
        ],
        "limit": 100,
        "options": {
            "style": {
                color: "#999",  // Equivalent to shapeBorderColor
                weight: 2,  // Border weight
                opacity: 1, // Border opacity
                fillOpacity: 0.8,   // Equivalent to shapeOpacity
                fillColor: "#B0DE5C" // Equivalent to shapeFillColor
            },
            "fitBounds": true,
            "allowMultiSelect": false,
            "featureProperty": "name",
            "animationDuration": 1.5
        },
    }
}

The previous code block renders the shape in Geo Map with the following look:

eo-map-shape-style

There are two things that you have to keep in mind:

  • The described properties defined within the style object override the equivalent properties defined within the options object
  • Data-driven shape coloring (see Data options below) has prescedence over both style fillColor and options shapeFillColor properties
Interaction options
  • allowClick: True by default. Enables or disables the ability to trigger a filter when clicking a shape.
  • allowHover: True by default. Allows to display tooltips when the mouse goes over the shape.
  • allowMultiSelect: False by default. Enables or disables the ability to select multiples shapes.
Data options

  • rows:

    • For shape layer types, this is an array of Row objects that match the field names specified in the data source metadata.
    1
2
3
    "rows": [
    cf.Row("state_str", "State Name")
]
    • For shape-only layer types, this is an array of JSON objects. The name property of each object must match the name of the property specified in the features > properties object of the GeoJSON file. The specified properties will be rendered in the shape's tooltip.
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    "rows": [
    {
        "name": "name",
        "label": "Borough",
        "type": "ATTRIBUTE"
    },
    {
        "name": "boro_code",
        "label": "Borough Code",
        "type": "ATTRIBUTE"
    }
]

  • metrics:

    • For shape layer types, this is an array of Metric objects. These metrics must match the fields names in the data source metadata.
    1
2
3
    "metrics": [
    cf.Metric("bbl", "sum")
]
    • For shape-only layer types, this is an array of JSON objects. These metrics must match the names in the features > properties object of the GeoJSON file.
    1
2
3
4
5
6
7
    "metrics": [
    {
        "name": "shape_area",
        "label": "Shape Area",
        "type": "NUMBER"
    }
]

  • color: This is a color object (cf.Color). The color metric is the metric defined in the cf.Color() object. If not provided, it defaults to the first metric defined in the metrics array.

    Note

    When configuring drill-ins using the Interaction Manager, make sure your color ranges are dynamically calculated. Refer to Automatic color ranges and its dynamic property.

    In addition to coloring by metric, you can also color your map shapes by attribute value. Refer to the Color by Attribute Values documentation for details.

  • dataField: This applies when the layer is rendered using external data. It is a JSON representation of the field used by the shape in order to trigger valid filters.

    Take a look at the following example:

      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
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
    // Define metrics
let metric1 = new cf.Metric('metric', 'sum')
.label('Metric Custom Label')
.hideFunction();

let metric2 = new cf.Metric('id', 'sum')
.label('Id Sum')
.hideFunction();

cf.provider('Akt Elastic')
.source('company_location')
.limit(1000)
.graph('Geo Map V2')
.set('layers', [
    {
        type: 'tile',
        name: 'Tile',
        priority: 1,
        properties: {
            base: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
        }
    }
])
.set('zoomDelta', 0.2)
.set('zoomSnap', 0.2)
.set('zoom', 3.8000000000000003)
.set('center', [54.4664606400153, -101.35230305777141])
.element('v1')
.execute()
.then(() => {
    // The data array structure should be 
    // like the one described here: https://chartfactor.com/doc/latest/data_format/
    const data = [
        {
            group: ['Alabama'],
            current: {
                count: 11,
                metrics: {
                    metric: {
                        sum: 636
                    },
                    id: {
                        sum: 5413
                    }
                }
            }
        },
        {
            group: ['Alaska'],
            current: {
                count: 7,
                metrics: {
                    metric: {
                        sum: 416
                    },
                    id: {
                        sum: 3128
                    }
                }
            }
        },
        {
            group: ['Arizona'],
            current: {
                count: 17,
                metrics: {
                    metric: {
                        sum: 777
                    },
                    id: {
                        sum: 7787
                    }
                }
            }
        },
        {
            group: ['Arkansas'],
            current: {
                count: 1,
                metrics: {
                    metric: {
                        sum: 17
                    },
                    id: {
                        sum: 250
                    }
                }
            }
        },
        {
            group: ['California'],
            current: {
                count: 137,
                metrics: {
                    metric: {
                        sum: 6995
                    },
                    id: {
                        sum: 69316
                    }
                }
            }
        },
        {
            group: ['Colorado'],
            current: {
                count: 29,
                metrics: {
                    metric: {
                        sum: 1349
                    },
                    id: {
                        sum: 13745
                    }
                }
            }
        },
        {
            group: ['Connecticut'],
            current: {
                count: 10,
                metrics: {
                    metric: {
                        sum: 479
                    },
                    id: {
                        sum: 5626
                    }
                }
            }
        },
        {
            group: ['District of Columbia'],
            current: {
                count: 35,
                metrics: {
                    metric: {
                        sum: 1626
                    },
                    id: {
                        sum: 17381
                    }
                }
            }
        },
        {
            group: ['Florida'],
            current: {
                count: 84,
                metrics: {
                    metric: {
                        sum: 4086
                    },
                    id: {
                        sum: 36709
                    }
                }
            }
        },
        {
            group: ['Georgia'],
            current: {
                count: 35,
                metrics: {
                    metric: {
                        sum: 1836
                    },
                    id: {
                        sum: 17439
                    }
                }
            }
        },
        {
            group: ['Hawaii'],
            current: {
                count: 6,
                metrics: {
                    metric: {
                        sum: 308
                    },
                    id: {
                        sum: 3386
                    }
                }
            }
        },
        {
            group: ['Idaho'],
            current: {
                count: 4,
                metrics: {
                    metric: {
                        sum: 205
                    },
                    id: {
                        sum: 2851
                    }
                }
            }
        },
        {
            group: ['Illinois'],
            current: {
                count: 26,
                metrics: {
                    metric: {
                        sum: 1257
                    },
                    id: {
                        sum: 12124
                    }
                }
            }
        },
        {
            group: ['Indiana'],
            current: {
                count: 15,
                metrics: {
                    metric: {
                        sum: 820
                    },
                    id: {
                        sum: 6859
                    }
                }
            }
        },
        {
            group: ['Iowa'],
            current: {
                count: 14,
                metrics: {
                    metric: {
                        sum: 708
                    },
                    id: {
                        sum: 6008
                    }
                }
            }
        },
        {
            group: ['Kansas'],
            current: {
                count: 15,
                metrics: {
                    metric: {
                        sum: 667
                    },
                    id: {
                        sum: 7500
                    }
                }
            }
        },
        {
            group: ['Kentucky'],
            current: {
                count: 9,
                metrics: {
                    metric: {
                        sum: 435
                    },
                    id: {
                        sum: 3755
                    }
                }
            }
        },
        {
            group: ['Louisiana'],
            current: {
                count: 21,
                metrics: {
                    metric: {
                        sum: 1177
                    },
                    id: {
                        sum: 11001
                    }
                }
            }
        },
        {
            group: ['Maryland'],
            current: {
                count: 9,
                metrics: {
                    metric: {
                        sum: 569
                    },
                    id: {
                        sum: 4243
                    }
                }
            }
        },
        {
            group: ['Massachusetts'],
            current: {
                count: 12,
                metrics: {
                    metric: {
                        sum: 768
                    },
                    id: {
                        sum: 3941
                    }
                }
            }
        },
        {
            group: ['Michigan'],
            current: {
                count: 12,
                metrics: {
                    metric: {
                        sum: 582
                    },
                    id: {
                        sum: 8272
                    }
                }
            }
        },
        {
            group: ['Minnesota'],
            current: {
                count: 26,
                metrics: {
                    metric: {
                        sum: 1507
                    },
                    id: {
                        sum: 12745
                    }
                }
            }
        },
        {
            group: ['Mississippi'],
            current: {
                count: 5,
                metrics: {
                    metric: {
                        sum: 269
                    },
                    id: {
                        sum: 2651
                    }
                }
            }
        },
        {
            group: ['Missouri'],
            current: {
                count: 16,
                metrics: {
                    metric: {
                        sum: 865
                    },
                    id: {
                        sum: 8566
                    }
                }
            }
        },
        {
            group: ['Nebraska'],
            current: {
                count: 11,
                metrics: {
                    metric: {
                        sum: 632
                    },
                    id: {
                        sum: 6678
                    }
                }
            }
        },
        {
            group: ['Nevada'],
            current: {
                count: 12,
                metrics: {
                    metric: {
                        sum: 457
                    },
                    id: {
                        sum: 5678
                    }
                }
            }
        },
        {
            group: ['New Hampshire'],
            current: {
                count: 1,
                metrics: {
                    metric: {
                        sum: 97
                    },
                    id: {
                        sum: 844
                    }
                }
            }
        },
        {
            group: ['New Jersey'],
            current: {
                count: 12,
                metrics: {
                    metric: {
                        sum: 668
                    },
                    id: {
                        sum: 5626
                    }
                }
            }
        },
        {
            group: ['New Mexico'],
            current: {
                count: 10,
                metrics: {
                    metric: {
                        sum: 450
                    },
                    id: {
                        sum: 4872
                    }
                }
            }
        },
        {
            group: ['New York'],
            current: {
                count: 49,
                metrics: {
                    metric: {
                        sum: 2343
                    },
                    id: {
                        sum: 25291
                    }
                }
            }
        },
        {
            group: ['North Carolina'],
            current: {
                count: 16,
                metrics: {
                    metric: {
                        sum: 988
                    },
                    id: {
                        sum: 9054
                    }
                }
            }
        },
        {
            group: ['North Dakota'],
            current: {
                count: 2,
                metrics: {
                    metric: {
                        sum: 136
                    },
                    id: {
                        sum: 918
                    }
                }
            }
        },
        {
            group: ['Ohio'],
            current: {
                count: 38,
                metrics: {
                    metric: {
                        sum: 2036
                    },
                    id: {
                        sum: 20429
                    }
                }
            }
        },
        {
            group: ['Oklahoma'],
            current: {
                count: 22,
                metrics: {
                    metric: {
                        sum: 1408
                    },
                    id: {
                        sum: 11763
                    }
                }
            }
        },
        {
            group: ['Oregon'],
            current: {
                count: 10,
                metrics: {
                    metric: {
                        sum: 540
                    },
                    id: {
                        sum: 6668
                    }
                }
            }
        },
        {
            group: ['Pennsylvania'],
            current: {
                count: 26,
                metrics: {
                    metric: {
                        sum: 1253
                    },
                    id: {
                        sum: 13150
                    }
                }
            }
        },
        {
            group: ['Rhode Island'],
            current: {
                count: 2,
                metrics: {
                    metric: {
                        sum: 14
                    },
                    id: {
                        sum: 1131
                    }
                }
            }
        },
        {
            group: ['South Carolina'],
            current: {
                count: 12,
                metrics: {
                    metric: {
                        sum: 645
                    },
                    id: {
                        sum: 5926
                    }
                }
            }
        },
        {
            group: ['South Dakota'],
            current: {
                count: 2,
                metrics: {
                    metric: {
                        sum: 73
                    },
                    id: {
                        sum: 965
                    }
                }
            }
        },
        {
            group: ['Tennessee'],
            current: {
                count: 18,
                metrics: {
                    metric: {
                        sum: 905
                    },
                    id: {
                        sum: 6209
                    }
                }
            }
        },
        {
            group: ['Texas'],
            current: {
                count: 112,
                metrics: {
                    metric: {
                        sum: 5535
                    },
                    id: {
                        sum: 57873
                    }
                }
            }
        },
        {
            group: ['Utah'],
            current: {
                count: 11,
                metrics: {
                    metric: {
                        sum: 681
                    },
                    id: {
                        sum: 6014
                    }
                }
            }
        },
        {
            group: ['Virginia'],
            current: {
                count: 33,
                metrics: {
                    metric: {
                        sum: 1489
                    },
                    id: {
                        sum: 14552
                    }
                }
            }
        },
        {
            group: ['Washington'],
            current: {
                count: 20,
                metrics: {
                    metric: {
                        sum: 1052
                    },
                    id: {
                        sum: 10573
                    }
                }
            }
        },
        {
            group: ['West Virginia'],
            current: {
                count: 12,
                metrics: {
                    metric: {
                        sum: 656
                    },
                    id: {
                        sum: 8475
                    }
                }
            }
        },
        {
            group: ['Wisconsin'],
            current: {
                count: 13,
                metrics: {
                    metric: {
                        sum: 774
                    },
                    id: {
                        sum: 7115
                    }
                }
            }
        }
    ];

    const shape = {
        type: 'shape',
        name: 'State shape',
        priority: 2,
        properties: {
            limit: 1000,
            shapes: [
                {
                    url: 'https://chartfactor.com/resources/us-states.json'
                }
            ],
            options: {
                featureProperty: 'name',
                metrics: [metric1.toJSON(), metric2.toJSON()], // Metrics should be in a JSON format
                allowClick: false,
                showLocation: false,
                shapeOpacity: 2,
                shapeOpacityHl: 1,
                shapeBorderColor: 'black',
                shapeBorderWeightHl: 4,
                color: cf.Color()
                    .palette(['#006d2c', '#2ca25f', '#66c2a4', '#b2e2e2', '#edf8fb'])
                    .metric(metric1)
                    .autoRange({ dynamic: true }),
                dataField: {
                    name: 'state',
                    label: 'State',
                    type: 'ATTRIBUTE'
                }
            }
        }
    };

    const map = cf.getVisualization('v1');

    map.get('removeLayer')(shape.name).then(() => {
        map.get('addLayer')(shape, data);
    });
});

    The previous code will render a map like the one below:

    geo-map-v2-shape-external-data

Miscellaneous options
  • fitBounds fits a map that contains geographical bounds with the maximum zoom level possible. Valid values are true and false. It is false by default.
  • animationDuration it allows you to set the duration of the animation effect when the map is fitting the bounds depending on the map's zoom and center. For example "animationDuration": 1.5 would change the animation duration to 1.5 seconds. By defult the animation duration time is 0.5 seconds.
  • opacityZoomLevels works similar to the precisionLevels property of markers, only in this case instead of setting the precision, it sets the fill opacity depending on the current zoom level.

The layer definition below shows how to use the opacityZoomLevels property:

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
    "type": "shape",
    "name": "Realtor Monthly Inventory State 2",
    "priority": 2,
    "provider": "Aktiun Elastic",
    "providerType": "elasticsearch",
    "source": "realtor_monthly_inventory_state_all",
    "properties": {
        "shapes": [
            {
                "url": "https://chartfactor.com/resources/us-states.json",
                "fitBounds": true,
                "featureProperty": "name",
                "name": "State Name"
            }
        ],
        "limit": 100,
        "options": {
            "rows": [
                cf.Row("state_name", "State Name")
            ],
            "featureProperty": "name",
            "metrics": [
                cf.Metric("median_days_on_market_mm", "avg")
            ],
            "color": cf.Color()
                .autoRange({ dynamic: false })
                .palette(["#fcfbfd", "#efedf5", "#dadaeb", "#bcbddc", "#9e9ac8", "#807dba", "#6a51a3", "#54278f", "#3f007d"].reverse())
                .metric(cf.Metric("median_days_on_market_mm", "avg")),
            "opacityZoomLevels": [
                {
                    "zoom": 1,
                    "fillOpacity": 0.8
                },
                {
                    "zoom": 4,
                    "fillOpacity": 0.1
                },
                {
                    "zoom": 6,
                    "fillOpacity": 0.8
                }
            ]
        }
    }
}

Note

Valid values for fillOpacity are from any value great than zero (e.g. 0.001) to 1

The above layer code would render a map with a behaviour similar to the animation below.

geo-map-v2-opacity-zoom-levels

  • min and max, when an instance of the Color class is used as the layer color, and this instance does not have a defined range, ChartFactor calculates the color of the layer data based on the color palette as scale, on the min and max value as domain and on the value of the color's metric or the first defined metric if the color's metric is not defined.

    The default value of these properties will be the minimum and maximum value of the metric defined within the layer data.

    Let's take a look at the following example:

    Suppose we have a layer with the following instance of Color defined: 

    1
2
3
4
5
6
7
    cf.Color()
.palette([
    "#fcfbfd", "#efedf5", "#dadaeb",
    "#bcbddc", "#9e9ac8", "#807dba",
    "#6a51a3", "#54278f", "#3f007d"
].reverse())
.metric(cf.Metric("metric", "sum"))

    And the value of the metric inside the layer's data goes from 1 to 30:

     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
27
28
29
    [
    {
        "group": [
            "Group 1"
        ],
        "current": {
            "count": 1,
            "metrics": {
                "metric": {
                    "sum": 1
                }
            }
        }
    },
    ...
    {
        "group": [
            "Group 30"
        ],
        "current": {
            "count": 1,
            "metrics": {
                "metric": {
                    "sum": 30
                }
            }
        }
    }
]

    If we do not set a min and a max value, ChartFactor will calculate them automatically and it will be min = 1 and max = 30 and the colors for each element will be as follows:

    • When the value is:

      • 1 then the color will be #3f007d.
      • 2 then the color will be #450b82.
      • 3 then the color will be #4b1687.

      ...

      • 28 then the color will be #f5f3f9.
      • 29 then the color will be #f8f7fb.
      • 30 then the color will be #fcfbfd.

    Note that the color when it is 1 and 30 matches the first and last color of the palette after doing the reverse.

    Now suppose we manually set a min and max value of 3 and 28 respectively, then:

    When the value is 1, 2 and 3 the color will be #3f007d and fcfbfd when is 28, 29 or 30, that also match the first and last color of the palette. This happens because by limiting the domain, ChartFactory cannot calculate a color outside of that range and therefore sets those colors as the default color.

Adding shape layers

After the map has been executed the first time (built and rendered), we can inject the a shape layer to the map directly.

Let's say that we set the US map shape using either the shape or shape-only layer described above to render an initial map like the following:

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
let provider = cf.provider("Aktiun Elastic");
let source = provider.source("realtor_monthly_inventory_state_all");
source
.graph("Geo Map V2")
.set("layers", [
    {
        type: "tile",
        name: "Tile",
        priority: 1,
        properties: {
            base: "https://tile.thunderforest.com/neighbourhood/{z}/{x}/{y}.png?apikey=f3ade65a58c54ab68f6b43e463d41b8a",
            attribution:
                'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        },
    }, {
        type: "shape",
        name: "Realtor Monthly Inventory State",
        priority: 2,
        properties: {
            shapes: [
                {
                    url: "https://chartfactor.com/resources/us-states.json",
                    fitBounds: true,
                    featureProperty: "name",
                    name: "State Name",
                },
            ],
            limit: 100,
            options: {
                rows: [cf.Row("state_name", "State Name")],
                allowMultiSelect: false,
                shapeOpacity: 1,
                style: {
                    color: "#756bb1",
                    weight: 2,
                    opacity: 1, // Border opacity
                },
                shapeBorderWeightHl: 3,
                shapeBorderColorHl: "green",
                featureProperty: "name",
                metrics: [cf.Metric("median_days_on_market_mm", "avg")],
                color: cf
                    .Color()
                    .autoRange({ dynamic: false })
                    .palette(
                        [
                            "#fcfbfd",
                            "#efedf5",
                            "#dadaeb",
                            "#bcbddc",
                            "#9e9ac8",
                            "#807dba",
                            "#6a51a3",
                            "#54278f",
                            "#3f007d",
                        ].reverse()
                    )
                    .metric(cf.Metric("median_days_on_market_mm", "avg")),
                animationDuration: 1.5,
            },
        },
    }
])
.set("center", [46.73985210238146, -110.04435988330839])
.set("zoom", 7)
.execute();

us-states

After the map is rendered, to add the Texas shape with county geometries, we would do the following:

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
  const map = cf.getVisualization('geo-map-div-chart')

await map.get('addLayer')({
  type: "shape",
  name: "Realtor Monthly Inventory County",
  priority: 3,
  provider: "Aktiun Elastic",
  providerType: "elasticsearch",
  source: "realtor_monthly_inventory_county_all",
  properties: {
    shapes: [
        {
            url: "https://chartfactor.com/resources/county/44_TX_county.json",
        },
    ],
    options: {
        rows: [cf.Row("county_name", "County Name")],
        shapeOpacity: 1,
        style: {
            color: "#00441b",
            weight: 2,
            opacity: 1, // Border opacity
        },
        featureProperty: "boundary_name",
        metrics: [cf.Metric("median_days_on_market_mm", "avg")],
        color: cf
            .Color()
            .autoRange({ dynamic: false })
            .palette(
                [
                    "#f7fcf5",
                    "#e5f5e0",
                    "#c7e9c0",
                    "#a1d99b",
                    "#74c476",
                    "#41ab5d",
                    "#238b45",
                    "#006d2c",
                    "#00441b",
                ].reverse()
            )
            .metric(cf.Metric("median_days_on_market_mm", "avg")),
        animationDuration: 1.5,
    }
  }
})

After executing the code above the state shape for Texas will be rendered over the US shape.

us-states

Note that the addLayer function returns a promise. This is because the geojson file with the shape data needs to be fetched the first time.

Custom data

A shape can also be added using custom data queried using ChartFactor's Aktive query in the following way:

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// Define metrics
let metric = new cf.Metric('metric', 'sum')
    .label('Metric Custom Label')
    .hideFunction();

let metric2 = new cf.Metric('id', 'sum')
    .label('Id Sum')
    .hideFunction();

let palette = ['#006d2c', '#2ca25f', '#66c2a4', '#b2e2e2', '#edf8fb'];
const shapeColor = cf.Color().palette(palette).metric(metric, metric2);

shapeColor.autoRange({ dynamic: true });

let myMap = cf.provider('Akt Elastic').source('company_location')
.limit(1000)
.graph('Geo Map V2')
.set('layers', [
    {
        'type': 'tile',
        'name': 'Tile',
        'priority': 1,
        'properties': {
            'base': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            'attribution': 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
        }
    }
])
.set('center', [54.4664606400153, -101.35230305777141])
.set('zoomDelta', 0.2)
.set('zoomSnap', 0.2)
.set('zoom', 3.8000000000000003)
.element('v1')
.execute()
.then(() => {
    cf.provider('Akt Elastic').source('company_location')
        .limit(1000)
        .rows('state', 'name', 'id')
        .metrics(metric, metric2)
        .on('execute:stop', (event) => {

            const shape = {
                'type': 'shape',
                'name': 'State shape',
                'priority': 2,
                'properties': {
                    'limit': 1000,
                    'shapes': [{
                        url: 'https://chartfactor.com/resources/us-states.json'
                    }],
                    'options': {
                        'featureProperty': 'name',
                        'metrics': [metric.toJSON(), metric2.toJSON()],
                        'allowClick': false,
                        'showLocation': false,
                        'shapeOpacity': 2,
                        'shapeOpacityHl': 1,
                        'shapeBorderColor': 'black',
                        'shapeBorderWeightHl': 4,
                        'color': shapeColor,
                        'rows': cf.getVisualization(event.element).get().rows
                    }
                }
            };

            const map = cf.getVisualization('v1');

            map.get('removeLayer')(shape.name).then(() => {
                map.get('addLayer')(shape, event.data);
            });
        })
        .execute();
});

Note

For custom data, the metrics and rows properties must be in JSON format. That is why for the metrics we use the .toJSON() function at the end and for the rows, we obtain them from Aktive instance with the .get().rows statement, which returns the rows in JSON format.

The above code will render a map that looks like the following:

geo-map-shapes-custom-data

You can also add a shape layer with external data obtained outside ChartFactor's Aktive queries. Please refer to the Shape's data options section, specifically the dataField property, for details and example.

Marker

Markers supports three types of queries:

  • Agregate metrics arround a point (lat, lng) and an attribute. In this case, one marker represents one or many events happening on the marker location and the attribute value. Use the "rows": [] option to specify the latitute, longitude, and additional attribute to group by.

  • Geohash queries: They require location point information using the location property. You can learn more about this type of query here. The markers shown for this query represent the center of an area. The area size is determined by a precision value.

  • Raw queries: They also requires location point information using the location property. In this case, each marker represents a single event. Multiple events on the same location will render multiple markers. Use the "fields": [] property to specify the attributes the marker should include in its tooltip in addition to the location point information.

Note

  • When using data engines that support geo-point data types such as Elasticsearch, location point information refers to the geo-point data type. For SQL engines such as BigQuery, location point information refers to the latitude and longitude columns.
  • The default limit for agregate and raw queries is 1000. Use the "limit": n property to change this default.
 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
{
  "type": "marker",
  "name": "Marker layer 1",
  "priority": 2,
  "provider": "provider-name",
  "providerType": "elasticsearch",
  "source": "source-name",
  "properties": {               
      "limit": 100,
      "color": {},
      "clusterColor": {},
      "markerHtml": "<div></div>",
      "geohashMarkerHtml": "<img></img>",
      "rows": [],
      "fields": [],
      "metrics": [],
      "min": 0,
      "max": 20,
      "ignoreCoords": [],
      "showLocation": true,
      "disableMarkerEvents": false,
      "maxSpiderifyMarkers": 100,
      "geoHashMarkerClickEvent": {},
      "allowClickInRawMarker": true,
      "location": "location",
      "precision": 5,
      "precisionLevels": {
          "raw": {
              "zoom": 18,
              "fields": ["street_name", "person_name"] 
          },
          "levels": [
              {
                  "zoom": 9,
                  "precision": 4
              },
              {
                  "zoom": 12,
                  "precision": 5
              },
              {
                  "zoom": 15,
                  "precision": 6
              },
              {
                  "zoom": 17,
                  "precision": 7
              }
          ]
      },
      "legend": "right"
  }
}

For Geohash and Raw queries, the location property is required. Consider the following scenarios, illustrated using Elasticsearch:

  1. Executing a Raw query directly. In this case, you must specify the location property and the fields property with the fields that you want to show in the tooltip if they are required.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    {
    type: "marker",
    name: "My Marker layer",
    priority: 3,
    provider: "Elasticsearch",
    providerType: "elasticsearch",
    source: "chicago_taxi_trips",
    properties: {
        legend: "right",
        limit: 1000,
        clusterColor: colorDefinition,
        location: "dropoff_location",
        fields: ["company", "extras", "fare"]
    }
}

  2. Executing a Geohash query with a precisionLevels setting. In this case, you need to specify the precisionLevels object. Note that for the "raw" level, you can also specify the fields property with the fields to be rendered in the tooltip.

     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
27
28
29
30
31
    {
    type: "marker",
    name: "My Marker layer",
    priority: 3,
    provider: "Elasticsearch",
    providerType: "elasticsearch",
    source: "chicago_taxi_trips",
    properties: {
        legend: "right",
        limit: 1000,
        clusterColor: colorDefinition,
        location: "dropoff_location",
        precisionLevels: {
            raw: { zoom: 16, fields: ["company", "extras", "fare"] },
            levels: [
                {
                    zoom: 10,
                    precision: 5
                },
                {
                    zoom: 13,
                    precision: 8
                },
                {
                    zoom: 15,
                    precision: 11
                },
            ]
        }
    }
}

  3. Executing a Geohash query with a specific precision. In this case, you need to only specify the location and the precision properties.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    {
    type: "marker",
    name: "My Marker layer",
    priority: 3,
    provider: "Elasticsearch",
    providerType: "elasticsearch",
    source: "chicago_taxi_trips",
    properties: {
        legend: "right",
        limit: 1000,
        clusterColor: colorDefinition,
        location: "dropoff_location",
        precision: 5
    }
}

Note

When using data engines that support geo-point data types such as Elasticsearch, to filter a field of type geo_point you need to provide the values as an array of two elements corresponding to latitude and longitude respectively. Take a look at the example below using the staticFilters property:

1
2
3
4
5
6
staticFilters: [
    cf.Filter("dropoff_location")
        .label("dropoff_location")
        .operation("NOT IN")
        .value([0, 0]),
]

In the example below, we have Geo Map with a marker layer from the Chicago Taxi Trip datasource with an aggregate query with the pickup_latitude and pickup_longitude, also gruped by company and colored by the fare metric.

 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
27
28
29
30
let provider = cf.provider('Elastic Demo');
let source = provider.source('chicago_taxi_trips');

source.graph('Geo Map V2')
.set('layers', [
  {
      'type': 'tile',
      'name': 'Tile',
      'priority': 1,
      'properties': {
          'base': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          'attribution': 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
      }
  }, {
      'type': 'marker',
      'name': 'Marker',
      'priority': 1,
      'properties': {
          'limit': 100,
          'metrics': [cf.Metric('fare', 'sum'), cf.Metric('count')],
          'rows': ['pickup_latitude', 'pickup_longitude', 'company'],
          'min': 0,
          'max': 20
      }
  }
])
.set('zoom', 12)
.set('center', [41.78577706660757, -87.65785217285158])
.element('chart-id')
.execute()

The previous code will render a Geo Map like the one below:

geo map markers

Custom markers

To define a Geo Map with a custom marker you have to define a function that accepts the object representing the data for that marker and produces a valid html code, and then assign the value to the markerHtml property:

 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
let markerHtml = (value) => {
    return `<div style="
        background-color: blue;
        width: 30px;
        height: 30px;
        display: block;
        left: -15px;
        top: -12px;
        position: relative;
        transform: rotate(45deg);
        border: 1px solid #FFFFFF;
  "></div>`;
};

//...
{
  'type': 'marker',
  'name': 'Marker',
  'priority': 2,
  'properties': {
      'limit': 10,
      'markerHtml': markerHtml,
      'metrics': [cf.Metric('fare', 'sum'), cf.Metric('count')],
      'rows': ['pickup_latitude', 'pickup_longitude', 'company']
  }
}

The previous code will render a Geo Map like the one below:

geo map markers

Marker events

Normally, hovering a pin pin will show the latitude and longitude information for the pin in addition to other fields specified either in the fields property or in the precision levels definition. If the marker is clicked, a filter with the latitude and longitude values will be applied. This behavior can be removed by setting disableMarkerEvents to true:

1
"disableMarkerEvents": true
Geohash clusters

Geohash clusters represent the center of areas for an aggregated geohash query result. This type of geo visualization can be extremely powerful when dealing with big data.

A Geo Map using a marker layer with a geohash query can be defined like this:

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
let provider = cf.provider('BigQuery');
let source = provider.source('bigquery-public-data:new_york_311.311_service_requests');

source.graph('Geo Map V2')
    .set('layers', [
        {
            type: "tile",
            name: "Tile",
            priority: 1,
            properties: {
                base: "https://tile.thunderforest.com/neighbourhood/{z}/{x}/{y}.png?apikey=f3ade65a58c54ab68f6b43e463d41b8a",
                attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>",
            },
        },
        {
            type: "marker",
            name: "Marker layer 1",
            priority: 3,
            properties: {
                limit: 1000,
                color: cf.Color().palette([
                    "blue",
                    "#fed976",
                    "#feb24c",
                    "#fd8d3c",
                    "#fc4e2a",
                    "#e31a1c",
                    "#b10026",
                ]),
                clusterColor: cf.Color().palette([
                    "#ffffb2",
                    "#fed976",
                    "#feb24c",
                    "#fd8d3c",
                    "#fc4e2a",
                    "#e31a1c",
                    "#b10026",
                ].reverse()),
                maxSpiderifyMarkers: 100,
                disableMarkerEvents: false,
                allowClickInRawMarker: false,
                location: ["longitude", "latitude"],
                precision: 4,
                staticFilters: [
                    cf.Filter("latitude").label("latitude").operation("NOT IN").value([null])
                ],
            },
        }
    ])
    .set("center", [40.60978237983301, -73.87619018554689])
    .set("zoom", 9)
    .element('chart-id')
    .execute()

The above code is aggregating the location of 311 call in the New York area. It may render something like this:

pin

When hovering one of the clusters we can see a rectangle that defines the area where this cluster is the center. Imagine using a raw query instead of using a geohash query. The amount of raw markers and clusters could potentially tear down the map since we can see there are several millions of calls.

Now let's remove the precision: 4 property and add the precisionLevels option shown below to the above marker layer before executing it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
"precisionLevels": {
  "raw": {
      "zoom": 18,
      "fields": [
          "latitude",
          "longitude",
          "agency",
          "street_name",
          "complaint_type",
          "resolution_description",
      ],
  },
  "levels": [
      { "zoom": 7, "precision": 3 },
      { "zoom": 9, "precision": 4 },
      { "zoom": 11, "precision": 5 },
      { "zoom": 13, "precision": 6 },
      { "zoom": 15, "precision": 7 },
      { "zoom": 17, "precision": 8 },
  ],
},

The above configuration takes care of the magic: It allows to automatically trigger a new geohash query with a new level of precision every time a specific zoom level is reached by using the bounding box filter. This allows to zoom-in step by step until it hits the last zoom level represented by the raw property. This is the level the Geo Map considers safe enough to do a raw query. By default if no fields were configured for the raw level query, all fields are included and shown on the markers tooltips. Use the fields property to query only some of them:

Here is an example of a map changing the query at different precision levels:

Cluster and marker color

You can color clusters depending on their value. You can define your custom color ranges or take advantage of our automatic color ranges by simply providing a color palette. See the Color Range documentation. After defining your color instance, just set the property "color": colorInstance in your marker layer configuration. See the following example:

1
2
3
4
5
6
7
// color configuration
let color = cf.Color();
color.palette(['#ffffb2','#fed976','#feb24c','#fd8d3c','#fc4e2a','#e31a1c','#b10026'].reverse());
color.autoRange({ dynamic: false });
//...
"color": color,
//...

The previous code will render the color of the clusters like the image below.

geo map marker icons html

Cluster and marker colors support the following properties:

  • color: applies the provided color definition to markers and clusters. For markers, it uses the first color in the palette. For clusters, it uses all colors in the palette to color individual clusters depending on their value. The color property is optional. It defaults to a standard map color definition.
  • clusterColor: applies the provided color definition to clusters, overriding the value provided in the color property if any. This property is useful when you need to provide separate color definitions for clusters and markers. For example, you may want to color clusters according to their value and markers with color blue. In this case, you would provide a color definition with a single color palette to the color property (for markers) and a color definition with a multi-color palette to the clusterColor property (for clusters). The clusterColor property is optional. It defaults to the value of the color property if provided, otherwise, to a standard map color definition.
Cluster icons

The geohashMarkerHtml setting allows you to add icons to the standard representation of geohash clusters. This is useful to distinguish what clusters belong to what datasets when rendering multiple datasets on the Geo Map. Take a look at the following example:

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
let geohashIconCustomMarker = (value) => {
    return `<img
            class="icon-image"
            style="width: 34px !important; height: 34px !important;"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAABmJLR0QA/wD/AP+gvaeTAAAE5klEQVRYhe2YW2xURRjH/9+cy+52r0CvFuhVKhYM8UGUQLzEoBLCg8TEaCQxRh+MMSY8+uCLifKivhj1TVATjTGNRg1GiSBRAyEiSImF0rvtblvavffcZj4fKt3tUtpuIUjC/l/OmTPz/87vzHwzc84hZsatJ/F/AyysClY5qmCVowpWOapglaMKVjm6HbCUx1aq9CLLK7X52cNyIunXi8IsL/0o//xEDhzj1DAA6H6xuk3r2K1t2Sdq74achDuBQCenD1PsSc7+RqHtYAdkLhL1unpLxc9aH221Dz7mnfkUuYQWq9GqG7VwhJOX3OMHrPfvcbpeYCvNyc/hDCN/El4C2Z8B5mTX4pFpxe9b8nyX/eUz8CwRXmWs79Bi1QAViDPT7vAFOT0u1rQbO8Ki+RVOf0fBB8Ae9HqAafU+zp+g4LYbiSX7jtgHH4fyjLV3Gus7QLRgM2+s3+nrpqBp7tpCPgaZMJthX6TGAzz1mah9Ff5NUBaEv8S4kkHkmSnni6ehPGNtu9F017WYAOgNLWZrJ+ds9/cegME27B6AOfE26atABicOQE5fbVwJlnv0Tc5PiqqIsa6jCFaxY6lciu0ZqMJ00xtatFiNGkmqRHquKbzLbPepoRcpuhtGw5VJWvQ8S0LI7q/cX95S8TPQ/dqGXcbDb8jTHwPQ17ZDCPYcLz4kpxMqM41CPpAIRbVVNXpdE/kCxroNMjnh9YybdZFCXGeQQg9ysgvyIFW/BF978U2XyC3v13ecw/sBkGGy6wIMzYB0IUTgvp3eSK871g8pr+knodeuM5o3WqePsnL8T90Lbd6IU3QP1e6HCJT6FsHi1PDMu+1E7Ou8X4RiKpe2u39n15mlJNOvculSjxAUNImgMhauBCZfFYjYypl7NotIUXaTBr0eZFD4EYrthV4zV7PYIMqebyEdrbFVBGPeaJ872jfLBIBdZ+58npTijIWQT9tQJyI+zrtqIqMu5yEVAMw4KMZiSUYD1b8Oo7EkzGJYbGcAQLHTf84b61+kZakxa8uehCSIuojWXms8FOWUpSay8BsA4CmVtUEQYT/nT/HAsxR5gmJ7i9NrYSxODan4Wc6OAfASg+BlbWRXRYGKp1U8LRqixrYWvSYEQF4Yd08NQTEAMjVt0x5j5wcUrCuxluaWSpxzv39N9h1ZCUdJ6IChtVaL1moRNNVoSsbT+sZ6CLK/OQtZuCnFmv3P/0Sr266JpQaPW4d2wcmKyBqjsVUEo+w5Kj3ljvSyYy0XR5BojOlt1Qj5eCwtR5Mqkfmve6pM49EO2Tshz8fnOeo2+1/+A6IwdAUstpLWex2cG9fvaDGbN83ubzI1KRPDMj3FdumKtwBPNCBa11CVqS7n1EiSs/bVbchvGDva3GMX2Zm3rJh7D+lbnpsrFgC9kx9yblyEomZLJwAwO71nvPHhJWnI1KgmTAGDbdf7axTeYonIluse76WGKA9OFV+Xf3+9MJbq/QGAXt80+yLg9HcvzaRpFKiCrql/kkvSF5F5PFK6D/L0QHGxgMWZMQAiEAag8hlvbABLSkrOZpYPVGQsXcPJHy0uFrZqijQCmE1tOTkK3NT/XmLt1uJiIeXVyAlODpE7DS/NZjW04E3FatpO4YYFsG4p3Q4fZDdOFaxyVMEqRxWsclTBKkcVrHJUwSpHtyjWv3ZmSTCYpkOiAAAAAElFTkSuQmCC"
            />`;
};
cf.provider("Elastic Demo")
.source("chicago_taxi_trips")
.graph("Geo Map V2")
.set("layers", [
    {
        type: "tile",
        name: "Tile",
        priority: 1,
        properties: {
            base: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>",
        },
    },
    {
        type: "marker",
        name: "Marker",
        priority: 2,
        properties: {
            limit: 100,
            geohashMarkerHtml: geohashIconCustomMarker,
            color: cf
                .Color()
                .metric(cf.Metric("fare", "sum"))
                .palette([
                    "#ccece6",
                    "#99d8c9",
                    "#66c2a4",
                    "#41ae76",
                    "#238b45",
                    "#006d2c",
                    "#00441b",
                ]),
            location: "dropoff_location",
            precision: 5,
            metrics: [cf.Metric("fare", "sum"), cf.Metric("count")]
        },
    }
])
.set("zoom", 11)
.set("center", [41.83810680660847, -87.7028274536133])
.element('v1')
.execute();

The important parts to render this visualization are:

  • Define a function that contains the marker icon to render. In the example above, we define the function geohashIconCustomMarker. Note that the defined function must have a parameter to set the value inside the circle.
  • Provide the "location" field name by using the location property. In the example above, the location field name is dropoff_location.
  • Provide the default precision level by using the precision property. In the example above, it's configured with the value of 5.
  • Set the property geohashMarkerHtml. In the example above, it is set with the geohashIconCustomMarker function noted in the first point.

The previous code renders a Geo Map like the one below.

geo map marker icons html

Miscellaneous properties
ignoreCoords

Ignores markers when they match a specified location. Example: .set('ignoreCoords', [0, 0]). None by default. This is useful when the dataset includes invalid points as 0,0 for example.

markerHtml

This configuration allows you to provide a function that receives an object and returns a string that represent a valid html code representing the marker.

maxSpiderifyMarkers

Allows to define the maximum number of markers that can be spiderified when clicking a cluster. It's default value is 500. This is useful when a large number of markers have the same lat/long:

1
"maxSpiderifyMarkers": 100

The above configuration will render clusters of up to 100 underlying markers using the spider effect. Beyond that, it will display a table with the list:

geoHashMarkerClickEvent

Allows to provide a function that will be executed when a geohash cluster is clicked. This function will receive an object parameter with the structure shown below:

1
2
3
4
5
6
7
8
9
  {
      "name": "geohash-marker-click",
      "data": {
          "currentZoom": 3,
          "lat": 40.386201799139656,
          "lon": -107.49540489453966,
          "point": [53.06780372335744, -108.90099832062985]
      }
  }
allowClickInRawMarker

If the marker is clicked, a filter with the latitude and longitude values will be applied. This behavior can be removed by setting allowClickInRawMarker to false.

min and max

These properties work in the same way as the min and max options described in the miscellaneous options of the shape.

Custom data

The Geo Map V2 visualization also allows to render external data in the map by using the exposed utility addLayer.

Let's take a look at some examples:

Rendering raw markers from static data

  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
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
cf.provider('Akt Elastic').source('company_location')
    .graph('Geo Map V2')
    .set('layers', [
        {
            'type': 'tile',
            'name': 'Tile',
            'priority': 1,
            'properties': {
                'base': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                'attribution': 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
            }
        }
    ])
    .set('zoom', 4)
    .set('center', [27.72243591897343, -86.53231371294318])
    .element('v1')
    .execute()
    .then(() => {
        const data = [
            {
                'rn': 1,
                'name': 'Donnelly-Sporer',
                'latitude': '33.6773',
                'longitude': '-118.0051'
            },
            {
                'rn': 2,
                'name': 'Daugherty LLC',
                'latitude': '30.6143',
                'longitude': '-87.2758'
            },
            {
                'rn': 3,
                'name': 'Reinger-Lebsack',
                'latitude': '26.6654',
                'longitude': '-80.0929'
            },
            {
                'rn': 4,
                'name': 'Wehner LLC',
                'latitude': '38.9164',
                'longitude': '-76.9948'
            },
            {
                'rn': 5,
                'name': 'Kunde Group',
                'latitude': '30.4061',
                'longitude': '-87.2917'
            },
            {
                'rn': 6,
                'name': 'Jast and Sons',
                'latitude': '32.491',
                'longitude': '-84.8741'
            },
            {
                'rn': 7,
                'name': 'Corkery and Sons',
                'latitude': '41.5444',
                'longitude': '-93.6192'
            },
            {
                'rn': 8,
                'name': 'Wisoky LLC',
                'latitude': '32.8538',
                'longitude': '-117.1197'
            },
            {
                'rn': 9,
                'name': 'Heathcote, Krajcik and Lemke',
                'latitude': '36.5799',
                'longitude': '-82.5733'
            },
            {
                'rn': 10,
                'name': 'Koepp, Heathcote and Will',
                'latitude': '47.9335',
                'longitude': '-97.3944'
            }
        ];

        const marker = {
            'type': 'marker',
            'name': 'Marker',
            'priority': 2,
            'properties': {
                'fields': [
                    cf.Field('latitude', 'pickup_latitude').toJSON(),
                    cf.Field('longitude', 'pickup_longitude').toJSON(),
                    cf.Field('name', 'company').toJSON()
                ],
                'min': 0,
                'max': 20,
                'clusterColor': cf.Color().palette(['#006d2c', '#2ca25f', '#66c2a4', '#b2e2e2', '#edf8fb']).autoRange({ dynamic: false })
            }
        };

        const map = cf.getVisualization('v1');

        map.get('removeLayer')('Marker').then(() => {
            map.get('addLayer')(marker, data);
        });
    });

Rendering raw markers from a raw query

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
let metrics = [
    cf.Metric('metric', 'sum'),
    cf.Metric('count')
];

cf.provider('Akt Elastic').source('company_location')
.limit(1000)
.graph('Geo Map V2')
.set('layers', [
    {
        'type': 'tile',
        'name': 'Tile',
        'priority': 1,
        'properties': {
            'base': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            'attribution': 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
        }
    }
])
.set('zoom', 4)
.set('center', [27.72243591897343, -86.53231371294318])
.element('v1')
.execute()
.then(() => {
    cf.provider('Akt Elastic').source('company_location')
    .limit(1000)
    .fields(
        cf.Field('latitude', 'pickup_latitude'),
        cf.Field('longitude', 'pickup_longitude'),
        cf.Field('name', 'company')
    )
    .metrics(metrics)
    .on('execute:stop', (event) => {

        const marker = {
            'type': 'marker',
            'name': 'Marker',
            'priority': 2,
            'properties': {
                'metrics': [
                  cf.Metric('metric', 'sum'),
                  cf.Metric('count')
                ],
                'fields': [
                    cf.Field('latitude', 'pickup_latitude').toJSON(),
                    cf.Field('longitude', 'pickup_longitude').toJSON(),
                    cf.Field('name', 'company').toJSON()
                ],
                'min': 0,
                'max': 20,
                'clusterColor': cf.Color().palette(['#006d2c', '#2ca25f', '#66c2a4', '#b2e2e2', '#edf8fb']).autoRange({ dynamic: false })
            }
        };

        const map = cf.getVisualization('v1');

        map.get('removeLayer')('Marker').then(() => {
            map.get('addLayer')(marker, event.data);
        });
    })
    .execute();
});

Rendering markers from a geohash query

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
cf.provider('Akt Elastic').source('company_location')
.graph('Geo Map V2')
.set('layers', [
    {
        'type': 'tile',
        'name': 'Tile',
        'priority': 1,
        'properties': {
            'base': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            'attribution': 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
        }
    }
])
.set('zoom', 5)
.set('center', [38.172460912463094, -94.17662662274876])
.set('enableZoomInfo', true)
.element('v1')
.execute()
.then(() => {
    cf.provider('Akt Elastic').source('company_location')
    .location('location')
    .precision(7)
    .on('execute:stop', (event) => {
        const marker = {
            'type': 'marker',
            'name': 'Marker',
            'priority': 2,
            'properties': {
                'min': 0,
                'max': 20,
                'clusterColor': cf.Color().palette(['#006d2c', '#2ca25f', '#66c2a4', '#b2e2e2', '#edf8fb']).autoRange({ dynamic: false })
            }
        };

        const map = cf.getVisualization('v1');

        map.get('removeLayer')('Marker').then(() => {
            map.get('addLayer')(marker, event.data);
        });
    })
    .execute();
});

Note

  • For custom data, the metrics, fields and rows properties must be in JSON format. That is why for the metrics and fields we use the .toJSON() function at the end.
  • For raw and static data, each data element must contain the latitude and longitude properties to render the markers.
  • The precisionLevels property does not apply when using custom data.

The above code will render a map that looks like the following:

geo-map-markers-custom-data

Heatmap

This mode allows to render data with latitude and longitude information (geohash and raw) as a heat map instead of markers.

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{
  "type": "heatmap",
  "name": "HeapMap layer 1",
  "priority": 2,
  "provider": "provider-name",
  "source": "source-name",
  "properties": {
      "options": {
          "minOpacity": 0,
          "maxOpacity": 0.8,
          "gradient": {
              ".3": "#4484CD",
              ".65": "#D0E0F2",
              ".95": "white"
          },
          "switchToMarkersAtRaw": true
      },
      "limit": 100,
      "location": "location",
      "precision": 5,
      "precisionLevels": {
          "raw": {
              "zoom": 18,
              "fields": ["latitude", "longitude", "street_name", "person_name"] 
          },
          "levels": [
              {
                  "zoom": 9,
                  "precision": 4
              },
              {
                  "zoom": 12,
                  "precision": 5
              },
              {
                  "zoom": 15,
                  "precision": 6
              },
              {
                  "zoom": 17,
                  "precision": 7
              }
          ]
      },
      "legend": "right"
  }
}

Let's see the following example:

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
cf.provider("Elastic Demo")
.source("chicago_taxi_trips")
.graph("Geo Map V2")
.set("layers", [
    {
        type: "tile",
        name: "Tile",
        priority: 1,
        properties: {
            base: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>",
        },
    },
    {
        "type": "heatmap",
        "name": "HeapMap layer 1",
        "priority": 1,
        "properties": {
            "options": {

            },
            "limit": 100,
            "location": "dropoff_location",
            "precision": 11,
            "precisionLevels": {
                raw: {
                    zoom: 16,
                    fields: ["dropoff_latitude", "dropoff_longitude"]
                },
                levels: [
                    {
                        zoom: 10,
                        precision: 5
                    },
                    {
                        zoom: 13,
                        precision: 8
                    },
                    {
                        zoom: 15,
                        precision: 11
                    }
                ]
            }
        }
    }
])
.set("zoom", 11)
.set("center", [41.83810680660847, -87.7028274536133])
.execute();

The code above will render a Map with a Heatmap layer like this:

geo-heatmap-default

Since this mode uses the leaflet's heatmap.js plugin, we can specify custom configuration described in the plugin's documentation by passing an object instead of a boolean: 

1
2
3
4
5
6
7
8
9
"options": {    
    "maxOpacity": 0.8,
    "baseRadius": 45,
    "gradient": {
        ".5": "blue",
        ".8": "red",
        ".95": "white",
    }
}

The above will change the color of the heatmap:

geo-heatmap-custom

All the properties accepted in the configuration are described in their documentation. The only property that is specific from ChartFactor is baseRadius, which acts like the property radius but is used along with the zoom level value to calculate the new size of the heatmap when the user performs a zoom in or out. The value of baseRadius is 40 by default.

Heat Map and precision levels

The Heat Map works together with the precisionLevels configuration (when defined), just like the code above. This allows you to have a Heat Map of higher and higher precision as users zoom into the map. See the Geohash clusters section for more details on precisionLevels.

Additionally, the Heat Map options supports the switchToMarkersAtRaw setting. This property is false by default. When true, the Heat Map automatically switches to a Markers layer when executing raw queries. This would occur when users zoom-in enough to reach the raw query point according to the precisionLevels configuration.

1
2
3
4
5
6
7
8
9
"options": {
    "maxOpacity": 0.8,
    "gradient": {
      ".3": "#4484CD",
      ".65": "#D0E0F2",
      ".95": "white"
    },
    "switchToMarkersAtRaw": true
}

The code above would render a map that will change to markers layers when the zoom level is high enough to execute a raw query. See the following animation:

Custom data

Heat Map can also be added using custom data in the following way:

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
let myMap = cf
.provider('Akt Elastic')
.source('chicago_taxi_trips')
.graph('Geo Map V2')
.set('layers', [
    {
        'type': 'tile',
        'name': 'Tile',
        'priority': 1,
        'properties': {
            'base': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            'attribution': 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
        }
    }
])
.set('zoom', 9)
.set('center', [41.83810680660847, -87.7028274536133])
.element('v1')
.execute()
.then(() => {
    cf.provider('Akt Elastic')
        .source('chicago_taxi_trips')
        .limit(100)
        .location('dropoff_location')
        .precision(11)
        .on('execute:stop', event => {

            const heatMap = {
                'type': 'heatmap',
                'name': 'HeapMap layer 1',
                'priority': 1,
                'properties': {
                    'options': {
                        maxOpacity: 0.8,
                        gradient: {
                            '.3': '#4484CD',
                            '.65': '#D0E0F2',
                            '.95': 'white'
                        }
                    }
                }
            };

            const map = cf.getVisualization('v1');

            map.get('removeLayer')('HeapMap layer 1').then(() => {
                map.get('addLayer')(heatMap, event.data);
            });
        })
        .execute();
});

Note

  • The precisionLevels and switchToMarkersAtRaw properties do not apply when using custom data

The above code will render a map that looks like the following:

geo-map-heatmap-custom-data

Circle

With this layer, data can be represented through proportional circles based on the value of a metric.

 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
27
28
29
30
31
32
33
34
35
36
{
  "type": "circle",
  "name": "Circle 1",
  "priority": 2,
  "provider": "provider-name",
  "source": "source-name",
  "properties": {
      "limit": 100,
      "rows": [],
      "options": {
          "name": "City",
          "color": "red",
          "metrics": [],
          "allowClick": true,
          "showLocation": true,
          "min": 0,
          "max": 10,
          "fillOpacity": 0.5,
          "opacityZoomLevels": [
              {
                  "zoom": 1,
                  "fillOpacity": 0.1
              },
              {
                  "zoom": 6,
                  "fillOpacity": 0.8
              },
              {
                  "zoom": 10.1,
                  "fillOpacity": 0.1
              }
          ]
      },
      "legend": "right"
  }
}

The following example renders a Geo Map with proportional circles.

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
let provider = cf.provider("Elastic Demo");
let source = provider.source("chicago_taxi_trips");
source
.graph("Geo Map V2")
.set("layers", [
    {
        type: "tile",
        name: "Tile",
        priority: 1,
        properties: {
            base: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>",
        },
    },
    {
        type: "circle",
        name: "Circle 1",
        priority: 1,
        properties: {
            limit: 1000,
            rows: [
                cf.Row("pickup_latitude", "pickup_latitude"),
                cf.Row("pickup_longitude", "pickup_longitude"),
                cf.Row("company", "company"),
                cf.Row("dropoff_community_area_desc", "Area"),
                cf.Row("payment_type"),
                cf.Row("trip_minutes"),
            ],
            options: {
                name: "Company",
                color: cf
                    .Color()
                    .palette([
                        "#ffffb2",
                        "#fed976",
                        "#feb24c",
                        "#fd8d3c",
                        "#fc4e2a",
                        "#e31a1c",
                        "#b10026",
                    ].reverse())
                    .autoRange({ dynamic: true })
                    .match({
                        "Taxi Affiliation Services": "black",
                        null: "green",
                    }),
                metrics: [cf.Metric("trip_total", "sum"), cf.Metric("count")]                
            },
        },
    },
])
.set("center", [41.81469805126507, -87.64480590820312])
.set("zoom", 12)
.execute();

The requirements to render this visualization are:

  • Define at least one metric. In the example above, we define two metrics.
  • Provide the at least three attributes to group by using the rows property. The first two rows should be the latitude and longitude respectively.

The previous code renders a Geo Map like the one below.

geo map proportional circles

Options
  • name An string that represents the label of the main field defined after the latitude and longitude fields that will be use to show in the circles tooltips.
  • showLocation Toggles the visibility of the "Position" in the tooltip. Go to the Custom Configuration for Maps section to see how it works.
  • allowClick True by default. Enables or disables the ability to trigger a filter when clicking a circle.
  • color An string or a cf.Color() object that specify the circles color.
  • metrics An array of metric objects. The first metric will be used to calculate the circles radius. All metrics will be rendered in the circles tooltip.
  • rows An array of row objects. It works just like the rows property specified in Shapes Data Options section.
  • fillOpacity Applies opacity to the area of the circle but not the perimeter. 0 is completely transparent and 1 is completely opaque. Valid values for fillOpacity are from any value great than zero (e.g. 0.001) to 1
  • opacityZoomLevels see the miscellaneous options of the shape. When specified, this option takes precedence over fillOpacity.
  • min and max these properties work in the same way as the min and max options described in the miscellaneous options of the shape.
Custom data

Circles can also be added using custom data in the following way:

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
let myMap = cf
.provider('Akt Elastic')
.source('chicago_taxi_trips')
.graph('Geo Map V2')
.set('layers', [
    {
        'type': 'tile',
        'name': 'Tile',
        'priority': 1,
        'properties': {
            'base': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            'attribution': 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
        }
    }
])
.set('center', [41.83158391539821, -87.64909744262697])
.set('zoomDelta', 0.2)
.set('zoomSnap', 0.2)
.set('zoom', 12)
.element('v1')
.execute()
.then(() => {
    let filter = cf
    .Filter('company')
    .label('company')
    .operation('IN')
    .value(['Taxi Affiliation Services']);

    cf.provider('Akt Elastic')
    .source('chicago_taxi_trips')
    .limit(500)
    .rows(
        cf.Row('pickup_latitude', 'pickup_latitude'),
        cf.Row('pickup_longitude', 'pickup_longitude'),
        cf.Row('company', 'company'),
        cf.Row('dropoff_community_area_desc', 'Area'),
        cf.Row('payment_type'),
        cf.Row('trip_minutes')
    )
    .filters([filter])
    .metrics(cf.Metric().label('Count'))
    .on('execute:stop', event => {

        const circle = {
            'type': 'circle',
            'name': 'Circle 1',
            'priority': 1,
            'properties': {
                'filters': [cf.Filter('company').label('company').operation('IN').value(['Taxi Affiliation Services'])],
                'limit': 500,
                'rows': cf.getVisualization(event.element).get().rows,
                'options': {
                    'name': 'Company',
                    'color': 'red',
                    'metrics': [cf.Metric().label('Count').toJSON()]
                }
            }
        };

        const map = cf.getVisualization('v1');

        map.get('removeLayer')('Circle 1').then(() => {
            map.get('addLayer')(circle, event.data);
        });
    })
    .execute();
});

Note

For custom data, the metrics and rows properties must be in JSON format. That is why for the metrics we use the .toJSON() function at the end and for the rows, we obtain them from Aktive instance with the .get().rows statement, which returns the rows in JSON format.

The above code will render a map that looks like the following:

geo-map-circles-custom-data

Listening To Custom Map Events

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', (e)=>{
        console.log("Current map zoom: ", e.data);
    });

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

As specified in the events documentation, you can also subscribe to click events in the Geo Map. The click event is dispatched as soon as users click on a specific layer, be it a marker, a proportional circle, a shape or any other type of layer. See the following example.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
  const handleMapClick = (e) => { 
      // Get the current map visualization
      const map = cf.getVisualization(e.chart);
      // Get the leaflet marker icon container div
      const markerIcon = e.nativeData.target._icon;
      // Get the field metadata definitions
      const dataField = e.data.dataField;
      // Get the group name and coordinates of the marker layer
      const group = e.data.group;

      const lat = group[0];
      const lng = group[1];
      const groupName = group[2];

      // Some other logic...
  }

  const map = cf.getVisualization(mapId);
  map.on('click', (e) => handleMapClick(e));

The callback function receives the e object as a parameter with the following properties:

  • name: the current event name
  • chart: the current visualization id
  • data: the current zoom value when the event is mapzoom, the current map center when is mapmove and an object with the layer internal information when it is a click event
  • nativeData: the whole leaflet native information corresponding to the specific type of layer

Layers events

The events associated with the layers are the following:

geo:layer-added

This event is fired when a new layer is added to the map. The callback function receives the e object as a parameter with the following properties:

  • name: the current event name
  • element: the current visualization id
  • layer: the new added layer object
  • leafletLayer: the whole leaflet native information corresponding to the specific type of layer

geo:layer-removed

This event is fired when a layer is removed from the map. The callback function receives the e object as a parameter with the following properties:

  • name: the current event name
  • element: the current visualization id
  • layer: the removed layer object

geo:layer-changed

This event is fired when the Layers Control changes the visible property of a layer. The callback function receives the e object as a parameter with the following properties:

  • name: the current event name
  • element: the current visualization id
  • layer: the changed layer object

geo:layers-priority-changed

This event is fired when the Layers Control has finished changing the priority property of all layers.

  • name: the current event name
  • element: the current visualization id
  • layers: all defined layers with the priority property updated

geo:layers-execution-start

This event is fired when any of the Aktive instances associated with a data layer starts an execution. The callback function receives the e object as a parameter with the following properties:

  • name: the current event name
  • element: the current visualization id

geo:layers-execution-stop

This event is fired when all Aktive instances associated with a data layer stops the execution. The callback function receives the e object as a parameter with the following properties:

  • name: the current event name
  • element: the current visualization id

geo:layers-control-changed

This event is fired when the Layers Control expand/collapse button is pressed. The callback function receives the e object as a parameter with the following properties:

  • name: the current event name
  • element: the current visualization id
  • layersControl the layers control configuration object

Available utilities

The are several functions that can be used to implement most custom scenarios:

async addLayer(layerObj, data=undefined)

Adds an specific layer to the current map.

The layer object can be any of the available layer types.

async updateLayer(layerObj)

Updates an existing layer. This function is intended to update layer properties and options without having to re-query data.

Similar to the addLayer() function, the layer object parameter can be any of the available layer types. Just take the layer you want to edit from the defined layers, then modify the necessary properties and call the updateLayer() function providing the updated object.

Usages:

  • Tile 
1
2
3
4
5
6
7
const map = win.cf.getVisualization('visualization-id');

// Tile
const tileLayer = map.get('getDefinedLayer')('My Tile layer');

tileLayer.properties.base = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
await map.get('updateLayer')(tileLayer);
  • Shape
1
2
3
4
5
// Shape
const shapeLayer = map.get('getDefinedLayer')('My Shape layer');

shapeLayer.properties.shapes[0].url = 'https://chartfactor.com/resources/us-states/MT-30-montana-counties.geo.json';
await map.get('updateLayer')(shapeLayer);
  • Marker
1
2
3
4
5
6
7
8
9
// Markers
const markerLayer = markersMap.get('getDefinedLayer')('My Marker layer');

markerLayer.properties.geohashMarkerHtml = (value) => {
    return `<img class="icon-image"
                style="width: 34px !important; height: 34px !important;"
                src="https://picsum.photos/200/300/>`;
};
await map.get('updateLayer')(markerLayer);
  • Circle
1
2
3
4
5
// Circles
const circleLayer = circlesMap.get('getDefinedLayer')('My Circle layer');

circleLayer.properties.options.name = 'My custom label';
await map.get('updateLayer')(circleLayer);
  • Heat Map
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// Heat Map
const heatmapLayer = heatmapMap.get('getDefinedLayer')('My HeatMap layer');
const gradient = {
    '.3': '#4484CD',
    '.65': '#D0E0F2',
    '.95': 'white'
};

heatmapLayer.properties.options.gradient = gradient;
await map.get('updateLayer')(heatmapLayer);
  • Fixed Marker
1
2
3
4
5
6
7
// Fixed Marker
const fixedMarkerLayer = fixedMarkerMap.get('getDefinedLayer')('My Fixed Marker layer');

fixedMarkerLayer.properties.pos = [41.40153558289848, -89.69403786674964];
fixedMarkerLayer.properties.label = '<div style="color: blue; font-size: 20px">My custom fixed pin tooltip message</div>';
fixedMarkerLayer.properties.color = 'blue';
await map.get('updateLayer')(fixedMarkerLayer);

Note

To change the query configuration of the layer, you need to remove and re-add the layer.

async removeLayer(layerName)

Removes the layer specified by the layerName parameter from the Geo Map.

getDefinedLayer(layerName)

Returns the json representation of the layer that matches the layerName parameter.

getAllDefinedLayers()

Returns all defined layers.

isLayerDefined(layerName)

Checks if the given layer exists in the current layers configuration by comparing the layerName parameter.

getAllMarkerLayers()

Returns the leaflet object of all rendered marker layers.

getAllTileLayers()

Returns the leaflet array of all rendered tile layers.

getHighestLayerPriority()

Returns the highest priority number assigned to layers.

getLayerPriority(layerName)

Returns the priority of the layer that match with layerName parameter.

getGeoHashPrecisionByZoomLevel(levels, zoom)

Given the precisionLevels' levels array (ie: precisionLevels.levels) passed as the first parameter, it returns the geohash precision that matches the zoom parameter.

getOpacityByZoomLevel(levels, zoom)

Given the opacity levels array passed as the first parameter, it returns the opacity value that matches the zoom parameter.

changeGeoHashPrecisionLevel(aktive, zoomLevel)

Changes the precision level of an existing query object (aktive parameter) by triggering a new query using a bounding box filter at the zoom level specified by the zoom parameter. The aktive parameter must have a precisionLevels configured.

changeMapBoundariesFilter(aktive, eventNativeData)

This function performs a new query with a new bounding box. It is meant to be used within a callback subscribed to the mapmove event. You should pass the aktive query object to query the data and the nativeData property of the mapmove event. The function will trigger a query using the new boundaries of the map's viewport when the user is panning the map. Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
const map = cf.getVisualization(mapId);

const handleMapMove = (e) => {    
    const layers = map.get('getAllDefinedLayers')();

    layers.forEach((layer) => {                
        const aktiveQuery = cf.getVisualization(layer.id);

        if (aktiveQuery) {
            if (
                map.get('isGeoHashData')(aktiveQuery) ||
                map.get('isRawData')(aktiveQuery)
            ) {
                map.get('changeMapBoundariesFilter')(aktiveQuery, e.nativeData);
            }
        }
    });
};

map.on('mapmove', (e) => handleMapMove(e));

isGeoHashData(aktive)

It returns true when this query configuration includes the precision property or when the data includes geohash information

isRawData(aktive)

It returns true when this query configuration is not a GeoHash query and it includes fields or when the data includes lat/long information

isAggregatedData(aktive)

It returns true when this query configuration is not a GeoHash and it is not a Raw query