> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baato.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Go from zero to your first Baato response in about five minutes.

This page takes you from an empty project to a working search request and a rendered map.
Everything here runs against the live API — you only need a free account.

<Steps>
  <Step title="Create a Baato account">
    Sign up at [baato.io/signup](https://baato.io/signup). Every account gets Rs. 10,000 of
    usage each month at no charge — around 200,000 map loads, which is plenty for
    development. See [pricing and limits](/resources/limits) for the per-API rates.
  </Step>

  <Step title="Grab your access token">
    Baato creates a `_default` access token for you the moment you sign up, so there is
    nothing to configure. Find it in your [dashboard](https://baato.io/account).

    <Note>
      Every Baato endpoint takes the token as a `key` query parameter. See
      [Authentication](/about/authentication) for token limits and how to lock a token to
      your own domains.
    </Note>
  </Step>

  <Step title="Make your first request">
    Search for a place by keyword. Replace `YOUR_BAATO_ACCESS_TOKEN` with the token from the
    previous step.

    <CodeGroup>
      ```bash curl theme={null}
      curl -G https://api.baato.io/api/v1/search \
        --data-urlencode "key=YOUR_BAATO_ACCESS_TOKEN" \
        --data-urlencode "q=Patan Durbar Square" \
        --data-urlencode "limit=5"
      ```

      ```javascript JavaScript theme={null}
      const params = new URLSearchParams({
        key: "YOUR_BAATO_ACCESS_TOKEN",
        q: "Patan Durbar Square",
        limit: "5",
      });

      const response = await fetch(`https://api.baato.io/api/v1/search?${params}`);
      const { data } = await response.json();

      console.log(data);
      ```

      ```python Python theme={null}
      import requests

      response = requests.get(
          "https://api.baato.io/api/v1/search",
          params={
              "key": "YOUR_BAATO_ACCESS_TOKEN",
              "q": "Patan Durbar Square",
              "limit": 5,
          },
      )

      print(response.json()["data"])
      ```

      ```dart Dart theme={null}
      final uri = Uri.https("api.baato.io", "/api/v1/search", {
        "key": "YOUR_BAATO_ACCESS_TOKEN",
        "q": "Patan Durbar Square",
        "limit": "5",
      });

      final response = await http.get(uri);
      final data = jsonDecode(response.body)["data"];
      ```

      ```kotlin Kotlin theme={null}
      val url = "https://api.baato.io/api/v1/search".toHttpUrl().newBuilder()
          .addQueryParameter("key", "YOUR_BAATO_ACCESS_TOKEN")
          .addQueryParameter("q", "Patan Durbar Square")
          .addQueryParameter("limit", "5")
          .build()

      val response = client.newCall(Request.Builder().url(url).build()).execute()
      ```
    </CodeGroup>

    Every Baato response is wrapped in the same envelope — `timestamp`, `status` and
    `message` alongside the `data` you asked for:

    ```json Response theme={null}
    {
      "timestamp": "Thu May 14 07:35:16 NPT 2020",
      "status": 200,
      "message": "Success",
      "data": [
        {
          "placeId": 344470,
          "name": "Patan Durbar Square",
          "address": "Mangal Bazar, Lalitpur, Bagmati, Nepal",
          "type": "attraction",
          "score": 41.5
        }
      ]
    }
    ```

    <Tip>
      Search results deliberately leave out coordinates to keep autocomplete responses
      small. Pass a result's `placeId` to the [Places API](/services/places) when you need
      its centroid and geometry.
    </Tip>
  </Step>

  <Step title="Put a map on the screen">
    Baato serves vector map styles that any MapLibre or Mapbox GL renderer understands. The
    style URL *is* the integration — there is no separate SDK to install for the web.

    ```html theme={null}
    <link href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script>

    <div id="map" style="position: absolute; inset: 0;"></div>

    <script>
      new maplibregl.Map({
        container: "map",
        style: "https://api.baato.io/api/v1/styles/breeze?key=YOUR_BAATO_ACCESS_TOKEN",
        center: [85.3240, 27.7172], // [lng, lat] — note the order
        zoom: 12,
      });
    </script>
    ```

    <Warning>
      Baato query parameters take `lat` and `lon` separately, but MapLibre and GeoJSON take
      `[lon, lat]` pairs. Mixing the two up is the single most common Baato integration bug
      — see [Core concepts](/about/concepts#coordinate-order).
    </Warning>
  </Step>
</Steps>

## Pick your platform

The guides below cover the same ground — display a map, search, reverse geocode, draw a
route — in the idiom of each platform.

<Columns cols={3}>
  <Card title="Web" icon="globe" href="/libraries/javascript">
    MapLibre or Mapbox GL JS with the Baato JavaScript client.
  </Card>

  <Card title="Android" icon="android" href="/libraries/java">
    The Java client, plus the Navigation SDK for turn-by-turn.
  </Card>

  <Card title="iOS" icon="apple" href="/libraries/swift">
    BaatoSwift via CocoaPods.
  </Card>

  <Card title="Flutter" icon="mobile-screen" href="/libraries/flutter">
    The `baato_maps` package — widgets and API client in one.
  </Card>

  <Card title="React Native" icon="react" href="/examples/react-native/setup">
    Expo and bare React Native with MapLibre React Native.
  </Card>

  <Card title="Server-side" icon="server" href="/libraries/python">
    Python and Go clients for backend workloads.
  </Card>
</Columns>

## Next steps

<Columns cols={2}>
  <Card title="Core concepts" icon="lightbulb" href="/about/concepts">
    Coordinate order, place IDs, encoded polylines and the response envelope.
  </Card>

  <Card title="API reference" icon="code" href="/services/overview">
    All six endpoints, with an interactive playground.
  </Card>

  <Card title="Pricing and limits" icon="gauge" href="/resources/limits">
    Per-API rates, the free monthly credit, and caching rules.
  </Card>

  <Card title="Attribution" icon="copyright" href="/resources/attribution">
    What you need to display when you use Baato maps.
  </Card>
</Columns>