Class: CanvasLayer

H .map .layer.CanvasLayer

new H.map.layer.CanvasLayer (renderCallback, opt_options)

This class represents a layer for drawing 2D or 3D graphics on the map.

Note that there is no need to create own animation frame, as rendering callback is called within main animation frame used for rendering all other layers on the map.

Name	Type	Description
`renderCallback`	function((CanvasRenderingContext2D\|WebGLRenderingContext), H.map.render.RenderingParams): H.map.render.RenderState	A custom callback to render the layer's content in each animation frame. It is called with the rendering context according to canvas type and attributes specified via `opt_options` and other rendering parameters. The return value of the render callback indicates the rendering state. See `H.map.render.RenderState`. If render callback returns `H.map.render.RenderState.DONE` or `H.map.render.RenderState.PENDING` the rendering engine might go to sleep mode. Call `this.dispatchEvent('update')` to restart the rendering engine. Note that in case of `P2D` engine canvas is cleared before each render loop. In order to have higher rendering performance and responsiveness of the map it is recommended to execute any expensive operations asynchronously or – even better – in a web worker and perform only the absolute necessary operations synchronously within the render callback.
`opt_options`	H.map.layer.CanvasLayer.Options	optional An optional configuration object

Throws:

If passed arguments are invalid

Examples

// Example to render on contextType "2d":
// Renders the coordinates of the map center and crosshairs.
map.addLayer(new H.map.layer.CanvasLayer(function(ctx, renderingParams) {
  var center = renderingParams.boundingBox.getCenter(),
      pixelRatio = renderingParams.pixelRatio,
      x = renderingParams.screenCenter.x * pixelRatio,
      y = renderingParams.screenCenter.y * pixelRatio,
      size = 12 * pixelRatio;

  if (map.getEngine().type === H.Map.EngineType.WEBGL) {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  }
  ctx.textAlign = 'center'; ctx.font = size + 'px sans-serif';
  ctx.fillText(
    center.lat.toFixed(7) + '˚ / ' + center.lng.toFixed(7) + '˚',
    x, y - size * 1.5
  );
  ctx.beginPath();
  ctx.arc(x, y, size, 0, 2 * Math.PI);
  size *= 1.4;
  ctx.moveTo(x, y - size); ctx.lineTo(x, y + size);
  ctx.moveTo(x - size, y); ctx.lineTo(x + size, y);
  ctx.stroke();
  return H.map.render.RenderState.DONE;
}));

// Example to render on a WebGL render engine:
// Renders a square at the predefined geographic position and uses the cameraMatrix
// which is provided by the WebGL render engine to projecting the position in the shader.
map.getViewModel().setLookAtData({position: {lat: 52.53082, lng: 13.38511}, zoom: 15});
map.addLayer(new H.map.layer.CanvasLayer((gl, {cameraMatrix, pixelRatio}) => {
  if (!this.program) {
    this.program = gl.createProgram();
    const {x, y} = map.getEngine().geoToMeters({lat: 52.53082, lng: 13.38511}),
          vertexShader = gl.createShader(gl.VERTEX_SHADER),
          fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(vertexShader, `
      uniform mat4 u_matrix;
      void main() {
          gl_Position = u_matrix * vec4(${x}, ${y}, 0.0, 1.0);
          gl_PointSize = ${20 * pixelRatio}.0;
      }`
    );
    gl.shaderSource(fragmentShader, `
      void main() {
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }`
    );
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);
    gl.attachShader(this.program, vertexShader);
    gl.attachShader(this.program, fragmentShader);
    gl.linkProgram(this.program);
  }
  gl.useProgram(this.program);
  gl.uniformMatrix4fv(gl.getUniformLocation(this.program, 'u_matrix'), false, cameraMatrix);
  gl.drawArrays(gl.POINTS, 0, 1);
  return H.map.render.RenderState.DONE;
}, {contextType: 'webgl'}));

Extends

H.map.layer.Layer

Members

max number inherited

This property holds a value of the maximum zoom level at which the given layer can be rendered.

min number inherited

This property holds the value of the minimum zoom level at which the given layer can be rendered.

