Display a map

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.

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 },
});

centerCoordinate takes [longitude, latitude] — the opposite order from Baato’s lat and lon request parameters. See coordinate order.

Choosing a style

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

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

The available styles are listed on the Map Styles API page. Custom styles you build in the My Styles section of your account dashboard 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:

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

See Attribution requirements for what has to be visible.

Search and autocomplete

Let users search for a place and fly the camera to it.

Directions

Draw a route between two points.

Get started

Guides by platform

Server SDKs

Resources

Choosing a style

Attribution

Next

Search and autocomplete

Directions

​Choosing a style

​Attribution

​Next

Search and autocomplete

Directions

Choosing a style

Attribution

Next