drawLocalfunction
A local map as SVG text: the ground, the caller's shapes in the order given (areas, lines, points), the pictures at
their places, true size and bearing, and optionally names, numbered callouts, a scale bar in metres and the credit
lines. A string, like drawChizu's, so it works on a server, in a build step and in innerHTML; the look is
CHIZU_STYLE and CHIZU_LOCAL_STYLE (style: true carries both inside).
Nothing is fetched. A unit of the canvas is data-metres-per-unit metres, written on the <svg>, and the viewBox
is in those units, so the window box is chosen with the same zoomBox, focusBox and regionBox as any map. The
pictures are the caller's own markup, cleaned of scripts and outside references (ChizuLocalMarkerInput).
Import it
import { drawLocal } from "@johnmorrisdotca/chizu/draw";Definition
function drawLocal(map: ChizuLocalMap, options?: ChizuLocalDrawOptions): stringParameters
| Name | Type | Description |
|---|---|---|
map | ChizuLocalMap | The local map to draw, from |
options (optional) | ChizuLocalDrawOptions | What to draw besides the shapes: labels, callouts, the scale bar, language and |
Returns
string
The drawing, as SVG text.
Examples
import { drawLocal } from "@johnmorrisdotca/chizu/draw";
import { localMap } from "@johnmorrisdotca/chizu";
const map = localMap({
centre: [139.7006, 35.7004],
widthMetres: 400,
data: { type: "Feature", id: "hall", properties: { name: "Hall", kind: "building" }, geometry: { type: "Polygon", coordinates: [[[139.6998, 35.6999], [139.7014, 35.6999], [139.7014, 35.7009], [139.6998, 35.7009], [139.6998, 35.6999]]] } },
credits: ["Shapes made up for this example"],
});
const svg = drawLocal(map, { labels: true, style: true });
console.log(svg.startsWith("<svg"), svg.includes('data-type="building"'), svg.includes("Shapes made up"));
// true true truetrue true trueWhat it prints (run when this page was built)