pixelProjection H.geo.PixelProjection non-null inherited

This property indicates the projection type for the given layer.

Methods

addEventListener (type, handler, opt_capture, opt_scope) inherited

This method adds a listener for a specific event.

Note that to prevent potential memory leaks, you must either call removeEventListener or dispose on the given object when you no longer need it.

Name	Type	Description
`type`	string	The name of the event
`handler`	function	An event handler function
`opt_capture`	boolean	optional `true` indicates that the method should listen in the capture phase (bubble otherwise)
`opt_scope`	Object	optional An object defining the scope for the handler function

addOnDisposeCallback (callback, opt_scope) inherited

This method adds a callback which is triggered when the EventTarget object is being disposed.

Name	Type	Description
`callback`	function	The callback function.
`opt_scope`	Object	optional An optional scope for the callback function

dispatchEvent (evt) inherited

This method dispatches an event on the EventTarget object.

Name	Type	Description
`evt`	H.util.Event \| string	An object representing the event or a string with the event name

dispose () inherited

This method removes listeners from the given object. Classes that extend EventTarget may need to override this method in order to remove references to DOM Elements and additional listeners.

getCopyrights (boundingBox, level)Array.<!H.map.ICopyright> inherited

This method retrieves the copyright of the current data provider.

Note: This function must be overridden by any class derived from Layer. The default implementation returns null.

Name	Type	Description
`boundingBox`	H.geo.Rect	The bounding box for which to retrieve the copyright information
`level`	number	The zoom level for which to retrieve the copyright information

Returns:

Type	Description
Array.<!H.map.ICopyright>	A list of copyright information objects for the provided area and zoom level

getProvider ()H.map.provider.Provider inherited

This method returns the provider which feeds this layer with data.

Returns:

Type	Description
H.map.provider.Provider	this layer's provider

isValid (zoomLevel)boolean inherited

This method checks if a zoom level can be served by the given layer.

Name	Type	Description
`zoomLevel`	number	The zoom level to check

Returns:

Type	Description
boolean	`true` if the given layer can provide data for the zoom level, otherwise `false`

removeEventListener (type, handler, opt_capture, opt_scope) inherited

This method removes a previously added listener from the EventTarget instance.

Name	Type	Description
`type`	string	The name of the event
`handler`	function	A previously added event handler
`opt_capture`	boolean	optional `true` indicates that the method should listen in the capture phase (bubble otherwise)
`opt_scope`	Object	optional An object defining the scope for the handler function

setMax (max)H.map.layer.Layer inherited

This method sets the maximum zoom level at which the given layer provides content.

Name	Type	Description
`max`	number	The new maximum zoom level for the given layer

Throws:

if the max parameter is not a number or if it is smaller that the current minimum zoom level

Returns:

Type	Description
H.map.layer.Layer	An object representing the given layer

setMin (min)H.map.layer.Layer inherited

This method sets the minimum zoom level at which the given layer provides content.

Name	Type	Description
`min`	number	The new minimum zoom level for the given layer

Throws:

if the min parameter is not a number or if it is larger that the current maximum zoom level

Returns:

Type	Description
H.map.layer.Layer	An object representing the given layer

Type Definitions

H.map.layer.CanvasLayer.Options Object

This object encapsulates options which can be used when creating new H.map.layer.CanvasLayer.

Properties:

Name	Type	Argument	Description
`min`	number	<optional>	The minimum zoom level for which the layer is considered for rendering, the default is `0`.
`max`	number	<optional>	The maximum zoom level for which the layer is considered for rendering, the default is `22`.
`dark`	boolean	<optional>	Indicates whether the content of the given layer is mainly dark, the default is `false`. See also `H.Map.Options#autoColor`.
`contextType`	string \| undefined		The context identifier defining the drawing context associated to the canvas, default is `2d`. Supported types are `2d`, `webgl`, `webgl2`, `experimental-webgl`. See https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement/getContext#Parameters.
`contextAttributes`	Object \| undefined		The rendering context attributes. See https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement/getContext#Parameters.

Events

update inherited

Event fired when the data associated with the given layer is updated.

Type:

H.util.Event