CargoCanvas / Examples / Vector layers

Vector layers

Circles, polygons, polylines and rectangles drawn over Curitiba, all rendered as SVG. Hover any shape to highlight it; click for a popup.

What to notice

Circle takes its radius in metres and grows as you zoom in. CircleMarker takes it in pixels and never changes size. Both are on the map above — zoom out and watch the difference.
Polygon closes the ring for you. Repeating the first coordinate at the end is harmless but unnecessary.
Rectangle is the odd one out: it takes a LatLngBounds (south-west and north-east corners), not a list of points.
setStyle restyles a path in place, which is how the hover highlight works here. getBounds() plus fitBounds frames a layer.

Drawing thousands of paths? Every path here is an SVG element, which stops being viable in the low thousands. See the Canvas renderer example for the way out.

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, Circle, CircleMarker, Polygon, Polyline, Rectangle, LatLngBounds} from 'cargocanvas';