ChizuLocalStyletype
How one shape of a local map looks, over the look of its kind: colours as drawChizu's colors takes them (hex, a CSS
name, rgb(), hsl() or var(--name), anything else ignored), with a second for the dark look, and the classes
and custom properties of your own.
Import it
import type { ChizuLocalStyle } from "@johnmorrisdotca/chizu/draw";Definition
type ChizuLocalStyle = {
fill?: string;
stroke?: string;
strokeWidth?: number;
widthMetres?: number;
opacity?: number;
fillOpacity?: number;
dark?: {
fill?: string;
stroke?: string;
};
class?: string | readonly string[];
vars?: Readonly<Record<string, string>>;
};Members
| Name | Type | Description |
|---|---|---|
fill (optional) | string | undefined | |
stroke (optional) | string | undefined | |
strokeWidth (optional) | number | undefined | The line's width on the screen, in pixels (0 to 40), the same at every zoom. |
widthMetres (optional) | number | undefined | Or its width on the ground, in metres: a road 8 m wide is 8 m wide at every zoom (lines and outlines). |
opacity (optional) | number | undefined | Opacity of the whole shape, 0 to 1. |
fillOpacity (optional) | number | undefined | Opacity of the fill alone, 0 to 1. |
dark (optional) | { fill?: string; stroke?: string; } | undefined | The colours when the page is dark; they follow the light ones where missing. |
class (optional) | string | readonly string[] | undefined | Classes added to the shape, for your own CSS: letters, digits, |
vars (optional) | Readonly<Record<string, string>> | undefined | Custom properties for your own CSS, |
Examples
import type { ChizuLocalStyle } from "@johnmorrisdotca/chizu/draw";
const stand: ChizuLocalStyle = { fill: "#d9a441", dark: { fill: "#7a5a1c" }, stroke: "#5b3b00", strokeWidth: 2, class: "stand" };
console.log(Object.keys(stand).join(" "));
// fill dark stroke strokeWidth classfill dark stroke strokeWidth classWhat it prints (run when this page was built)