Examples

Each one is a single file in the demo apps, and each screenshot is that file running. Those with a JavaScript tab run live in the page, on the web SDK. 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 vector layer from one spec - the source, and the Massif streets style over it - and a camera pointed at it.

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.

Animate a weather radar

Each time step is a tile of its own. The layer draws a step and the next in one pass and mixes the values, so the fade has no pop at a step boundary. Play, scrub, change the speed, or switch to 3D and watch it drape over the Alps.

Styles & layers

CartoCSS, style projects and layer composition.

The Massif styles

Streets, outdoor, topo, hybrid and e-ink are ONE CartoCSS project: the variant is a style parameter, so switching loads nothing - `params.variant`. Relief and contours are slots of every variant, filled here for outdoor and topo.

Change a style at runtime

A style project declares `param::` values the app sets while the map runs, as properties: `params.<name>`. A value 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.

Draw 3D models

A CartoCSS `model` rule places a .glb at every point: trees with a random model, size, heading and tint each, and a wind turbine whose rotor spins. Massif's own trees take `params.models_3d` and their .glb files added to the style package.

Shields, font icons and callouts

Label styling is CartoCSS alone: a name takes the free side of its icon, an icon is a glyph of an image or a font on a plate, a trail's ref repeats along it, and summit names lift onto leader lines instead of hiding.

Map legend

A legend resolved from the live style: switch the Massif variant and every swatch follows, because none of its colours is written down anywhere but in the style.

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 - Massif outdoor, 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.

Objects in the sky

Stars, the figure of Orion and their names drawn in the sky over 3D terrain, setting behind the Matterhorn as the sky turns. The camera looks up at them, and a tap names the star.

Custom layer: heatmap

A heatmap drawn by the app's own GL code - a custom layer registered over the C ABI - on flat ground and on 3D terrain. The layer is depth tested, so a ridge in front hides it, and a tap finds the cell under the finger.

Peak finder

A panorama drawn as peakfinder.com draws it: the terrain as ink on paper from a shader, every summit named along the skyline, and the sun's path with its rise and set over the ridges. Drag to look around, tap a name, then fly to it.

Hillshade

Shaded relief computed on the fly from an elevation source and laid over the basemap: pick the algorithm, scale the relief.

On-the-fly contour lines

Contour lines traced from an elevation source at runtime, no contour tileset needed, and styled with CartoCSS like any vector layer.

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.

Navigation maneuver arrows

A drive round Annecy station - turns, roundabouts, a U-turn and a lane change - each cut from the route and drawn as one line whose head is a line property: no marker, no bitmap, and a casing that outlines shaft and head alike.