> ## 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.

# JavaScript

> Integrate the Baato API into web projects with the official JavaScript client.

The JavaScript client wraps the Baato API in a fluent builder, decodes route geometry for
you, and works both as an npm package and as a standalone browser bundle.

<Columns cols={2}>
  <Card title="npm" icon="npm" href="https://www.npmjs.com/package/@klltech/baato-js-client" horizontal>
    `@klltech/baato-js-client`
  </Card>

  <Card title="Runnable examples" icon="globe" href="/examples/html/display-map" horizontal>
    Complete HTML pages using the bundle.
  </Card>
</Columns>

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install --save @klltech/baato-js-client
  ```

  ```bash yarn theme={null}
  yarn add @klltech/baato-js-client
  ```

  ```bash pnpm theme={null}
  pnpm add @klltech/baato-js-client
  ```

  ```html CDN theme={null}
  <script src="https://www.unpkg.com/@klltech/baato-js-client@1.2.0/dist/bundle.js"></script>
  ```
</CodeGroup>

The CDN bundle exposes a global `Baato` object — no build step required. That is what the
[HTML examples](/examples/html/autocomplete) use.

## Usage

Every service follows the same shape: construct, chain setters, call `doRequest()`, get a
promise back.

<AccordionGroup>
  <Accordion title="Search — place suggestions" icon="magnifying-glass" defaultOpen>
    ```javascript theme={null}
    import Baato from "@klltech/baato-js-client";

    new Baato.Search()
      .setApiVersion("1.0")                    // default
      .setBaseUrl("https://api.baato.io/api")  // default
      .setKey("YOUR_BAATO_ACCESS_TOKEN")
      .setQuery("kathmandu")                   // the keyword to search for
      .setLimit(5)                             // cap the number of results
      .doRequest()
      .then((response) => {
        console.log(response);
      });
    ```

    Search results carry no coordinates — pass a result's `placeId` to `Baato.Places()` to
    get them. See [the two-step search flow](/about/concepts#identifying-a-place).
  </Accordion>

  <Accordion title="Places — full detail for a place ID" icon="location-dot">
    ```javascript theme={null}
    import Baato from "@klltech/baato-js-client";

    new Baato.Places()
      .setApiVersion("1.0")
      .setBaseUrl("https://api.baato.io/api")
      .setKey("YOUR_BAATO_ACCESS_TOKEN")
      .setPlaceId("110023")
      .doRequest()
      .then((response) => {
        console.log(response);
      });
    ```
  </Accordion>

  <Accordion title="Reverse Search — coordinates to an address" icon="location-crosshairs">
    ```javascript theme={null}
    import Baato from "@klltech/baato-js-client";

    new Baato.Reverse()
      .setApiVersion("1.0")
      .setBaseUrl("https://api.baato.io/api")
      .setKey("YOUR_BAATO_ACCESS_TOKEN")
      .setCoordinates([27.7172, 85.3240]) // [latitude, longitude]
      .setLimit(5)
      .doRequest()
      .then((response) => {
        console.log(response);
      });
    ```

    <Warning>
      `setCoordinates` takes `[latitude, longitude]` — the opposite order from the
      `[lng, lat]` arrays MapLibre and Mapbox GL use. See
      [coordinate order](/about/concepts#coordinate-order).
    </Warning>
  </Accordion>

  <Accordion title="Routing — directions between points" icon="route">
    ```javascript theme={null}
    import Baato from "@klltech/baato-js-client";

    const points = ["27.71772,85.32784", "27.73449,85.33714"];

    new Baato.Routing({ key: "YOUR_BAATO_ACCESS_TOKEN" })
      .setApiVersion("1.0")
      .setBaseUrl("https://api.baato.io/api")
      .setKey("YOUR_BAATO_ACCESS_TOKEN")
      .addPoints(points)      // waypoints, as "lat,lon" strings
      .setVehicle("car")      // car, bike or foot
      .getBest()
      .doRequest()
      .then((routes) => {
        console.log(routes);
      });
    ```

    <Tip>
      Routing results arrive with the encoded polyline already decoded — each route carries a
      ready-to-render `geojson` property, so you can hand it straight to a map source.
    </Tip>
  </Accordion>
</AccordionGroup>

## Converting results to GeoJSON

`Baato.Util()` turns a search response into a GeoJSON `FeatureCollection`:

```javascript theme={null}
const geojson = new Baato.Util().getGeoJsonFromSearchResults(response);
```

## Next

<Columns cols={2}>
  <Card title="Display a map" icon="map" href="/examples/html/display-map">
    A complete page with MapLibre and Mapbox GL.
  </Card>

  <Card title="Autocomplete" icon="magnifying-glass" href="/examples/html/autocomplete">
    A working search box wired to the client.
  </Card>
</Columns>