Examples of the following layer types are available below:
You will need a current Mapbox API key and some minor modifications will be required in order to run each example. At a minimum, you will need a Kinetica table with latitude/longitude values, or WKTs.
Initializing the Map
First, ensure Kinetica
Kickbox.js and its stylesheet are included in
the HTML page. If you're using npm to install Kickbox, add this
The style sheet should be included in the <head> of the HTML:
The map will have to be initialized before a Kinetica WMS layer can be added to it. Map initialization via initMap is promisified, so that initialization is guaranteed to complete before any layers are added, avoiding startup errors. Since this initialization function sets up basic authentication for Kinetica and connects to the Mapbox API all at once, it is intended to replace the existing map initialization function provided by Mapbox.
The code above initializes the Mapbox map, sets the parameters for basic authentication inside of Mapbox, and also sets the basic authentication parameters for any XmlHttpRequests made to Kinetica itself. The function returns the standard Mapbox map.
For an example call, see initMap.
Adding a Raster/Heatmap/Contour Layer
After initialization, a layer can be added to the map. Performing this manually would require creating & adding a source and layer, then piecing together the WMS URL with all of the configuration & rendering parameters, and finally, binding every zoomend and moveend event to reconstruct the WMS URL during interaction with the map.
Fortunately, this process can be simplified with the addWmsLayer function:
That is all the code required to visualize data in Kinetica on a Mapbox map! By customizing the renderingOptions parameters, the way the points are rendered can be altered, including size, color, and shape. See the WMS endpoint documentation for the full set of rendering options to customize output.
If using a WKT column instead of x/y or lat/long, replace the xAttr and yAttr properties with a geoAttr property with the name of the WKT column.
For an example call, see addWmsLayer.
Adding a Labels Layer
Adding a labels layer is equally easy with the same addWmsLayer function:
See the WMS endpoint documentation for the full set of label rendering options.
Adding a Class Break Raster Layer
The output of a raster layer can be thematically colored based on the value of a chosen column using a Class Break Raster Layer. In other words, each dot can be colored based on its exact value or its falling within a range of values.
See the WMS endpoint documentation for the full set of class break rendering options.
Resizing the Browser
Currently, there is a limitation in Mapbox that does not allow the update of the image source itself with a new image. Because of this, there is a glitch that occurs when resizing the browser window that distorts the currently displayed WMS layers. To correct this problem, the addRasterLayer and addHeatmapLayer functions will register a listener with the window that will automatically remove and re-add the layer any time the resize event is fired. This corrects the visual distortion, but may introduce a lag while the layer is re-initialized.
GitHub issue: https://github.com/mapbox/mapbox-gl-js/issues/4050
Full Code Example
The kbConfig object should be updated with the settings for the target
Kinetica environment for this example to run. Note that the Kickbox files,
kickbox.css are assumed to be local to this