API Documentation

Function

initMap(options) -> {Promise<Map>}

Returns

A Promise that delivers the Mapbox GL Map when initialized; this is the Mapbox web map object that will be used throughout the rest of the API.

Description

Initializes a Mapbox web map.

Example

Map centered on Kinetica HQ:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

initMap(
    {
        mapDiv : "kineticaHQ",
        mapboxgl : window.mapboxgl,
        mapboxKey : 'abc123',
        kineticaUrl : "http://<db.host>:9191",
        wmsUrl : "http://<db.host>:9191/wms",
        center : [-122.398, 37.793],
        zoom : 15,
        username : "admin",
        password : "admin"
    }
)

Function

addWmsLayer(map, options) -> {Promise<Object>}

Returns

A layer parameters object; useful for testing purposes.

Description

Adds a WMS raster-styled layer to the Mapbox map.

Example

Raster image of offices from an office table with lat & lon columns for coordinates:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

addWmsLayer(
    map,
    {
        wmsUrl : 'http://<db.host>:9191/wms',
        layerId : 'offices',
        layerType : 'raster',
        tableName : 'office',
        xAttr : 'lon',
        yAttr : 'lat',
        renderingOptions :
        {
            POINTCOLORS: 'FF0000',
            POINTSHAPES: 'square',
            POINTSIZES: 4
        }
    }
)

Function

updateWmsLayer(map, options) -> {Object}

Returns

An object containing the map, WMS URL, source name, layer name, query parameters, and the redraw function; useful for testing purposes

Description

Updates a WMS layer's parameters with the passed options. Useful for updating WMS output styling parameters based on UI interactions.

Example

Update raster image of offices, turning each point into a green circle:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

updateWmsLayer(
    map,
    {
        layerId : 'offices',
        wmsUrl : 'http://<db.host>:9191/wms',
        renderingOptions :
        {
            POINTCOLORS: '00FF00',
            POINTSHAPES: 'circle',
            POINTSIZES: 3
        }
    }
)

Function

updateWmsLayerType(map, layerId, layerType, debounceLimit) -> {Object}

Returns

An object containing the redraw function and the debounce limit; useful for testing purposes

Description

Changes an existing WMS layer's rendering type and sets all of its parameters to the default values. Useful for changing a layer's presentation without having to destroy the old layer and create a new one.

Example

Update layer of offices to a heatmap:

1
2
3
4
5
6

updateWmsLayerType(
    map,
    'offices',
    'heatmap',
    1000
)

Function

removeWmsLayer(map, layerId) -> {Void}

Returns

Void

Description

Removes a WMS layer from the map, based on layer ID; this includes the layer source and event listeners

Example

Remove offices layer:

1
2
3
4

removeWmsLayer(
    map,
    'offices'
)

Function

addCbLegend(map, legendTitle, location, cbConfig) -> {Void}

Returns

Void

Description

Adds a WMS raster styled layer to the Mapbox map

Example

Add a legend to a class break on offices by the number of employees at each; offices of up to 20 employees will be green, between 21 and 40 will be yellow, and 41 or more employees will be shaded red:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

addCbLegend(
    map,
    'Offices by Employees',
    'top-right',
    {
        cbVals :
        [
            '0-20',
            '20-40',
            '<other>'
        ],
        pointColors :
        [
            '00FF00',
            'FFFF00',
            'FF0000'
        ]
    }
)

Function

setLayerOpacity(map, layerId, opacity) -> {Void}

Returns

Void

Description

A helper function to easily set a layer's opacity

Example

Set opacity of offices layer to 50%:

1
2
3
4
5

removeWmsLayer(
    map,
    'offices',
    .5
)

Function

addClusterLayer(map, options) -> {Promise}

Returns

Returns a promise that resolves with the map, cluster object, update function, and options used to generate the cluster. Useful for testing purposes.

Description

Adds a geohash cluster visualization layer to the Mapbox map

Example

Clustering of employees from an office_employee table with lat & lon columns for coordinates, each cluster calculating the total of the salaries earned by all employees located at offices within the cluster:

 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

