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

# Map Styles API

> Vector map styles following the Mapbox Style Specification.

## Available styles

<Note>
  This table is the canonical list of style names. Other pages in these docs link here rather
  than repeating it.
</Note>

| Style name    | Look                                                                       |
| ------------- | -------------------------------------------------------------------------- |
| `breeze`      | Light and airy, with subtle colours and clear typography. Baato's default. |
| `monochrome`  | Greyscale — black, white and shades of grey.                               |
| `dark`        | High-contrast dark theme.                                                  |
| `retro`       | Vintage-inspired, classic cartographic look.                               |
| `roads`       | Road-focused, with other features de-emphasised.                           |
| `black_white` | High-contrast black and white.                                             |

<Columns cols={3}>
  <Frame caption="breeze">
    <img src="https://mintcdn.com/baato/3GUKEGLT42m2snov/images/examples/baato_breeze_map.png?fit=max&auto=format&n=3GUKEGLT42m2snov&q=85&s=6fa56b32e0c0dd51ca8f5af8c34d8093" alt="The breeze map style" width="585" height="329" data-path="images/examples/baato_breeze_map.png" />
  </Frame>

  <Frame caption="monochrome">
    <img src="https://mintcdn.com/baato/3GUKEGLT42m2snov/images/examples/baato_monochrome_map.jpg?fit=max&auto=format&n=3GUKEGLT42m2snov&q=85&s=5246e96c24a4a7c7b732939d5ec6428d" alt="The monochrome map style" width="650" height="341" data-path="images/examples/baato_monochrome_map.jpg" />
  </Frame>

  <Frame caption="retro">
    <img src="https://mintcdn.com/baato/3GUKEGLT42m2snov/images/examples/baato_retro_map.jpg?fit=max&auto=format&n=3GUKEGLT42m2snov&q=85&s=92289b3bc49a6c5e447c3739c1ab64ae" alt="The retro map style" width="582" height="306" data-path="images/examples/baato_retro_map.jpg" />
  </Frame>
</Columns>

