Examples
Each one is a single file in the demo apps, and each screenshot is that file running. Adding an example to a demo adds it to this page.
Map basics
Put a map on screen and point it somewhere.
Display a map
One raster layer from one spec, and a camera pointed at it. The whole map is six lines.
Camera
Move, fly, frame and constrain the view.
Fly to a location
One flight moves position, zoom, rotation and tilt together. Four separate setters would animate independently and visibly fight.
Sources & data
Where tiles and features come from.
Add a GeoJSON line
A "geojson" source re-tiles the document on the fly, so the features are styled with CartoCSS and drawn by the same renderer as a tile server's.
Styles & layers
CartoCSS, style projects and layer composition.
Change a style at runtime
A style project declares `param::` values the app sets while the map runs, as properties: `params.<name>`. A colour swaps live; one used in a filter re-decodes the tiles.
Light the map by the hour
One palette, no night theme: the scene light is read off a curve of `LightStop`s, and every colour on the map - 2D fills, labels, 3D walls - is derived from it. Swap the curve and the whole map changes character. The buildings follow the CAMERA as well as the hour: they rise over z15 and lie down when you zoom out (`building-height-scale`), sink towards the ground as the tilt approaches 90 (`building-height-view-scale`), and the map drops to a flat 2D render at the top of that tilt.
3D terrain
Elevation, hillshade, sky and fog.
3D terrain, hybrid
Satellite imagery draped over an elevation mesh, with roads and summit labels above it. One DEM source drives the mesh, the hillshade and the elevation queries.
2D / 3D switch
One flag switches a composite layer - a full OSM style, hillshade and contours over one shared DEM - between flat and 3D terrain. Full switch decides whether a flat map still pays for 3D, auto by tilt lets a tilt gesture do the switching, match flight drives the terrain off the camera's own clock, and shadows show what the switch costs with a shadow pass in the frame.
Sky, fog and the day cycle
A physical atmosphere over 3D terrain: dawn, noon, dusk and night, with the fog lit by the same sun, stars beyond it, and summits standing clear of the haze filling the valley.
Markers & popups
Things an app puts on the map itself.
Markers and popups
addMarker takes a spec that carries the position AND the style. Tap a summit for a balloon popup; tap the map to dismiss it.
Interaction
Clicks, features and live updates.
Get the feature under a tap
The click payload is read lazily by path, so asking for one property never parses the whole feature - and a handler that found what it wanted returns true to claim the click, so nothing after it sees the tap.
Refresh data when the map settles
map.stable fires once when a movement ends, with the reason that caused it - so a data refresh runs once per gesture, and never for your own camera calls.
Search & routing
Finding features and getting from A to B.
Search the map's own tiles
Every filter on a search request is an ordinary property. Runs async, because a search fetches and decodes every tile in range.