> ## 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. # WMS Layers ## Examples Examples of the following layer types are available below: * [Raster](https://github.com/kineticadb/kinetica-kickbox-mapbox-gl/blob/master/examples/wms-raster.html) * [Heatmap](https://github.com/kineticadb/kinetica-kickbox-mapbox-gl/blob/master/examples/wms-heatmap.html) * [Class Break Raster](https://github.com/kineticadb/kinetica-kickbox-mapbox-gl/blob/master/examples/wms-cb-raster.html) * [Contour](https://github.com/kineticadb/kinetica-kickbox-mapbox-gl/blob/master/examples/wms-contour.html) * [Labels](https://github.com/kineticadb/kinetica-kickbox-mapbox-gl/blob/master/examples/wms-labels.html) 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 *JavaScript* include between the final DOM element and the closing `` tag: ```html theme={null} ``` The style sheet should be included in the `` of the HTML: ```html theme={null} ``` The map will have to be initialized before a *Kinetica* WMS layer can be added to it. Map initialization via [API Documentation](/content/connectors/kickbox_api#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*. ```js theme={null} kickbox.initMap({ mapboxgl: , kineticaUrl: 'http://:9191', wmsUrl: 'http://:9191/wms', mapboxKey: '', mapDiv: '', username: '', password: '' }).then(function(map){...} ``` 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 [API Documentation](/content/connectors/kickbox_api#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 [API Documentation](/content/connectors/kickbox_api#addwmslayer) function: ```python theme={null} kickbox.addWmsLayer( map, { layerId: '', layerType: 'raster', // can also be 'heatmap', or 'contour' wmsUrl: 'http://:9191/wms', tableName: '', xAttr: '', yAttr: '', renderingOptions: { // Customize output here } } ); ``` 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](/content/api/rest/wms_rest) 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 [API Documentation](/content/connectors/kickbox_api#addwmslayer). ## Adding a Labels Layer Adding a labels layer is equally easy with the same [API Documentation](/content/connectors/kickbox_api#addwmslayer) function: ```js theme={null} kickbox.addWmsLayer( map, { layerId: '', layerType: 'labels', wmsUrl: 'http://:9191/wms', tableName: '', xAttr: '', yAttr: '', renderingOptions: { LABEL_TEXT_STRING: '' // Customize output here } } ); ``` See the [WMS endpoint documentation](/content/api/rest/wms_rest) 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. ```js theme={null} kickbox.addWmsLayer( map, { layerId: '', layerType: 'cb_raster', wmsUrl: 'http://:9191/wms', tableName: '', xAttr: '', yAttr: '', renderingOptions: { CB_ATTR: '', CB_VALS: '', POINTCOLORS: '', // Customize output here } } ); ``` See the [WMS endpoint documentation](/content/api/rest/wms_rest) 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](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.min.js & kickbox.css are assumed to be local to this HTML file. ```html theme={null} Kinetica Kickbox: WMS Raster Example
```