drawChizufunction
A map as SVG text: the sea, every region's land with its tone, the frames of its insets, and optionally the names
and the numbered callouts. A string, so it works on a server, in a build step, in an email or in innerHTML; the
look comes from CHIZU_STYLE (set style: true to carry it inside).
Each region is a <g class="cz-region" data-code="…"> holding a <path class="cz-land"> for each piece (an inset's
region is one piece moved into its box). On a map that wraps, a window that overhangs the cut draws the land again
on the other side.
Import it
import { drawChizu } from "@johnmorrisdotca/chizu/draw";Definition
function drawChizu(map: ChizuMap, options?: ChizuDrawOptions): stringParameters
| Name | Type | Description |
|---|---|---|
map | ChizuMap | The native map or map fields required by this signature; coordinates and region codes belong to its canvas. |
options (optional) | ChizuDrawOptions | The optional native drawing, matching, layout or quiz settings described by this signature. |
Returns
string
The SVG text of the native map, with the requested layers, tones, labels and callouts.
Examples
import WORLD from "@johnmorrisdotca/chizu/world";
import { drawChizu } from "@johnmorrisdotca/chizu/draw";
import { focusBox } from "@johnmorrisdotca/chizu";
const svg = drawChizu(WORLD, { box: focusBox(WORLD, ["JP"]), tones: { JP: "selected" }, labels: ["JP"], language: "ja" });
console.log(svg.startsWith("<svg"), svg.includes("<title>日本</title>"));
// true truetrue trueWhat it prints (run when this page was built)