Baato Integration Guide for Expo / MapLibre React Native

This project demonstrates how to consume Baato APIs in Expo / MapLibre React Native projects. It includes implementations for map tiles, place search, reverse geocoding, place details, and directions.

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Expo CLI
• Android Studio (for Android development) or Xcode (for iOS development)

Step 1: Create a New Expo Project

First, create a new Expo project and set up your environment to build a development build:

npx create-expo-app@latest
cd your-app-name

Set Up Development Build

For MapLibre React Native, you need a development build rather than using Expo Go. Follow these steps:

1. Create a development build for iOS:

   npx expo run:ios

   Or for Android:

   npx expo run:android

2. Start the development server:

   npx expo start

For more details on development builds, see the Expo documentation.

Step 2: Set Up MapLibre React Native with Expo

Follow the official MapLibre React Native Expo setup guide.

Install Dependencies

npm install @maplibre/maplibre-react-native

Configure app.json

Add the following configuration to your app.json:

{
  "expo": {
    "plugins": ["@maplibre/maplibre-react-native"]
  }
}

Rebuild Your App

After adding the plugin, rebuild your development build:

npx expo run:ios
# or
npx expo run:android

Step 3: Set Up Baato API

Get Baato API Credentials

1. Sign up at Baato
2. Get your access token from the dashboard
3. Note the API URL (default: https://api.baato.io/api/v1)

Configure Environment Variables

Create a .env file in your project root:

EXPO_PUBLIC_BAATO_ACCESS_TOKEN=your_baato_access_token
EXPO_PUBLIC_BAATO_API_URL=https://api.baato.io/api/v1

Install Additional Dependencies

npm install @tanstack/react-query @mapbox/polyline
npm install -D @types/mapbox__polyline

Step 4: Integrate Baato Features

4.1 Baato Map Tiles

Configure MapLibre to use Baato map tiles by setting the mapStyle prop to the Baato style URL:

const mapStyle = `${process.env.EXPO_PUBLIC_BAATO_API_URL}/styles/breeze?key=${process.env.EXPO_PUBLIC_BAATO_ACCESS_TOKEN}`;

<Map
  style={{ height: "100%", width: "100%" }}
  mapStyle={mapStyle}
>
  <Camera
    initialViewState={{
      center: [85.32675329244304, 27.723598579458407], // Kathmandu coordinates
      zoom: 12,
    }}
  />
</Map>

Available Baato map styles include: breeze, dark, light, outdoor, and more. Check the Baato documentation for the complete list.

4.2 Place Search (Autocomplete)

Implement place search with autocomplete using the Baato Search API:

const searchPlaces = async (query: string, lat?: number, lon?: number) => {
  const params = new URLSearchParams({
    q: query,
    key: process.env.EXPO_PUBLIC_BAATO_ACCESS_TOKEN!,
  });

  if (lat !== undefined && lon !== undefined) {
    params.append("lat", String(lat));
    params.append("lon", String(lon));
  }

  const response = await fetch(
    `${process.env.EXPO_PUBLIC_BAATO_API_URL}/search?` + params.toString(),
  );
  const result = await response.json();
  return result.data;
};

Key parameters:

• q: Search query string
• lat, lon: Optional coordinates for location-biased results
• key: Your Baato access token

Usage tips:

• Implement debouncing (300ms recommended) to reduce API calls
• Use the user's current map center for location-biased results
• Display results in a dropdown/flatlist for autocomplete functionality

4.3 Place Details

Fetch detailed information about a place using the Place ID or OSM ID:

const getPlaceDetails = async (placeId?: number, osmId?: number) => {
  const params = new URLSearchParams({
    key: process.env.EXPO_PUBLIC_BAATO_ACCESS_TOKEN!,
  });

  if (placeId !== undefined) params.append("placeId", String(placeId));
  if (osmId !== undefined) params.append("osmId", String(osmId));

  const response = await fetch(
    `${process.env.EXPO_PUBLIC_BAATO_API_URL}/places?` + params.toString(),
  );
  const result = await response.json();
  return result.data[0];
};

Common use cases:

• Display place details in a bottom sheet or modal
• Show additional information when a user selects a search result
• Fetch place type, address, and other metadata

4.4 Reverse Geocoding

Convert coordinates to place information (long press on map):

const reverseGeocode = async (lat: number, lng: number) => {
  const params = new URLSearchParams({
    lat: String(lat),
    lon: String(lng),
    key: process.env.EXPO_PUBLIC_BAATO_ACCESS_TOKEN!,
  });

  const response = await fetch(
    `${process.env.EXPO_PUBLIC_BAATO_API_URL}/reverse?` + params.toString(),
  );
  const result = await response.json();
  return result.data[0];
};

Implementation:

• Add an onLongPress handler to your Map component
• Display the result in a toast, snackbar, or custom UI component
• Show place name, address, and type to the user

4.5 Directions

Calculate routes between two or more points:

const getDirections = async (
  points: [number, number][],
  mode: string = "car",
) => {
  const params = new URLSearchParams({
    mode: mode,
    key: process.env.EXPO_PUBLIC_BAATO_ACCESS_TOKEN!,
    instructions: "true",
    alternatives: "true",
  });

  points.forEach((point) => {
    params.append("points[]", `${point[1]},${point[0]}`);
  });

  const response = await fetch(
    `${process.env.EXPO_PUBLIC_BAATO_API_URL}/directions?` + params.toString(),
  );
  const result = await response.json();
  return result.data[0];
};

Travel modes: car, bike, foot

Displaying the route:

1. Decode the encoded polyline using @mapbox/polyline:

   import * as polyline from "@mapbox/polyline";
   const geojson = polyline.toGeoJSON(route.encodedPolyline);

2. Render the route on the map using GeoJSONSource and Layer:

   <GeoJSONSource data={geojson}>
     <Layer
       type="line"
       layout={{ "line-join": "round", "line-cap": "round" }}
       paint={{ "line-color": "#2563eb", "line-width": 6 }}
     />
   </GeoJSONSource>

3. Add markers for origin and destination points

Route information available:

• distanceInMeters: Total distance
• timeInMs: Estimated travel time
• instructionList: Turn-by-turn directions
• encodedPolyline: Route geometry

Running the Project

1. Install dependencies:

   npm install

2. Set up your .env file with your Baato credentials

3. Run the development build:

   npx expo run:ios
   # or
   npx expo run:android

4. Start the development server:

   npx expo start

Features Implemented

• Map Tiles: Baato map style integration using the breeze style
• Place Search: Autocomplete search with location-based results
• Reverse Geocoding: Long press on map to get location information
• Place Details: Bottom sheet displaying place information
• Directions: Route calculation with multiple travel modes (car, bike, foot)

API Reference

For detailed API documentation, visit Baato API Documentation.

Support

For issues and questions, visit Baato Support.