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

# Get Map Styles

> Returns a MapLibre-compliant style JSON based on map_id, variant, and language.

Retrieve MapLibre-compliant style JSON objects to render vector maps in your application.

### Publishable Key

This endpoint uses your **Publishable Key** (`pk_...`) via the `api_key` query parameter. This allows you to securely embed maps in frontend applications without exposing your Secret Key.

### Rendering with MapLibre GL JS

To correctly render Arabic text and ligatures, you **must** use the MapLibre RTL plugin.

```javascript theme={null}
// 1. Initialize the RTL plugin
maplibregl.setRTLTextPlugin(
  'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.3.0/dist/mapbox-gl-rtl-text.js',
  true // Lazy-load
);

// 2. Initialize the map
const map = new maplibregl.Map({
  container: 'map',
  style: 'https://b.hudhud.sa/v1/maps/styles/default?variant=light&lang=ar&api_key=pk_your_publishable_key',
  center: [46.6753, 24.7136], // Riyadh
  zoom: 12
});
```

### Style Variants

* **Light**: Optimized for standard daytime navigation and POI display.
* **Dark**: A high-contrast dark mode variant for nighttime use or specialized dashboards.

### Language Support

The `lang` parameter allows you to toggle between Arabic (`ar`) and English (`en`) for all labels on the map.


## OpenAPI

````yaml GET /maps/styles/{map_id}
openapi: 3.1.0
info:
  description: >-
    Hudhud Maps provides the most accurate, real-time mapping data for the
    Kingdom of Saudi Arabia.
  title: Next-Generation Geospatial Intelligence for Saudi Arabia
  version: '1.0'
servers:
  - description: Production
    url: https://b.hudhud.sa/v1
security: []
externalDocs:
  description: ''
  url: ''
paths:
  /maps/styles/{map_id}:
    get:
      tags:
        - Maps
      summary: Get Map Styles
      description: >-
        Returns a MapLibre-compliant style JSON based on map_id, variant, and
        language.
      operationId: StylesHandler
      parameters:
        - description: The ID of the map configured in the console
          in: path
          name: map_id
          required: true
          schema:
            type: string
        - description: Style variant
          in: query
          name: variant
          schema:
            default: light
            enum:
              - light
              - dark
            type: string
        - description: Language code
          in: query
          name: lang
          schema:
            default: ar
            enum:
              - ar
              - en
            type: string
        - description: The Public API Key (pk_...)
          in: query
          name: api_key
          required: true
          schema:
            type: string
      responses:
        '200':
          content:
            application/json:
              schema:
                additionalProperties: {}
                type: object
          description: MapLibre Style JSON
        '400':
          content:
            application/json:
              schema:
                additionalProperties: {}
                type: object
          description: Invalid parameters
        '401':
          content:
            application/json:
              schema:
                additionalProperties: {}
                type: object
          description: Unauthorized - Missing or invalid API key
        '403':
          content:
            application/json:
              schema:
                additionalProperties: {}
                type: object
          description: Forbidden - Key does not have 'publishable' type
        '404':
          content:
            application/json:
              schema:
                additionalProperties: {}
                type: object
          description: Map not found

````