ALS

Class: CanvasLayer

.ALS.LeafletLayers. CanvasLayer

new CanvasLayer(alwaysOnBottom)

A canvas layer for Leaflet. This class is based on L.CanvasLayer (https://github.com/Sumbera/gLayers.Leaflet), but heavily modified, so stick to this class' docs.

Canvas is always the size of the screen, its size, position and everything is being recalculated when map is being moved or resized. When it happens, draw() method is being called.

Override L.ALS.LeafletLayers.CanvasLayer#draw method and implement your stuff here.

Parameters:
Name Type Description
alwaysOnBottom boolean

If browser doesn't support "pointer-events" CSS property on HTML elements, canvas will be at very bottom. Otherwise canvas will always stay at the top. To make canvas stay always on bottom and unify experience, set this property to true
Example
Typical usage:
let points = [] // Imagine that there're some points
// Extend this class
let MyCanvas = L.ALS.LeafletLayers.CanvasLayer.extend({
    // Override `draw()` method
    draw: function (data) {
        let ctx = data.canvas.getContext('2d'); // Get canvas context
        ctx.clearRect(0, 0, data.canvas.width, data.canvas.height); // Clear previously drawn stuff
        // Add points on canvas
        for (let point of points) {
            // If point is not in the view, don't draw it to save time.
            // Though, if part of your image still must be shown, consider extending those bounds. You have to do it yourself.
            if (!data.bounds.contains(point))
                continue;
            // Draw the point
            coords = this.latLngToCanvasCoords(point); // Convert coordinates from LatLng to canvas coordinate system.
            // Draw circle representing the point
            ctx.beginPath();
            ctx.arc(coords.x, coords.y, 3, 0, Math.PI * 2);
            ctx.fill();
            ctx.closePath();
        }
    }
});
let canvas = new MyCanvas().addTo(map); // Add canvas to the map

Extends

Methods

addTo(map)

Adds this layer to a given map

Parameters:
Name Type Description
map

Map to add this layer to.
Returns:

this

Type
L.ALS.LeafletLayers.CanvasLayer

canvasCoordsToLatLng(coords)

Converts canvas coordinates to latLng.

Parameters:
Name Type Description
coords Array.<number>

Coordinates to convert, array in format [x, y]
Returns:

Converted coordinates.

Type
Object

draw(data)

Being called upon layer redrawing. Override this method and implement your stuff here.

Parameters:
Name Type Description
data

Contains information about the canvas

Properties
Name Type Description
layer

this
canvas HTMLCanvasElement

Canvas
bounds

Current map bounds, see L.Map.getBounds()
size

Current map size, see L.Map.getSize()
zoom number

Current map zoom, see L.Map.getZoom()

getInteractive()

Inherited From:
Returns:

True, if this layer is interactive. False otherwise.

Type
boolean

isInteractive()

Alias for @{link L.Layer.getInteractive}

Inherited From:
Returns:

True, if this layer is interactive. False otherwise.

Type
boolean

latLngToCanvasCoords(latLng)

Converts latLng coordinates to canvas coordinates. Basically, returns map.latLngToContainerPoint(latLng).

Parameters:
Name Type Description
latLng

Coordinate to convert
Returns:

Converted coordinates.

Type
Object

onAdd(map)

Called when layer is being added to the map. If overridden, parent method must be called!

Parameters:
Name Type Description
map

Map to add this layer to.

onRemove(map)

Called upon layer removal. If overridden, parent method must be called!

Parameters:
Name Type Description
map

Map to remove this layer from

redraw()

Redraws content of this layer.

Returns:

this

Type
L.ALS.LeafletLayers.CanvasLayer

setInteractive(interactive)

Sets this layer to be interactive or not.

Parameters:
Name Type Description
interactive boolean

If true, this layer will be interactive. Otherwise layer will be static.
Inherited From:
Author:
  • Piero "Jadaw1n" Steinger. Home page: https://github.com/Jadaw1n