How the Kit works

Three layers under every Maplore map: the spine holds the numbers, the place registry says where each one belongs, and the Kit decides how it is drawn.

The stage

Every Kit map is one stage: a MapLibre basemap in one of Maplore's themes, India's outline from Survey of India, and deck.gl layers woven in underneath the place names (interleaved, so data and basemap share one WebGL context and one depth order). Each representation owns a named slot on the stage; moving ones are rebuilt from one shared clock each frame. Data comes from the spine: the Kit's own published geography (districts drawn for India-scale maps, a point inside each district, and which districts share a border) plus each atlas's value files.

Representations

Each takes plain data and returns its layers and its key. None fetches anything, so any atlas can use any of them.

Surfaces

A value for every area.

Fields

Continuous surfaces from points and grids.

Symbols

One mark per place.

Motion

Things that travel, drawn moving.

Networks

Places joined to places.

Relief

The shape of the land.

Themes

A theme is a set of colour tokens on one recipe over open vector tiles, so every Maplore map shares one cartography, and a new look is a dozen lines.

Textures

Patterns drawn on canvas at three densities, seeded so they never change between loads or prints. A texture carries a kind of land or a density without using colour, so colour stays free for a second variable, and the map still prints in one ink.

Motion

• One clock. Everything that moves on a stage reads the same clock, so motion can be paused, scrubbed or tied to a date slider in one place.
• The GPU does the moving. Paths are traced once (wind streamlines, flows, tracks); the GPU animates the trails. Time windows filter on the GPU, so nothing is re-sent per frame.
• Still for those who ask. A visitor who has asked their device for reduced motion gets one still frame of every moving representation, never an animation.
• Camera shots. A story can open with a sequence of camera moves that hold on each place, and jump instead of fly with reduced motion.

Rules every representation keeps

• Missing is missing. No value is drawn as missing (hatched), never as zero or the palest class.
• Honest scales. Areas are proportional to values (circles by square root); classes are stated with their edges; heavy-tailed data can use head/tail breaks rather than hiding in one class.
• Colour that reads. Palettes are Maplore's own, interpolated in a perceptual colour space so steps look even, with separate tunings for paper and night.
• No location that should not be found. Dot density places dots at random inside an area, never at a record's position; sensitive atlases (Devrai) publish counts only.
• India's outline, not the basemap's. Themes draw no country or state names and no boundary lines from the tiles; the stage draws Survey of India's outline.
• Labels above data. Data goes under the first label layer; names that would overlap give way, smaller first.

Using it

<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/deck.gl@9.4.0/dist.min.js"></script>
<script type="module">
  import { createStage } from "https://maplore.in/kit/stage.js";
  import * as spine from "https://maplore.in/kit/spine.js";
  import { choropleth, wind } from "https://maplore.in/kit/reps.js";
  const stage = await createStage("map", { theme: "paper" });
  const [fc, v] = await Promise.all([spine.districts(), spine.values("machhar.dengue.pct_vs_past")]);
  const map = choropleth({ data: fc, value: (f) => v.get(f.id) ?? null, palette: "heat", method: "equal" });
  stage.set("dengue", map.layers, map.native);      // map.legend is the key, as HTML
</script>

Built on