CargoCanvas / Examples / Layers and controls

Layers and controls

Two interchangeable base maps, two overlays you can toggle independently, a scale bar, and a custom control of your own — all over Curitiba.

What to notice

LayersControl takes two objects: base layers first, overlays second. Base layers are radio buttons; overlays are checkboxes.
Add one base layer to the map yourself — that is the one selected when the page loads. Adding none leaves the map blank until the user picks one.
A LayerGroup bundles many layers behind a single entry, so the three depot markers toggle together.
A custom control needs only onAdd returning an element. Implement onRemove as well whenever you attached listeners, or they leak.
baselayerchange, overlayadd and overlayremove fire on the map, carrying the layer's label in e.name.

Control positions. Every control accepts position: 'topleft', 'topright', 'bottomleft' or 'bottomright'. Several controls in the same corner stack in the order they were added.

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, LayersControl, ScaleControl, Control, LayerGroup, Marker, Circle, DomUtil} from 'cargocanvas';