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

# Display a map

> Render Baato vector tiles in an Expo or React Native app with MapLibre.

A Baato map style is a URL, so displaying a map means pointing `MapLibreGL.MapView` at it.
No tile server, no native configuration beyond the
[MapLibre setup](/examples/react-native/setup).

```javascript theme={null}
import MapLibreGL from "@maplibre/maplibre-react-native";
import { StyleSheet } from "react-native";
import { baatoToken } from "./config";

export default function BaatoMap() {
  return (
    <MapLibreGL.MapView
      style={styles.map}
      styleURL={`https://api.baato.io/api/v1/styles/breeze?key=${baatoToken}`}
      logoEnabled={false}
      attributionEnabled={false}
    >
      <MapLibreGL.Camera
        zoomLevel={12}
        centerCoordinate={[85.32675329244304, 27.723598579458407]}
      />
    </MapLibreGL.MapView>
  );
}

const styles = StyleSheet.create({
  map: { flex: 1 },
});
```

<Warning>
  `centerCoordinate` takes `[longitude, latitude]` — the opposite order from Baato's `lat`
  and `lon` request parameters. See [coordinate order](/about/concepts#coordinate-order).
</Warning>

## Choosing a style

Swap the style name in the URL to change the look of the map:

```javascript theme={null}
const styleURL = (name) => `https://api.baato.io/api/v1/styles/${name}?key=${baatoToken}`;
```

The available styles are listed on the [Map Styles API](/services/styles) page. Custom
styles you build in the **My Styles** section of your
[account dashboard](https://baato.io/account) work the same way — use their name in place of
a built-in one.

## Attribution

`logoEnabled` and `attributionEnabled` above turn off MapLibre's own branding, which means
you are responsible for showing Baato and OpenStreetMap attribution yourself:

```javascript theme={null}
<View style={styles.attribution}>
  <Text style={styles.attributionText}>© OpenStreetMap contributors · Baato</Text>
</View>
```

See [Attribution requirements](/resources/attribution) for what has to be visible.

## Next

<Columns cols={2}>
  <Card title="Search and autocomplete" icon="magnifying-glass" href="/examples/react-native/search">
    Let users search for a place and fly the camera to it.
  </Card>

  <Card title="Directions" icon="route" href="/examples/react-native/directions">
    Draw a route between two points.
  </Card>
</Columns>