Skip to content

map

The high-level engines that wire a core!Scene, a backend, and d3-zoom together: geoMap (a project-once map engine over GeoJSON) and plot (a generic 2D engine driven by per-datum draw callbacks). createBackend selects the rendering backend by BackendType.

import { plot } from "@mapequation/d3gl/map";
plot(el, { width, height }).layer("links", data, {
draw: (ctx, d) => { ctx.moveTo(d.x0, d.y0); ctx.lineTo(d.x1, d.y1); },
stroke: "#888",
});
ClassDescription
GeoMap-
HighlightBuilderBuilder handed to custom hover/highlight draw fns, scoped to ONE source drawable. Everything recorded lands in the overlay group (drawn on top, inheriting the source layer’s clipTo/sizeMode). World coordinates throughout. Geometry comes from the Scene’s already-projected subpaths/circles — no re-projection, no datum re-processing.
LayerHandleA handle to one registered layer, returned by GeoMap.layer, Plot.layer, and Plot.points. Lets you stream more data into the layer via append without re-projecting or re-building the features already in it.
Plot-
TooltipA single shared, absolutely-positioned, pointer-events-none tooltip div in the host. Created lazily on first show; default inline look unless a className is given (then styling is entirely the caller’s). Always carries d3gl-tooltip.
InterfaceDescription
BackendHandle-
BaseEngineOptionsOptions every engine shares, owned and consumed once by the BaseEngine constructor. Each engine’s options type (e.g. GeoMapOptions, PlotOptions) extends this and adds only its own fields, so a base-level setting is declared in exactly one place and can’t drift or be silently dropped by an engine that forgot to wire it.
EngineSizingHow an engine is sized. Sizing is responsive by default — the engine observes its host and resizes in place (no teardown), preserving layers, view, and interaction state:
GeoMapOptionsOptions every engine shares, owned and consumed once by the BaseEngine constructor. Each engine’s options type (e.g. GeoMapOptions, PlotOptions) extends this and adds only its own fields, so a base-level setting is declared in exactly one place and can’t drift or be silently dropped by an engine that forgot to wire it.
HighlightStyleStyle for highlight-overlay geometry. Unlike bulk StyleOverrides, lineWidth IS allowed: only one item is re-tessellated per hover change.
HoverHit-
InteractiveLayerOptionsDeclarative interaction options shared by every engine’s retained layers. The machinery (hover overlay, tooltip, selection styling, hit-testing) lives entirely in BaseEngine — these options are just the per-layer surface that both BaseEngine.select’s and the hover/tooltip dispatch read. Plot.layer()/Plot.points() and GeoMap.layer() forward them into the LayerSpec via BaseEngine.interactionFields, so the contract has one home.
LayerOptionsDeclarative interaction options shared by every engine’s retained layers. The machinery (hover overlay, tooltip, selection styling, hit-testing) lives entirely in BaseEngine — these options are just the per-layer surface that both BaseEngine.select’s and the hover/tooltip dispatch read. Plot.layer()/Plot.points() and GeoMap.layer() forward them into the LayerSpec via BaseEngine.interactionFields, so the contract has one home.
PlotLayerOptionsDeclarative interaction options shared by every engine’s retained layers. The machinery (hover overlay, tooltip, selection styling, hit-testing) lives entirely in BaseEngine — these options are just the per-layer surface that both BaseEngine.select’s and the hover/tooltip dispatch read. Plot.layer()/Plot.points() and GeoMap.layer() forward them into the LayerSpec via BaseEngine.interactionFields, so the contract has one home.
PlotOptionsPlot adds no engine-level options of its own — all of BaseEngineOptions (sizing, backend, tooltipClass) apply.
PlotPointOptionsDeclarative interaction options shared by every engine’s retained layers. The machinery (hover overlay, tooltip, selection styling, hit-testing) lives entirely in BaseEngine — these options are just the per-layer surface that both BaseEngine.select’s and the hover/tooltip dispatch read. Plot.layer()/Plot.points() and GeoMap.layer() forward them into the LayerSpec via BaseEngine.interactionFields, so the contract has one home.
SelectionOptionsStyles for select(): the selected set and its complement. Defaults: selected keeps the base style (items stand out because the others dim); others is { opacity: 0.3 }.
StyleOverrideBulk per-drawable style override, composed over the base colors the layer’s fill/stroke accessors produce. Colors only — stroke geometry has its width baked in at tessellation time, so a bulk width change would be O(n) re-tessellation (widths are available in the single-item highlight overlay instead).
Type AliasDescription
BackendTypeWhich renderer an engine (GeoMap / Plot, or the React <GeoMap>) draws the core!Scene with. Geometry is projected & tessellated once (backend-independent); the backend only turns it into pixels (or SVG nodes). Defaults to "webgl".
HChildA minimal hyperscript helper: build a detached DOM element tree declaratively, with no framework and no HTML-string parsing. It’s the un-sugared React.createElement model — handy for the rich content the engine tooltip option accepts ((d) => HTMLElement), or any HTML overlay.
HighlightDraw-
HoverOptionThe hover layer option: true = default style, a style = replay with it, a function = full custom draw of the hovered item.
FunctionDescription
createBackend-
createCanvasBackendSynchronously create a Canvas backend + its element. Used by the engine’s “auto” mode for an instant (non-async) first paint before the WebGL device is ready.
geoMap-
h-
plot-