CargoCanvas / Examples / Markers, popups and tooltips

Markers, popups and tooltips

Landmarks across Curitiba. Click a marker for its popup; hover for its tooltip. One popup is built from a real DOM element rather than a string.

What to notice

bindPopup and bindTooltip both accept a string, an HTMLElement, or a function returning either. Prefer an element when the content is not yours — it sidesteps HTML injection.
A Popup can stand on its own. openOn(map) shows it and closes any other popup, which is the usual behaviour you want.
Both bindings return the layer, so they chain: bind a popup and a tooltip to the same marker in one expression.

Only one popup at a time. Opening a popup closes the previous one by default. Pass autoClose: false and closeOnClick: false in the popup options if you want several open at once.

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, Marker, Popup} from 'cargocanvas';