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 |
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
-
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
-
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: