Canvas Map for Data Visualization
Canvas マップ -データビジュアライゼーションのための
Installing
npm install @cieloazul310/canvasmap
How to Use
Node (Vector map)
const { CanvasMap } = require("@cieloazul310/canvasmap");
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height, {
center: [140.4602, 36.3703],
zoom: 13,
});
map
.renderVectorMap()
.then((canvas) => {
canvas.exportPng("./dist/basic.png");
})
.catch((err) => console.error(err));
Node (Raster map)
const { CanvasMap } = require("@cieloazul310/canvasmap");
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height, {
center: [140.4602, 36.3703],
zoom: 13,
});
map
.renderRasterMap({
tileUrl: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg",
})
.then((canvas) => {
canvas.exportPng("./dist/basic.png");
})
.catch((err) => console.error(err));
Browser
import { CanvasMap } from "@cieloazul310/canvasmap/browser";
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height, {
center: [140.4602, 36.3703],
zoom: 13,
});
async function onClick() {
await map.renderVectorMap();
const canvas = map.getCanvas();
const contaienr = document.querySelector("#map");
container?.appendChild(container);
}
const button = document.querySelector("#rbutton");
button?.addEventListener("click", onClick);
API Reference
CanvasMap
(class)
const map = new CanvasMap(width, height, options);
Constructor
- width (required)
number
: 生成する地図の横幅 - height (required)
number
: 生成する地図の縦幅 - options (optional):
Partial<object>
name | type | |
---|---|---|
title | string |
Map title |
center | [number, number] |
The center of map view |
zoom | number |
Zoom level of map view |
theme | Partial<Theme> |
Map theme including padding, palette and fontSizes |
zoomDelta | number |
(if the zoom is 12 and the zoomDelta is 1, the tile zoom level will be 13 ; default to 1). |
zoomDelta: https://observablehq.com/@d3/tile-zoomdelta?collection=@d3/d3-tile
Common Methods
setCenter
-
arguments:
[number, number]
-
returns:
this
setZoom
-
arguments:
number
-
returns:
this
setZoomDelta
-
arguments:
number
-
returns:
this
setProjectionFitExtent
-
arguments:
Feature | FeatureCollection
-
returns:
this
setBBox
-
arguments:
bbox
([minX, minY, maxX, maxY]) -
returns:
this
setTitle
-
arguments:
string
-
returns:
this
addAttribution
-
arguments:
string
-
returns:
this
setTheme
-
arguments:
Partial<{ padding: Partial<Padding>; palette: Partial<Palette> }>
-
returns:
this
clearBBox
-
returns:
this
getSize
-
returns:
object { width: number; height: number }
getProjection
-
returns:
Projection
(d3-geo)
getZoom
-
returns:
number
getTiles
-
returns:
Tiles
(d3-tile)
CanvasMap
(node) Methods
getCanvas
-
returns:
Canvas
(node-canvas)
getContext
-
returns:
CanvasRenderingContext2D
(node-canvas)
getPath
-
returns:
GeoPath
(d3-geo)
async renderVectorMap
- arguments: Options (optional)
-
returns:
Promise<this>
name | types | |
---|---|---|
background | string |
Background color |
backgroundFeature | Feature | FeatureCollection |
Emphasized feature as background. |
layers | VectorLayerNames[] |
VectorLayerNames to render. |
VectorLayerNames
: "boundary"
| "building" | "contour" | "label" | "railway" | "road" | "symbol" | "waterarea"
async renderRasterMap
- arguments: Options(optional)
-
returns:
Promise<this>
name | types | |
---|---|---|
tileUrl | string |
Raster tile url (default to https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png ) |
tileSize | number |
Tile image size (default to 256) |
async exportPng
-
arguments:
- fileName:
string
- options:
PngOptions
(sharp)
- fileName:
-
returns:
Promise<this>
(CanvasMap class)
async exportJpg
-
arguments:
- filename:
string
- options:
JpegOptions
(sharp)
- filename:
-
returns:
Promise<this>
(CanvasMap class)
async exportWebp
-
arguments:
- filename:
string
- options:
WebpOptions
(sharp)
- filename:
-
returns:
Promise<this>
(CanvasMap class)
CanvasMap
(browser) Methods
getCanvas
-
returns:
HTMLCanvasElement
getContext
-
returns:
CanvasRenderingContext2D
getPath
-
returns:
GeoPath
(d3-geo)
async renderVectorMap
- arguments: Options (optional)
-
returns:
Promise<this>
name | types | |
---|---|---|
background | string |
Background color or none
|
backgroundFeature | Feature | FeatureCollection |
Emphasized feature as background. |
layers | VectorLayerNames[] |
VectorLayerNames to render. |
VectorLayerNames
: "boundary"
| "building" | "contour" | "label" | "railway" | "road" | "symbol" | "waterarea"
async renderRasterMap
- arguments: Options(optional)
-
returns:
Promise<this>
name | types | |
---|---|---|
tileUrl | string |
Raster tile url (default to https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png ) |
tileSize | number |
Tile image size (default to 256) |
Recipes
Basic
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height);
map.renderVectorMap()
.then((map) => {
map.exportPng('map.png');
});
Use async/await
(async () => {
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height);
await map.renderVectorMap();
map.exportPng('map.png');
})();
Draw GeoJSON
const geojson = JSON.parse(fs.readFileSync('gj.geojson', 'utf8'));
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height, geojson);
await map.renderVectorMap();
const context = map.getContext();
const path = map.getPath();
// draw features
geojson.features.forEach((feature) => {
context.beginPath();
path(feature);
context.fillStyle = '#aaf';
context.fill();
});
map.exportPng('map.png');
Browse example codes