@cieloazul310/canvasmap

Generate plain map for data visualization.

Usage no npm install needed!

<script type="module">
  import cieloazul310Canvasmap from 'https://cdn.skypack.dev/@cieloazul310/canvasmap';
</script>

README

Canvas Map for Data Visualization

Canvas マップ -データビジュアライゼーションのための

npm version

Gallery

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

width (required): number

生成する地図の横幅

height (required): number

生成する地図の縦幅

feature (optional): GeoJSON | GeoJSON Feature

地図の表示領域を地物、または 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)

await renderBasemap(type: 'raster' | 'vector', options?)

return: Promise<this> (Promise object of CanvasMap class)

options:

  • tileUrl: string;
  • rasterGrayScale: boolean;
  • background: string;
  • backgroundFeature: Feature<Polygon | MultiPolygon> | FeatureCollection<Polygon | MultiPolygon> ;
  • attribution: string;
exportPng(fileName: string)

return: this (CanvasMap class)

exportJpg(fileName: string)

return: this (CanvasMap class)

addAttribution(attribution: string)

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

References