Rendering Viewcast tiles in MapLibre GL

Wire a grant's TileJSON into MapLibre GL JS and style the viewshed, path, and gate layers from the manifest's vector_layers metadata.

Fetch the grant's TileJSON and hand it to MapLibre as a vector source. The TileJSON covers every layer the grant authorizes; its vector_layers[] block tells you the source-layer ids and feature fields to style against.

Unlike the Popcast Anytime surface, Viewcast carries no extra_metadata or breakpoint-manifest layer: the tilejson is standard upstream-shape TileJSON 3.0.0 plus the Motionworks token-refresh block (x-mw). There is no dynamic styling metadata to read; pick your own colors.

Minimal setup

const map = new maplibregl.Map({ /* ... */ });

map.on('load', async () => {
  // tileJsonUrl is the capability URL returned when you minted the grant
  map.addSource('viewcast', { type: 'vector', url: tileJsonUrl });
  map.addLayer({
    id: 'viewsheds-fill',
    type: 'fill',
    source: 'viewcast',
    'source-layer': '<layer id from the manifest vector_layers>',
    paint: { 'fill-color': '#3d5fa0', 'fill-opacity': 0.25, 'fill-outline-color': '#1e1f53' },
  });
});

Your front-end calls this with no auth header: the grant URL is the credential, pinned by the grant's allowed_origins. See Minting a Viewcast tile grant.

Picking source-layer ids and fields

The manifest's vector_layers[] entries carry:

  • id: the source-layer id to use in map.addLayer. This is the layer name emitted inside the tile bytes (often default for single-layer tilesets) and is not the URL slug (viewsheds, paths_vehicle, etc.).
  • fields: the feature properties the layer carries, with types (String, Number, Boolean). Filter and style against these.

Read the ids and fields from the manifest (or from the discovery catalog) rather than hard-coding them: the catalog is the contract.

Geometry pairing

The five layers pair by geometry type with standard MapLibre layer types: viewsheds renders as fill, paths_vehicle and paths_pedestrian as line, and gates_vehicle and gates_pedestrian as circle. One vector source serves every layer in the grant; add one map.addLayer per source-layer id you want to show.

Token refresh

The tile token embedded in tiles[] expires 24h after each TileJSON fetch. Re-fetch the TileJSON after x-mw.refresh_after seconds (82,800 = 23h) for a fresh token; MapLibre picks the new tiles[] URL up automatically when you re-set the source.

Snapshot behavior

Viewcast layers use undated tileset names: the service resolves the latest published snapshot server-side as new monthly Viewcast releases ship. The X-MW-Snapshot response header on tile responses carries the literal static, not a per-request date, so there is nothing to version-pin client-side; a grant keeps serving current data until it expires or is revoked.


Did this page help you?