Class: CanvasLayer
- Last UpdatedMay 21, 2025
- 5 minute read
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 |
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
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
removeEventListenerordisposeon the given object when you no longer need it. -
addOnDisposeCallback (callback, opt_scope) inherited
-
This method adds a callback which is triggered when the
EventTargetobject is being disposed.Name Type Description callbackfunction The callback function.
opt_scopeObject optional An optional scope for the callback function
-
dispatchEvent (evt) inherited
-
This method dispatches an event on the
EventTargetobject.Name Type Description evtH.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
EventTargetmay 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 returnsnull.Name Type Description boundingBoxH.geo.Rect The bounding box for which to retrieve the copyright information
levelnumber 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 zoomLevelnumber The zoom level to check
Returns:
Type Description boolean trueif the given layer can provide data for the zoom level, otherwisefalse -
removeEventListener (type, handler, opt_capture, opt_scope) inherited
-
This method removes a previously added listener from the
EventTargetinstance. -
setMax (max)H.map.layer.Layer inherited
-
This method sets the maximum zoom level at which the given layer provides content.
Name Type Description maxnumber The new maximum zoom level for the given layer
Throws:
-
if the
maxparameter 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 minnumber The new minimum zoom level for the given layer
Throws:
-
if the
minparameter 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
-
This object encapsulates options which can be used when creating new
H.map.layer.CanvasLayer.Properties:
Events
-
update inherited
-
Event fired when the data associated with the given layer is updated.
Type:
