This guide gets a Maimaps vector map on screen and explains the one billing concept you need to know before going live: the map load.

1. Install an SDK

Pick the SDK for your platform. Each one wraps the same API.

# Web (React)
npm install @maimaps/react maplibre-gl

# React Native
npm install @maimaps/react-native @maplibre/maplibre-react-native

# Flutter
flutter pub add maimaps_flutter

maplibre-gl and @maplibre/maplibre-react-native are peer dependencies, so you install them yourself and control the version.

2. Wrap your app in the provider

The provider builds a client from your key and hands it to every map component and hook below it. Do this once, at the root.

import { MaimapsProvider } from "@maimaps/react";

export default function App() {
  return (
    <MaimapsProvider apiKey="mk_test_your_key">
      <MapScreen />
    </MaimapsProvider>
  );
}

3. Render the map

import { MaimapsMap } from "@maimaps/react";

function MapScreen() {
  return (
    <MaimapsMap
      styleMode="dark"
      center={[7.4951, 9.0579]}
      zoom={12}
      style={{ height: "100vh" }}
    />
  );
}

That is a working map. The SDK loaded a keyed style document, then authenticated every tile, sprite, and glyph request behind it, without you touching a header.

In Flutter the widget takes a LatLng, so it reads in the familiar order:

const MaimapsMap(
  initialCenter: LatLng(9.0579, 7.4951),
  initialZoom: 12,
  myLocationEnabled: true,
);

Leave mode unset in Flutter and the map follows your app's ambient Theme brightness, so it switches to dark with the rest of your UI.

4. Understand what you just spent

This is the part worth internalizing before going live.

One style fetch is one map load, and the map load is the billed unit. Tiles are not billed. Panning, zooming, and rotating cost you nothing, no matter how many tiles they pull. Every account gets a monthly allowance of 10,000 map loads on a LIVE key, after which each one costs 5 credits. See Maimaps pricing for the full table.

The practical consequence: do not tear the map down and rebuild it. A component that unmounts and remounts on every route change fetches the style again each time, and each fetch is another map load. Keep the map mounted and move the camera instead.

5. Position the wordmark

Every Maimaps map renders the Maimaps wordmark. You can move it:

<MaimapsMap wordmarkPosition="top-right" />

Valid positions are bottom-left (the default), top-left, top-right, and bottom-right. There is no option to hide it, and removing it is a licence violation. Move it out of the way of your own UI instead.

What's next

Search, then route puts real data on the map.
Working with loccodes explains Maiaddy's address primitive, which shows up in nearly every response.
The Maimaps API reference documents every endpoint the SDKs wrap.