@deltabreen/nativescript-maps

Maps by DeltaBreen for NativeScript on iOS and Android: MapLibre maps on our tiles in six looks and 41 label languages, and maps made in your dashboard with their pins, groups, lines and areas. Built on @nativescript-community/ui-maplibre. Free to start, flat plans, and never an overage bill.

npm install @deltabreen/nativescript-maps @nativescript-community/ui-maplibre

1. In your dashboard, make a publishable key and add your app to its sites as app:<bundle id> (the iOS bundle id or Android package name, e.g. app:com.example.shops). The view sends it with every map, so the key works only in your app.
2. Put the view on a page:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:map="@deltabreen/nativescript-maps">
  <map:DeltabreenMapView apiKey="pk_…" look="meadow" center="-6.26,53.35" zoom="12" height="400" />
</Page>

• look: meadow, midnight, neon, vintage, blueprint, sakura, or a published style's id (id@3 for one version).
• language: label language such as de or ja; local names when left out.
• mapId: a map made in your dashboard (Maps → the map's id). Its pins, groups, lines and areas are drawn on the map and it opens on the map's own camera; edits saved in the dashboard show the next time the map loads.
• pins: your own pins as { lng, lat, title?, color? }[], drawn as coloured dots (set it from code or a binding).
• apiUrl: only for a stack of your own.

Each time the view loads a map counts one map load, however long it stays open and however much it is panned. A map's token lasts a day, so a view left open, or an app back from the background after about 20 hours, loads it once more. The view is a MapLibreView, so getMap() gives you ui-maplibre's map for your own layers and camera.

Angular, Vue and Svelte: register the view as an element, as for any NativeScript view:

registerElement('DeltabreenMapView', () => require('@deltabreen/nativescript-maps').DeltabreenMapView)

Docs: https://maps.deltabreen.eu/docs#nativescript