Desktop apps (Windows/macOS/Linux)
Desktop apps (Windows · macOS · Linux)
The official path for desktop is the Navvo Web SDK (@navvo/maps-js): it bundles its GL rendering engine, has zero runtime dependencies, and only ever talks to https://navvo.io — so any desktop shell that hosts a web view (Electron, Tauri, WebView2, WKWebView) gets the full platform: basemaps, markers, GeoJSON, live traffic/incidents/weather overlays and every NavvoServices call.
A minimal, runnable Electron sample is downloadable at docs.navvo.io/sdks (navvo-desktop-sample-0.1.0.tar.gz, self-contained — the Web SDK is vendored inside):
tar xzf navvo-desktop-sample-0.1.0.tar.gz && cd navvo-desktop-sample
npm install
# put your key (nvvo_…) into renderer.js → NAVVO_API_KEY
npm start
tiles, search, geocode, routing) — a desktop binary is inspectable like a mobile one.Electron essentials
The sample is three files. Main process (hardened window):
const { app, BrowserWindow } = require('electron');
app.whenReady().then(() => {
const win = new BrowserWindow({
width: 1280, height: 800,
webPreferences: { contextIsolation: true, nodeIntegration: false, sandbox: true },
});
win.loadFile('index.html');
});
Renderer (plain web — the UMD bundle exposes the global NavvoMaps):
<link rel="stylesheet" href="./node_modules/@navvo/maps-js/dist/navvo-maps.css" />
<script src="./node_modules/@navvo/maps-js/dist/navvo-maps.umd.js"></script>
<script>
const map = new NavvoMaps.Map({
container: 'map',
apiKey: 'nvvo_YOUR_KEY',
style: 'standard', // standard | positron | dark | satellite | terrain | 3d
center: [35.9106, 31.9539], // [lng, lat] — Amman
zoom: 12,
});
map.addControl(new NavvoMaps.NavigationControl(), 'top-right');
const services = new NavvoMaps.NavvoServices({ apiKey: 'nvvo_YOUR_KEY' });
</script>
Lock the page down with a CSP that only allows Navvo:
<meta http-equiv="Content-Security-Policy" content="
default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';
img-src 'self' data: blob:; connect-src 'self' https://navvo.io;
worker-src 'self' blob:; child-src blob:;" />
Package installers (electron-builder)
The sample ships an electron-builder config (appId: io.navvo.desktop.sample):
npm run dist:win # Windows → NSIS installer (.exe)
npm run dist:mac # macOS → .dmg (sign + notarize for distribution)
npm run dist:linux # Linux → AppImage (add deb/rpm targets as needed)
macOS artifacts must be built on macOS; Windows installers can be cross-built. The map needs no special OS entitlements — it is HTTPS-only web content.
Tauri alternative (smaller binaries)
The same index.html + renderer.js run unchanged in Tauri, which uses the OS webview instead of bundling Chromium (≈ 5–10 MB apps):
npm create tauri-app@latest(vanilla template) and copy the two files intosrc/.- Replace the
./node_modules/@navvo/maps-js/dist/…references with local copies ofnavvo-maps.umd.js+navvo-maps.css(both downloadable at docs.navvo.io/sdks). - Allow
https://navvo.ioinsrc-tauri/tauri.conf.json→app.security.csp(connect-src,img-src). npm run tauri build→ native.msi/.dmg/.deb/.AppImage.
Which SDK for which desktop case?
| Case | Use |
|---|---|
| Desktop app with a visible map | @navvo/maps-js in Electron/Tauri (this guide) |
| macOS-only app, existing iOS codebase | iOS SDK via Designed for iPad (see the iOS guide) |
| Headless desktop tool / CLI (no map) | server SDKs — Node, Python, Go, Java |
@navvo/maps-js — you only ever interact with Navvo classes and Navvo endpoints, and the © Navvo attribution must remain visible.