JSPM

geowarp-canvas

0.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 632
  • Score
    100M100P100Q99907F
  • License CC0-1.0

Adds HTML Canvas Support to GeoWarp

Package Exports

  • geowarp-canvas
  • geowarp-canvas/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (geowarp-canvas) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

geowarp-canvas

motivation

Make it easier to display geospatial data on an HTML Canvas Element

design philosophy

geowarp-canvas is designed as a decorator. This library is highly experimental, so this may change in the future. The idea is to find a way to add capabilities to geowarp without adding too much complexity to geowarp core.

usage

import geowarp_core from "geowarp";
import geowarp_canvas from "geowarp-canvas";

const geowarp = geowarp_canvas(geowarp_core);

const canvas = document.createElement("CANVAS");
canvas.height = 256;
canvas.width = 256;

geowarp({
  // required
  // activate geowarp-canvas plugin
  plugins: ["geowarp-canvas"],

  // required
  // this is the canvas that we will paint on
  out_canvas: canvas,

  // optional
  // array of statistics by band
  // could greatly increase speed
  in_stats: [{ min: 0, max: 12345 }, { min: 0, max: 10567 }],

  // optional
  // paint the background of the canvas this color
  // before painting valid data
  out_no_data_color: "pink",

  // optional - experimental
  // draw at a quarter of the real resolution
  out_resolution: [0.25, 0.25],

  // optional
  // custom draw function
  draw: ({ 
    bbox: [xmin, ymin, xmax, ymax], // location of pixel rectangble in un-rounded canvas image coordinates from top-left
    canvas, // same as out_canvas, the canvas you are painting to
    context, // context for the out_canvas
    color, // CSS Color Value, like "rgba(0, 12, 54, 255)"
    pixel, // raw pixel values (before band expression applied)
    rect: [x, y, width, height], // params for fillRect or strokeRect
    rgba, // pixel as [r, g, b, a]
    cell: [row, column], // cell location at current resolution
    resolution: [x_resolution, y_resolution],
    scale: [x_scale, y_scale],
    points: [source_point, target_point], // pixel centroid in projection of data and canvas, only available when method is "near" and turbo is false
    sample: [column_in_data, row_in_data]
  }) => {
    context.fillStyle(color);
    context.fillRect(...rect);
  },

  // optional
  // called with mutable options object that will be passed to geowarp
  before_warp: (options) => {
    const { expr, out_height, skip_no_data_strategy, ...rest } = options;
    // ...
  },

  // optional
  // called after warping with result returned by geowarp
  after_warp: (result) => {
    console.log("result returned by geowarp:", result);
  },

  // optional
  // paint or modify the canvas before
  // drawing the rectangle for the reprojected pixel
  before_draw: ({ bbox, ...rest }) => { },

  // optional
  after_draw: ({ bbox, canvas, context, color, pixel, point, rect, rgba, resolution, scale }) => {
    // put red outline around drawn pixel rectangle
    context.strokeStyle = "red";
    context.strokeRect(...rect);
  },

  // optional
  // array of colors where each index number corresponds to a pixel value
  // each color can be [r, g, b, a], [r, g, b] or "rgb(112, 108, 96)" (CSS Color Values)
  palette: [
    [ 112, 108, 96, 255 ],
    [ 112, 104, 80, 255 ]
    // ...
  ],

  // flip between black-to-white and white-to-black
  flip: true

  // all other params are inherited from
  // https://github.com/danieljdufour/geowarp
});