How this renderer works
This application uses
MapLibre GL JS
to render the PMTiles data with WebGL.
The PMTiles archive is exposed to MapLibre
through the PMTiles protocol.
Does it use vectors?
Yes. This application assumes that
test-map.pmtiles
contains vector tiles.
The MapLibre source is configured as
type: "vector".
The vector features are then rendered
according to their geometry type:
polygons become filled areas, lines become
lines, and points become circles.
How can it render one tile without
rendering the entire map?
PMTiles is an indexed tile archive.
The application doesn't need to decode
the entire archive to find one tile.
The PMTiles library can locate the requested
tile in the archive and retrieve the relevant
byte range.
In single-tile mode, the application converts
your latitude and longitude into an XYZ tile:
Latitude / Longitude
│
â–¼
XYZ conversion
│
â–¼
z / x / y
│
â–¼
PMTiles tile lookup
│
â–¼
Vector tile data
│
â–¼
MapLibre
│
â–¼
WebGL / GPU rendering
│
â–¼
256 × 256 canvas
│
â–¼
PNG
What does "Render single tile" do?
When enabled, the renderer requires an
integer zoom level, calculates the exact
z/x/y tile containing the
requested coordinate, creates a 256×256
MapLibre canvas, centers that canvas on the
selected tile, and exports it as a PNG.
It does not render the
entire PMTiles archive first.
What happens in normal mode?
Normal mode creates a larger viewport.
For example, a 2048×2048 image can cover a
large geographic area while MapLibre requests
the tiles needed for that viewport.
Important distinction
A PMTiles archive is the storage format.
MapLibre is the renderer. PMTiles tells the
application where the tile data is, while
MapLibre converts the vector geometries into
pixels using WebGL.