CargoCanvas / Examples / GeoJSON

GeoJSON

A distribution network across Curitiba, loaded from a FeatureCollection. Points become sized circles, the delivery zone is styled from its properties, and every feature gets a popup.

What to notice

GeoJSON stores coordinates as [longitude, latitude]. Everything else in CargoCanvas uses [latitude, longitude]. The layer converts for you — just don't mix the two up when writing data by hand.
The four hooks divide the work cleanly: style for paths, pointToLayer for points, filter to exclude features, and onEachFeature for interactions.
pointToLayer can return any layer — a Marker, a CircleMarker, even a LayerGroup. Without it, points become default markers.
A custom control is just a class extending Control with an onAdd that returns an element. The legend at the bottom right is thirteen lines.

Adding data later. Construct the layer empty and call addData(geojson) whenever your fetch resolves — the styling hooks apply to the new features too.

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, GeoJSON, CircleMarker, Control, DomUtil} from 'cargocanvas';