Canvas Renderer

dense point clouds through one <canvas>.

Overview

This page demonstrates Canvas Renderer.

Live demo

Canvas-backed markers

// preferCanvas routes every CircleMarker through the Canvas renderer:
// one <canvas> instead of N SVG nodes — the substrate for live vessel
// positions, sensor swarms and heatmaps.
const map = new leaflet.Map(el, {preferCanvas: true}).setView(center, 11);
for (let i = 0; i < 8000; i++) {
    new leaflet.CircleMarker(points[i], {radius: 3, stroke: false}).addTo(group);
}

Source

# File: docs/canvas-overlay/example.py

"""Canvas Renderer — dense point clouds through one <canvas>."""

import dash_mantine_components as dmc
from dash import html
from dl2_shared import info_panel, map_div


component = dmc.Stack(
    [
        info_panel(
            "Render benchmark",
            html.Div(id="canvas-hud", className="dl2-hud", children="rendering…"),
        ),
        map_div("canvas-overlay"),
    ],
    gap="md",
)

Source: /canvas-overlay