diff --git a/doc/errors/index.md b/doc/errors/index.md
index dbebeaee81..4608ed7e6a 100644
--- a/doc/errors/index.md
+++ b/doc/errors/index.md
@@ -248,3 +248,4 @@ A symbol literal representation must be defined on the style supplied to a `WebG
 ### 66
 
 `forEachFeatureAtCoordinate` cannot be used on a WebGL layer if the hit detection logic has not been enabled.
+This is done by providing adequate shaders using the `hitVertexShader` and `hitFragmentShader` properties of `WebGLPointsLayerRenderer`.
diff --git a/src/ol/layer/WebGLPoints.js b/src/ol/layer/WebGLPoints.js
index bb9f182883..de0baa88f1 100644
--- a/src/ol/layer/WebGLPoints.js
+++ b/src/ol/layer/WebGLPoints.js
@@ -1,7 +1,6 @@
 /**
  * @module ol/layer/WebGLPoints
  */
-import VectorLayer from './Vector.js';
 import {assign} from '../obj.js';
 import WebGLPointsLayerRenderer from '../renderer/webgl/PointsLayer.js';
 import {
@@ -13,6 +12,7 @@ import {
 } from '../webgl/ShaderBuilder.js';
 import {assert} from '../asserts.js';
 import {asArray} from '../color.js';
+import Layer from './Layer.js';
 
 
 /**
@@ -37,15 +37,39 @@ import {asArray} from '../color.js';
 
 /**
  * @classdesc
- * Layer optimized for rendering large point datasets.
+ * Layer optimized for rendering large point datasets. Takes a so-called *literalStyle* property which
+ * is a serializable JSON object describing how the layer should be rendered.
+ *
+ * Here are a few samples of literal style objects:
+ * ```js
+ * const style = {
+ *   symbol: {
+ *     symbolType: 'circle',
+ *     size: 8,
+ *     color: '#33AAFF',
+ *     opacity: 0.9
+ *   }
+ * }
+ * ```
+ *
+ * ```js
+ * const style = {
+ *   symbol: {
+ *     symbolType: 'image',
+ *     offset: [0, 12],
+ *     size: [4, 8],
+ *     src: '../static/exclamation-mark.png'
+ *   }
+ * }
+ * ```
+ *
  * Note that any property set in the options is set as a {@link module:ol/Object~BaseObject}
  * property on the layer object; for example, setting `title: 'My Title'` in the
  * options means that `title` is observable, and has get/set accessors.
  *
  * @fires import("../render/Event.js").RenderEvent
- * @api
  */
-class WebGLPointsLayer extends VectorLayer {
+class WebGLPointsLayer extends Layer {
   /**
    * @param {Options} options Options.
    */
diff --git a/src/ol/style/LiteralStyle.js b/src/ol/style/LiteralStyle.js
index 61971d67b2..f5811fb94d 100644
--- a/src/ol/style/LiteralStyle.js
+++ b/src/ol/style/LiteralStyle.js
@@ -5,29 +5,6 @@
  */
 
 /**
- * Here are a few samples of literal style objects:
- * ```js
- * const style = {
- *   symbol: {
- *     symbolType: 'circle',
- *     size: 8,
- *     color: '#33AAFF',
- *     opacity: 0.9
- *   }
- * }
- * ```
- *
- * ```js
- * const style = {
- *   symbol: {
- *     symbolType: 'image',
- *     offset: [0, 12],
- *     size: [4, 8],
- *     src: '../static/exclamation-mark.png'
- *   }
- * }
- * ```
- *
  * @typedef {Object} LiteralStyle
  * @property {LiteralSymbolStyle} [symbol] Symbol representation.
  */
@@ -49,7 +26,7 @@ export const SymbolType = {
  * @property {SymbolType} symbolType Symbol type to use, either a regular shape or an image.
  * @property {string} [src] Path to the image to be used for the symbol. Only required with `symbolType: 'image'`.
  * @property {import("../color.js").Color|string} [color='#FFFFFF'] Color used for the representation (either fill, line or symbol).
- * @property {number} [opacity=0] Opacity.
+ * @property {number} [opacity=1] Opacity.
  * @property {Array.<number, number>} [offset] Offset on X and Y axis for symbols. If not specified, the symbol will be centered.
  * @property {Array.<number, number, number, number>} [textureCoord] Texture coordinates. If not specified, the whole texture will be used (range for 0 to 1 on both axes).
  * @property {boolean} [rotateWithView=false] Specify whether the symbol must rotate with the view or stay upwards.