README
Canvas Map for Data Visualization
Canvas マップ -データビジュアライゼーションのための
How to Use
const { CanvasMap } = require('@cieloazul310/canvasmap');
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height);
map.renderBasemap('vector')
.then((map) => {
map.exportPng('map.png');
});
Installing
yarn add @cieloazul310/canvasmap
API Reference
class CanvasMap
const map = new CanvasMap(width, height, feature, options);
// or
const map = new CanvasMap(width, height, options);
constructor
number
width (required): 生成する地図の横幅
number
height (required): 生成する地図の縦幅
GeoJSON
| GeoJSON Feature
feature (optional): 地図の表示領域を地物、または GeoJSON オブジェクトで設定する
options (optional): object
- title?:
string
- padding?:
Partial<{ top: number; right: number; bottom: number; left: number }
- center?:
Position ([x, y])
- zoom?:
number
methods
getSize()
return: object { width: number; height: number }
getPadding()
return: object { top: number; right: number; bottom: number; left: number }
getCanvas()
return: Canvas
(node-canvas)
getContext()
return: CanvasRenderingContext2D
(node-canvas)
getProjection()
return: GeoProjection
(d3-geo)
getPath()
return: GeoPath
(d3-geo)
'raster' | 'vector'
, options?)
await renderBasemap(type: return: Promise<this>
(Promise object of CanvasMap class)
options:
- tileUrl:
string
; - rasterGrayScale:
boolean
; - background:
string
; - backgroundFeature:
Feature<Polygon | MultiPolygon> | FeatureCollection<Polygon | MultiPolygon>
; - attribution:
string
;
string
)
exportPng(fileName: return: this
(CanvasMap class)
string
)
exportJpg(fileName: return: this
(CanvasMap class)
string
)
addAttribution(attribution: return: this
(CanvasMap class)
getCanvasMapOptions()
return: object CanvasMapOptions
Recipes
Basic
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height);
map.renderBasemap('vector')
.then((map) => {
map.exportPng('map.png');
});
Use async/await
(async () => {
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height);
await map.renderBasemap('vector');
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.renderBasemap('vector');
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 and gallery