5,000 delivery points scattered over Curitiba. Switch between the SVG and Canvas
renderers and compare how long each takes to draw — and how each feels to pan.
—
What to notice
Pass one renderer instance to every path. A renderer owns a
drawing surface, so creating one per layer produces thousands of surfaces and is
slower than the SVG default.
Set renderer once as a map option and every path inherits it, instead
of threading it through each layer:
new CargoMap(el, {renderer: new Canvas()}).
The trade-off is real. Canvas paths are pixels, not DOM nodes: they cannot be
targeted with CSS, and hit detection is computed rather than handled by the browser.
Below roughly a thousand paths, SVG is usually the better choice.
Popups, tooltips and mouse events still work on canvas-rendered paths — CargoCanvas
does the hit testing for you.
Still too slow? At tens of thousands of features the renderer stops
being the bottleneck and the data volume becomes the problem. Thin the data by zoom
level, cluster it, or serve it as vector tiles so only the visible extent is loaded.
Why the UMD build? Loading it as a classic script is what lets this
page work when opened straight from disk. In an application with a bundler, install
the package and import the classes instead — everything after that line is
identical:
import {CargoMap, TileLayer, CircleMarker, LayerGroup, Canvas, SVG} from 'cargocanvas';