The style, whether to draw labels, the tile cache size, and fonts.
Forgets the fetched tiles and sprite, and the decoded images.
ProtecteddrawDraws view onto renderer, which must already have the view's size.
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.
The view the image was rendered with.
Longitude and latitude, in degrees.
[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();
Renders one view of the map onto a canvas, to draw on top of it or to encode it in another format.
The canvas is width × scale by height × scale pixels. Its 2D context is in its
default state, except that it is scaled by scale: draw in the same units as
width and height. Encode it with canvas.encode('webp' | 'jpeg' | 'avif' | 'png')
or canvas.toBuffer(…).
The canvas records what is drawn and only paints the pixels when they are needed,
usually when it is encoded, so drawing more on it costs little. Reading pixels
(getImageData) paints everything recorded so far, every time it is called.
Size, centre, zoom and pixel density. All optional.
A Canvas of @napi-rs/canvas.
const canvas = await map.renderCanvas({ lon: 13.4, lat: 52.52, zoom: 12 });
await writeFile('berlin.webp', await canvas.encode('webp'));
To draw on the map, see the example on SVGMapRenderer.project.
Renders one view of the map as PNG.
Size, centre, zoom and pixel density. All optional.
The encoded PNG file, as described on renderToPNG.
Renders one view of the map as SVG. The result is a single self-contained SVG document, as described on renderToSVG.
Size, centre and zoom. All optional.
The SVG document, as a string beginning with <svg.
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.
The view the image was rendered with.
A position in the units of width and height.
[lon, lat] in degrees, or undefined where there is no map, and for a
position that is not a finite number.
Renders many views of one MapLibre style, as PNG or SVG.
An SVGMapRenderer that can also render PNG, sharing everything it keeps between the two formats: the parsed style, the sprite and the tiles. For PNG it also keeps the decoded tile and sprite images. Like renderToPNG, PNG rendering works in Node.js only.
Example: Render several views of one style