versatiles-svg-renderer
    Preparing search index...

    Class SVGMapRenderer

    Renders many views of one MapLibre style as SVG.

    Does the work that depends only on the style once, when constructed or on the first render, instead of on every call as renderToSVG does: the style is parsed once, and the sprite (the icons, needed with labels) and the glyphs are fetched once. Tiles are kept too (up to SVGMapRendererOptions.tileCacheSize), so overlapping views share them. Use it to render a batch of views, e.g. thumbnails or a series of map sections.

    The style is read when the instance is created and is expected not to change afterwards; to render a changed style, create a new instance. Renders may run concurrently.

    import { SVGMapRenderer } from '@versatiles/svg-renderer';

    const map = new SVGMapRenderer({ style });

    const berlin = await map.renderSVG({ lon: 13.4, lat: 52.52, zoom: 12 });
    const potsdam = await map.renderSVG({ lon: 13.06, lat: 52.4, zoom: 12 });

    Hierarchy (View Summary)

    Index
    • Parameters

      • options: SVGMapRendererOptions

        The style, whether to draw labels, the tile cache size, how to load tiles and sprites, and where to report unsupported parts of the style.

      Returns SVGMapRenderer

      If tileCacheSize is negative or not a number.

    • Forgets the fetched tiles, sprite, TileJSON documents and GeoJSON data, so the next render fetches them again, e.g. after they were updated on the server, or to free their memory.

      Returns void

    • Draws view onto renderer, which must already have the view's size.

      Type Parameters

      • R extends Renderer

      Parameters

      Returns Promise<R>

    • Where a coordinate lands in the image of view: its position in the units of width and height, the same in the SVG and on the canvas of renderCanvas. Use it to place your own drawing on the map.

      On the globe, a coordinate on its far side is hidden; then this returns undefined. A position outside the image is returned as is, so it can lie beyond width and height, or be negative. The map ends at about ±85.05° latitude, as in MapLibre: a latitude beyond that, up to the poles, gives the position of the map's edge.

      Parameters

      • view: ViewOptions

        The view the image was rendered with.

      • lonLat: [number, number]

        Longitude and latitude, in degrees.

      Returns [number, number] | undefined

      [x, y], or undefined for a point hidden on the globe, and for a longitude or latitude that is not a finite number.

      const view = { lon: 13.4, lat: 52.52, zoom: 12 };
      const canvas = await map.renderCanvas(view);
      const [x, y] = map.project(view, [13.3777, 52.5163])!; // Brandenburg Gate
      const ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.arc(x, y, 6, 0, 2 * Math.PI);
      ctx.fill();

      If width or height is not positive.

    • Renders one view of the map as SVG. The result is a single self-contained SVG document, as described on renderToSVG.

      Parameters

      • view: ViewOptions = {}

        Size, centre and zoom. All optional.

      Returns Promise<string>

      The SVG document, as a string beginning with <svg.

      If width or height is not positive.

    • The opposite of SVGMapRenderer.project: the coordinate shown at a position in the image of view, e.g. where a user clicked on it.

      Where the image shows no map — next to the globe, or beyond the poles of the mercator map (about ±85°) — this returns undefined. The longitude is between -180 and 180.

      Parameters

      • view: ViewOptions

        The view the image was rendered with.

      • xy: [number, number]

        A position in the units of width and height.

      Returns [number, number] | undefined

      [lon, lat] in degrees, or undefined where there is no map, and for a position that is not a finite number.

      If width or height is not positive.