versatiles-svg-renderer
    Preparing search index...

    Function renderToPNG

    • Renders a MapLibre style to a PNG image.

      Takes the same options as renderToSVG and draws the same map, but rasterizes it directly instead of producing SVG — no browser or SVG rasterizer needed. Satellite and other raster tiles in WebP work too, which many SVG rasterizers cannot decode.

      Each call starts from scratch: it parses the style and fetches the tiles and the sprite again. To render many views of one style, use PNGMapRenderer, which keeps them between renders.

      Node.js only. It draws with the native canvas backend @napi-rs/canvas, a dependency of this package that npm installs together with it, including the prebuilt binary for the platform. If that binary is missing (e.g. installed with --omit=optional, or node_modules copied from another OS or CPU architecture), this function throws an error that names the platform and the missing package.

      Parameters

      • options: RenderToPNGOptions

        What to render, how large, and at what pixel density. Only style is required.

      Returns Promise<Uint8Array<ArrayBufferLike>>

      The encoded PNG file. It is typed as a Uint8Array so that using this package does not require Node's type definitions; at runtime it is a Node Buffer, and either way it can be written with fs.writeFile as is.

      import { renderToPNG } from '@versatiles/png-renderer';
      import { writeFile } from 'node:fs/promises';

      const url = 'https://tiles.versatiles.org/assets/styles/colorful/style.json';
      const style = await (await fetch(url)).json();

      const png = await renderToPNG({ style, lon: 13.4, lat: 52.52, zoom: 12 });
      await writeFile('berlin.png', png);

      const png = await renderToPNG({
        style,
        lon: 13.4,
        lat: 52.52,
        zoom: 14,
        labels: 'text',
        fonts: { noto_sans_regular: 'fonts/NotoSans-Regular.ttf', noto_sans_bold: 'fonts/NotoSans-Bold.ttf' },
      });

      If the @napi-rs/canvas binary cannot be loaded, if width, height or scale is not positive, or if a font in fonts cannot be loaded.

    Settings
    Member Visibility