Custom styles you create in the **My Styles** section of your
[account dashboard](https://baato.io/account) are served from the same endpoint — use your
style's name in place of a built-in one.

## Using a style

The response is a [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/)
document, so any compatible renderer consumes the URL directly. There is nothing to parse or
transform.

<CodeGroup>
  ```javascript MapLibre GL JS theme={null}
  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]
    zoom: 12,
  });
  ```

  ```javascript Mapbox GL JS theme={null}
  new mapboxgl.Map({
    container: "map",
    style: "https://api.baato.io/api/v1/styles/breeze?key=YOUR_BAATO_ACCESS_TOKEN",
    center: [85.3240, 27.7172], // [lng, lat]
    zoom: 12,
  });
  ```

  ```java Android theme={null}
  mapboxMap.setStyle(
      "https://api.baato.io/api/v1/styles/breeze?key=" + getString(R.string.baato_access_token)
  );
  ```

  ```dart Flutter theme={null}
  BaatoMap(
    style: BaatoMapStyle.breeze,
    initialPosition: BaatoCoordinate(latitude: 27.7172, longitude: 85.3240),
  )
  ```

  ```javascript React Native theme={null}
  <MapLibreGL.MapView
    styleURL={`https://api.baato.io/api/v1/styles/breeze?key=${baatoToken}`}
  />
  ```
</CodeGroup>

<Warning>
  Map renderers take `[longitude, latitude]`, the reverse of Baato's `lat` and `lon` request
  parameters. See [coordinate order](/about/concepts#coordinate-order).
</Warning>

<Note>
  This endpoint is the one exception to Baato's [response envelope](/about/concepts#the-response-envelope) —
  it returns the raw style document, because renderers consume it directly.
</Note>

## Runnable examples

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

  <Card title="Android" icon="android" href="/examples/android-java/custom-map-style">
    Applying and switching styles in an activity.
  </Card>

  <Card title="Flutter" icon="mobile-screen" href="/examples/flutter/display-map">
    Rendering a styled map with `baato_maps`.
  </Card>

  <Card title="React Native" icon="react" href="/examples/react-native/display-map">
    MapLibre React Native with a Baato style URL.
  </Card>
</Columns>

<Info>
  Displaying Baato and OpenStreetMap attribution is a condition of using these styles. See
  [Attribution requirements](/resources/attribution).
</Info>


## OpenAPI

````yaml services/openapi.yaml GET /styles/{styleName}
openapi: 3.1.0
info:
  title: Baato API
  version: 1.0.0
  description: >
    Cloud-based geospatial services for Nepal: keyword search, reverse
    geocoding, place

    lookup, nearby search, routing, and vector map styles.


    Every endpoint requires a Baato access token, passed as the `key` query
    parameter.

    See [Authentication](/about/authentication).


    Error responses follow the same envelope as successful ones. See

    [Errors and status codes](/services/errors).


    TODO: the 4xx/5xx responses below are inferred from Baato's documented
    authentication

    and quota rules, not observed against the live API. Confirm the exact codes
    and

    messages with the API team before treating them as contractual.
  contact:
    name: Baato support
    email: support@baato.io
    url: https://baato.io
servers:
  - url: https://api.baato.io/api/v1
    description: Production
security:
  - baatoAccessToken: []
tags:
  - name: Search
    description: Find places by keyword or proximity.
  - name: Geocoding
    description: Convert between coordinates and place information.
  - name: Routing
    description: Navigation routes between points.
  - name: Maps
    description: Vector map styles.
paths:
  /styles/{styleName}:
    get:
      tags:
        - Maps
      summary: Get a vector map style
      description: >
        Returns a vector map style document following the

        [Mapbox Style
        Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/#style-document-structure),

        for use with MapLibre GL JS, Mapbox GL JS and compatible renderers.
      operationId: mapStyle
      parameters:
        - name: styleName
          in: path
          required: true
          description: The name of the style requested.
          schema:
            type: string
            enum:
              - monochrome
              - breeze
              - dark
              - black_white
              - roads
              - retro
          example: breeze
      responses:
        '200':
          description: |
            A Mapbox Style Specification document. The shape is defined by that
            specification rather than by Baato.
          content:
            application/json:
              schema:
                type: object
                additionalProperties: true
        '400':
          $ref: '#/components/responses/BadRequest'
        '401':
          $ref: '#/components/responses/Unauthorized'
        '403':
          $ref: '#/components/responses/Forbidden'
        '429':
          $ref: '#/components/responses/RateLimited'
        '500':
          $ref: '#/components/responses/ServerError'
components:
  responses:
    BadRequest:
      description: A required parameter is missing or malformed.
      content:
        application/json:
          schema:
            $ref: '#/components/schemas/Error'
          example:
            timestamp: Thu May 14 07:35:16 NPT 2020
            status: 400
            message: Missing required parameter
            data: []
    Unauthorized:
      description: >
        The `key` parameter is missing or malformed, or the token has been
        deleted.
      content:
        application/json:
          schema:
            $ref: '#/components/schemas/Error'
          example:
            timestamp: Thu May 14 07:35:16 NPT 2020
            status: 401
            message: Invalid access token
            data: []
    Forbidden:
      description: >
        The token is valid, but the request origin is not in its allowed origins
        list.
      content:
        application/json:
          schema:
            $ref: '#/components/schemas/Error'
          example:
            timestamp: Thu May 14 07:35:16 NPT 2020
            status: 403
            message: Origin not allowed for this token
            data: []
    RateLimited:
      description: >
        The token's request quota is exhausted. Retry with exponential backoff —
        see

        [Errors and status codes](/services/errors#rate-limiting).
      content:
        application/json:
          schema:
            $ref: '#/components/schemas/Error'
          example:
            timestamp: Thu May 14 07:35:16 NPT 2020
            status: 429
            message: Rate limit exceeded
            data: []
    ServerError:
      description: A fault on Baato's side. Safe to retry.
      content:
        application/json:
          schema:
            $ref: '#/components/schemas/Error'
          example:
            timestamp: Thu May 14 07:35:16 NPT 2020
            status: 500
            message: Internal server error
            data: []
  schemas:
    Error:
      type: object
      description: >
        The standard envelope, returned with an explanatory `message` and an
        empty `data`

        array when a request fails.
      properties:
        timestamp:
          type: string
          example: Thu May 14 07:35:16 NPT 2020
        status:
          type: integer
          description: The HTTP status, echoed into the body.
          example: 401
        message:
          type: string
          description: A human-readable explanation of the failure.
          example: Invalid access token
        data:
          type: array
          description: Always empty on an error response.
          items: {}
  securitySchemes:
    baatoAccessToken:
      type: apiKey
      in: query
      name: key
      description: |
        Your Baato access token. See [Authentication](/about/authentication).

````