> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kinetica.com/llms.txt
> Use this file to discover all available pages before exploring further.
# API Documentation
## Map Initialization
}`
**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.
| Parameter | Type | Required | Description |
| --------------------- | --------------- | -------- | -------------------------------------------------------- |
| `options` | `Object` | Yes | A configuration object for the map |
| `options.mapDiv` | `String` | Yes | The div ID of the web map container |
| `options.mapboxgl` | `Object` | Yes | The *Mapbox GL* object |
| `options.mapboxKey` | `String` | Yes | The *Mapbox* API key |
| `options.kineticaUrl` | `String` | Yes | The URL of the *Kinetica* REST API |
| `options.wmsUrl` | `String` | Yes | The URL of the *Kinetica* WMS endpoint |
| `options.center` | `Array` | No | The center point at which the map should initialize |
| `options.zoom` | `Integer` | No | The *Mapbox* zoom scale with which to initialize the map |
| `options.username` | `String` | No | The basic auth username for the *Kinetica* REST API |
| `options.password` | `String` | No | The basic auth password for the *Kinetica* REST API |
**Example**
Map centered on *Kinetica* HQ:
```js theme={null}
initMap(
{
mapDiv : "kineticaHQ",
mapboxgl : window.mapboxgl,
mapboxKey : 'abc123',
kineticaUrl : "http://:9191",
wmsUrl : "http://:9191/wms",
center : [-122.398, 37.793],
zoom : 15,
username : "admin",
password : "admin"
}
)
```
## WMS Layer
}`
**Returns**
A layer parameters object; useful for testing purposes.
**Description**
Adds a WMS raster-styled layer to the *Mapbox* map.
| Parameter | Type | Required | Description |
| -------------------------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `map` | `Object` | Yes | The *Mapbox* web map object |
| `options` | `Object` | Yes | A configuration object for the WMS layer |
| `options.layerId` | `String` | Yes | A unique identifier of the layer; cannot have the same ID as any other added layer |
| `options.layerType` | `String` | Yes | The styling used to render the WMS image; options: :9191/wms',
layerId : 'offices',
layerType : 'raster',
tableName : 'office',
xAttr : 'lon',
yAttr : 'lat',
renderingOptions :
{
POINTCOLORS: 'FF0000',
POINTSHAPES: 'square',
POINTSIZES: 4
}
}
)
```
:9191/wms',
renderingOptions :
{
POINTCOLORS: '00FF00',
POINTSHAPES: 'circle',
POINTSIZES: 3
}
}
)
```
` | Yes | An array of class-break specifications to be shown next to the colored legend tokens |
| `cbConfig.pointColors` | `Array` | Yes | An array of class-break colors to be rendered as tokens next to the class breaks |
**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*:
```js theme={null}
addCbLegend(
map,
'Offices by Employees',
'top-right',
{
cbVals :
[
'0-20',
'20-40',
''
],
pointColors :
[
'00FF00',
'FFFF00',
'FF0000'
]
}
)
```
` | No | An array of custom aggregations to perform at the database level at the specified `precision` of the geohashes; these will be included as properties for the custom client-side aggregations `COUNT(*)` is calculated by default and should not be specified as an aggregate |
| `options.clientAggregations` | `Array` | No | An array of custom map/reduce aggregations to perform on the client side, for each cluster displayed at the current zoom level; aggregation configurations should be objects with the following properties: ` ` and accumulated into the value at `accumulated.` See below for an example setup using both database & client-side aggregations |
A WKT column is not currently allowed when creating clusters--x/y
columns must be used.
**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:
```js theme={null}
addClusterLayer(
map,
{
layerId : 'office_employees',
mapboxgl: window.mapboxgl,
kineticaUrl : 'http://: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;
}
}
]
}
)
```
## Events
The following events can be acted upon using the *Kinetica Kickbox.js Event API*
| Event Name | Description |
| ------------------------- | ------------------------------------------------------ |
| `beforeWmsLayerAdded` | Fires just before a WMS layer is added to the map |
| `afterWmsLayerAdded` | Fires just after a WMS layer has been added to the map |
| `beforeClusterLayerAdded` | Fires just before a cluster layer is added to the map |
| `afterClusterLayerAdded` | Fires just after a cluster layer is added to the map |
| `beforeWmsLayerRemoved` | Fires just before a WMS layer is removed from the map |
| `afterWmsLayerRemoved` | Fires just after a WMS layer is removed from the map |
| `beforeWmsSourceRemoved` | Fires just before a WMS layer is removed from the map |
| `afterWmsSourceRemoved` | Fires just after a WMS layer is removed from the map |
| `beforeZoomToBounds` | Fires just before zooming to bounds |
| `afterZoomToBounds` | Fires just after zooming to bounds |
| `beforeWmsLayerUpdated` | Fires just before a WMS layer is updated |
| `afterWmsLayerUpdated` | Fires just before a WMS layer is updated |
As noted in `on`, the callback function reference passed in
here must be the same reference passed to the `on` function
This ID must match the one assigned to the callback function
before calling the `on` function
` | No | An array of objects that contain two properties:
The *Mapbox GL* and *Mapbox GL Draw* objects require a separate
install from *Kinetica Kickbox.js*
**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 `#`:
```js theme={null}
enableIdentifyByRadiusMode
(
{
layerId : 'offices',
mapboxgl : window.mapboxgl,
MapboxDraw : window.MapboxDraw,
kineticaUrl : "http://:9191",
tableName : 'office',
xAttr : 'lon',
yAttr : 'lat',
transformations :
[
{
condition: (columnName, columnType) => { return columnName === 'color_code'; },
transformation: (record, columnName) =>
{
record[columnName] = '#' + record[columnName];
return record;
}
}
]
}
)
```
` | No | An array of objects that contain two properties:
The *Mapbox GL* and *Mapbox GL Draw* objects require a separate
install from *Kinetica Kickbox.js*
**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 `#`:
```js theme={null}
enableIdentifyByPointMode
(
{
layerId : 'offices',
mapboxgl : window.mapboxgl,
MapboxDraw : window.MapboxDraw,
kineticaUrl : "http://: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;
}
}
]
}
)
```