addClusterLayer(
    map,
    {
        layerId : 'office_employees',
        mapboxgl: window.mapboxgl,
        kineticaUrl : 'http://<db.host>:9191',
        tableName : 'office_employee',
        xAttr : 'lon',
        yAttr : 'lat',
        geohashAttr : 'geo_hash',
        precision : 4,
        clusterRadius : 40,
        clusterMaxZoom : 14,
        useBbox : true,
        minSize : 1,
        maxSize : 20,
        minColor : '#FF0000',
        maxColor : '#00FF00',
        dbAggregations :
        [
            'SUM(salary) employeeSalaries'
        ],
        clientAggregations :
        [
            {
                key: 'employeeSalaries',
                initial: 0,
                map: (key, properties) => {
                    return Number(properties.employeeSalaries);
                },
                reduce: (accumulated, properties) => {
                    return accumulated.employeeSalaries + properties.employeeSalaries;
                }
            }
        ]
    }
)

Function

on(name, cb) -> {Void}

Returns

Void

Description

Registers a callback with the given event name; an ID can be specified to allow a subsequent unregister call by ID instead of function signature, which requires storing function references globally

Example

Log to console immediately after a WMS layer is added, and assign a callback ID of myCallbackId for subsequent use in turning this event handler off using offById:

1
2
3
4
5
6
7

    var afterWmsLayerUpdatedCb = (e) => { console.log('[' + e.eventName + ']  WMS layer has been updated'); }
    afterWmsLayerUpdatedCb.kbFnId = 'myCallbackId';

    on(
        'afterWmsLayerUpdated',
        afterWmsLayerUpdatedCb
    )

Function

off(name, cb) -> {Void}

Returns

Void

Description

Unregisters a callback with the given event name and callback function

Example

Stop calling afterWmsLayerUpdateCb when afterWmsLayerUpdated events occur:

1
2
3
4

off(
    'afterWmsLayerUpdated',
    afterWmsLayerUpdateCb
)

Function

offById(name, cbId) -> {Void}

Returns

Void

Description

Unregisters a callback that has a kbFnId property equal to the specified cbId

Example

Stop calling the callback function with an ID of myCallbackId when afterWmsLayerUpdated events occur:

1
2
3
4

offById(
    'afterWmsLayerUpdated',
    'myCallbackId'
)

Function

trigger(name) -> {Void}

Returns

Void

Description

Triggers a Kinetica Kickbox.js event for all listeners of the event with the specified name

Example

Fire the afterWmsLayerUpdated event, triggering all listeners for that event to invoke their respective callback functions:

1

trigger('afterWmsLayerUpdated')

Function

enableIdentifyByRadiusMode(map, options) -> {Void}

Returns

Void

Description

Enables the identify-by-radius mode on a specified layer, after first disabling any currently active identify mode

Example

Enable geospatial filtering of data via click-and-drag of a circle on the offices map layer, prefixing hex values in the color_code column with a #:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

enableIdentifyByRadiusMode
(
    {
        layerId : 'offices',
        mapboxgl : window.mapboxgl,
        MapboxDraw : window.MapboxDraw,
        kineticaUrl : "http://<db.host>:9191",
        tableName : 'office',
        xAttr : 'lon',
        yAttr : 'lat',
        transformations :
        [
            {
                condition: (columnName, columnType) => { return columnName === 'color_code'; },
                transformation: (record, columnName) =>
                {
                    record[columnName] = '#' + record[columnName];
                    return record;
                }
            }
        ]
    }
)

Function

enableIdentifyByPointMode(map) -> {Void}

Returns

Void

Description

Enables the identify-by-point mode on a specified layer, after first disabling any currently active identify mode

Example

Enable geospatial filtering of data via click of a point on the offices map layer and applying a 200m fixed radius to determine the filtered area, prefixing hex values in the color_code column with a #:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

enableIdentifyByPointMode
(
    {
        layerId : 'offices',
        mapboxgl : window.mapboxgl,
        MapboxDraw : window.MapboxDraw,
        kineticaUrl : "http://<db.host>:9191",
        tableName : 'office',
        xAttr : 'lon',
        yAttr : 'lat',
        radiusInMeters : 200,
        transformations :
        [
            {
                condition: (columnName, columnType) => { return columnName === 'color_code'; },
                transformation: (record, columnName) =>
                {
                    record[columnName] = '#' + record[columnName];
                    return record;
                }
            }
        ]
    }
)

Function

disableIdentifyMode(map) -> {Void}

Returns

Void

Description

Disables the currently active identify-by-radius or identify-by-point mode and unregisters all callbacks driving the user interaction with this mode

Example

Disable any active identify mode:

1

disableIdentifyMode(map)