Navvo
Guides

Desktop apps (Windows/macOS/Linux)

Ship Navvo Maps in native Windows, macOS and Linux desktop apps with Electron or Tauri on top of @navvo/maps-js — plus a ready-made runnable sample.

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
Provide your API key. Without a key the basemap renders with the "Navvo Map Developer (Provide Your API Key)" watermark. Keys come from navvo.io/developer; ship a dedicated minimal-scope key (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):

  1. npm create tauri-app@latest (vanilla template) and copy the two files into src/.
  2. Replace the ./node_modules/@navvo/maps-js/dist/… references with local copies of navvo-maps.umd.js + navvo-maps.css (both downloadable at docs.navvo.io/sdks).
  3. Allow https://navvo.io in src-tauri/tauri.conf.jsonapp.security.csp (connect-src, img-src).
  4. npm run tauri build → native .msi / .dmg / .deb / .AppImage.

Which SDK for which desktop case?

CaseUse
Desktop app with a visible map@navvo/maps-js in Electron/Tauri (this guide)
macOS-only app, existing iOS codebaseiOS SDK via Designed for iPad (see the iOS guide)
Headless desktop tool / CLI (no map)server SDKs — Node, Python, Go, Java
The map renders via an embedded open-source engine bundled inside @navvo/maps-js — you only ever interact with Navvo classes and Navvo endpoints, and the © Navvo attribution must remain visible.
Copyright © 2026