CargoCanvas / Examples / Custom icons

Custom icons

Three ways to change what a marker looks like: resize the bundled icon, point Icon at your own image, or drop the image entirely and use a DivIcon built from HTML and CSS.

What to notice

iconAnchor is the point of the image that lands on the coordinate. For a pin shape that is the tip at the bottom centre; for a round badge it is the middle. Get this wrong and markers drift as you zoom.
popupAnchor is measured from iconAnchor, which is why it is usually negative on the Y axis — the popup opens above the icon.
DivIcon applies its className in place of the default marker styling, so reset the background and border in your CSS as .depot-icon does here.
A DivIcon is real DOM, so CSS transitions, animations and web fonts all work on it. An Icon is a plain <img>.

Setting a default for every marker. Rather than passing icon to each marker, you can override the prototype default once with Marker.mergeOptions({icon: myIcon}).

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, Icon, DivIcon} from 'cargocanvas';