@deltabreen/maps-react-native

Maps by DeltaBreen in a React Native app: wrap the app once, then use @maplibre/maplibre-react-native exactly as you would. Every request to our tiles host carries a live token, renewed for free for a day, so one device is one map load a day.

npm install @deltabreen/maps-react-native @maplibre/maplibre-react-native

Create a publishable key under Keys and list your app as app:<bundle id> (the iOS bundle identifier and the Android package name; list both if they differ).

import { Camera, Map } from '@maplibre/maplibre-react-native'
import { MapsProvider, useMaps } from '@deltabreen/maps-react-native'

export default function App() {
  return (
    <MapsProvider apiKey="pk_…" appId="com.example.myapp">
      <Home />
    </MapsProvider>
  )
}

function Home() {
  const { ready, paused, styleUrl } = useMaps()
  if (paused) return <Text>Maps are paused for the month.</Text>
  if (!ready) return null
  return (
    <Map style={{ flex: 1 }} mapStyle={styleUrl('meadow')!}>
      <Camera initialViewState={{ center: [-6.26, 53.35], zoom: 12 }} />
    </Map>
  )
}

styleUrl takes a built-in look (meadow, midnight, neon, vintage, blueprint, sakura) or a published style URL from your dashboard. Render the map once ready so its first request already carries the token; several Maps share the one token. One app launch is one load: the token renews for free while the app runs, and a cold start is a new load. Use tokenUrl="https://your.api/map-token" instead of apiKey when your own server holds a secret key.

A map made in the dashboard

A map you made under Maps in your dashboard shows in one component, with its look, its pins (their colours, symbols and groups), its lines and areas, and a card for a tapped place with Open now, its address and buttons for directions, the website and a call. Edits you save in the dashboard show the next time it loads.

import { MapsProvider, SavedMap } from '@deltabreen/maps-react-native'

<MapsProvider apiKey="pk_…" appId="com.example.myapp">
  <SavedMap id="your-map-id" style={{ flex: 1 }} />
</MapsProvider>

onPressPlace={(place) => …} takes over from the card, selected={placeId} opens a place's card from outside the map (a list beside it, say) and moves the map to it, and labels puts its words in your app's language. For a list or a store locator of your own, usePlaces(id) gives the map's places and useLocator(places, { origin, radius, openNow }) sorts them nearest first, with each place's hours read by hoursNow.

Static map images: <Image source={{ uri, headers: imageHeaders }} /> with imageHeaders from useMaps(), so the key's app restriction is satisfied.

Needs @maplibre/maplibre-react-native 11 or later, for TransformRequestManager.

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