Skip to the content

Chizu地図

Draw SVG maps, frame regions, place numbered callouts and build geography quizzes with English and Japanese names.

Chizu is the Japanese word 地図 for map. About the name

Contents

Reference · Framing, geometry and quiz tools

localMapfunction

A local map: the ground of a city or a venue, from caller-given GeoJSON and pictures, in a projection made for a small piece of the earth. Nothing is fetched and no map data is added: what is drawn is what is passed in, with the credit lines the caller passes. A unit of the canvas is metresPerUnit metres (default: the longer side over 1,000), stated in projection, so a distance on the canvas is a distance on the ground. projectPoint and unprojectPoint work on it, and mapBoxFromLocal and localCanvasFromBox hand over to and from a world or country map.

Import it

import { localMap } from "@johnmorrisdotca/chizu";

Definition

function localMap(options: ChizuLocalOptions): ChizuLocalMap

Parameters

NameTypeDescription
optionsChizuLocalOptions

The centre, the width in metres, the data and pictures, and the credit lines.

Returns

ChizuLocalMap

The local map: a canvas in metres with its projection, shapes, pictures and credits.

Examples

import { groundDistance, localMap, projectPoint } from "@johnmorrisdotca/chizu";

const map = localMap({ centre: [-0.2795, 51.556], widthMetres: 1000, metresPerUnit: 1 });
const a = projectPoint(map, -0.2795, 51.556)!;
const b = projectPoint(map, -0.2795, 51.557)!;
// 0.001° of latitude is 111 m, and the canvas is in metres.
console.log(Math.round(Math.hypot(b[0] - a[0], b[1] - a[1])), Math.round(groundDistance([-0.2795, 51.556], [-0.2795, 51.557])));
// 111 111
111 111

What it prints (run when this page was built)

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/chizu 1.5.0.