VersaTiles Frontend

VersaTiles Frontend provides pre-packaged web assets to serve interactive maps, compatible with versatiles-rs or node-versatiles-server. It follows the VersaTiles Frontend Specification

Available Frontends

• frontend: Full standard frontend with all fonts, sprites, and libraries.
• frontend-dev: Full standard frontend but with development-specific UI.
• frontend-min: Full standard frontend but with only Noto Sans fonts.
• frontend-tiny: Minimal frontend with sprites, MapLibre, VersaTiles style and Noto Sans fonts supporting only Latin characters.

See the latest release notes for details on included components and asset sizes.

Download the latest release.

You can download the packaged frontends as the latest release. Packages ending with *.tar.gz contain the original web frontend files. Packages ending with *.br.tar.gz contain the web frontend files pre-compressed with Brotli for faster serving.

Improve the frontends

Clone and Build

Clone the repository, install dependencies and build:

git clone git@github.com:versatiles-org/versatiles-frontend.git
cd versatiles-frontend
npm install
npm run build

This will generate all four frontends: frontend, frontend-dev, frontend-min and frontend-tiny.

• frontend*.tar.gz: Standard gzip-compressed container.
• frontend*.br.tar.gz: Precompressed with Brotli for fast serving.

Use a frontend with versatiles-rs

curl -L "https://github.com/versatiles-org/versatiles-frontend/releases/latest/download/frontend-dev.br.tar.gz" -o ./frontend.br.tar.gz
versatiles serve -s ./frontend.br.tar.gz "osm.versatiles"

Developer Guide

Run in Developer Mode

Start the development server:

npm run dev frontend
# or:
# npm run dev frontend-min
# npm run dev frontend-dev

Features:

• Serves at http://localhost:8080/.
• Proxies tile requests to tiles.versatiles.org.
• Watches for file changes and auto-rebuilds.
• You can also use a local tile server from a different local port by running:

versatiles serve -p 8081 osm.versatiles overlay.versatiles
# then run this in another shell
npm run dev -- -l 8081 frontend-dev

Project Structure

• cache/: Caches requests, compresses files.
• frontends/: Contains static files (HTML, CSS, JS).
• release/: Packaged frontend files.
• src/: TypeScript code for frontend generation and local serving.

Dependency Graph

---
config:
  layout: elk
---
flowchart TB

subgraph 0["src"]
subgraph 1["async_progress"]
2["async.ts"]
3["progress.ts"]
4["index.ts"]
end
5["build.ts"]
subgraph 6["files"]
7["filedbs.ts"]
8["filedb-external.ts"]
F["filedb.ts"]
H["file.ts"]
I["filedb-npm.ts"]
J["filedb-static.ts"]
R["source_config.ts"]
end
subgraph 9["utils"]
A["curl.ts"]
B["cache.ts"]
C["utils.ts"]
D["release_notes.ts"]
E["release_version.ts"]
G["parallel.ts"]
end
subgraph K["frontend"]
L["generate.ts"]
M["frontend.ts"]
N["load.ts"]
end
O["dev.ts"]
subgraph P["server"]
Q["server.ts"]
end
end
2-->3
4-->2
4-->3
5-->4
5-->7
5-->L
5-->D
5-->C
7-->4
7-->8
7-->I
7-->J
8-->A
8-->D
8-->E
8-->F
A-->B
B-->C
F-->G
F-->H
H-->B
I-->D
I-->F
J-->F
L-->4
L-->M
L-->N
O-->4
O-->7
O-->M
O-->N
O-->Q

class 0,1,6,9,K,P subgraphs;
classDef subgraphs fill-opacity:0.1, fill:#888, color:#888, stroke:#888;

Loading

Resources

VersaTiles Frontend uses several external resources and libraries, including:

• Fonts from VersaTiles Fonts
• Styles and sprites from VersaTiles Style
• MapLibre GL JS from MapLibre GL JS GitHub
• MapLibre GL Inspect from MapLibre GL Inspect GitHub