Flutter

baato_maps is the most complete Baato client: it ships the map widget, marker and shape managers, camera controls and the API client in one package, so a Flutter app needs no separate map SDK.

pub.dev

baato_maps

Runnable examples

Map display, search, reverse and routing.

Installation

flutter pub add baato_maps
flutter pub get

dependencies:
  baato_maps: ^1.0.2 # check pub.dev for the latest version

Then import it:

import 'package:baato_maps/baato_maps.dart';

Configuration

Configure the SDK once, before runApp:

void main() {
  Baato.configure(
    apiKey: 'YOUR_BAATO_API_KEY',
    enableLogging: true, // optional, useful during development
  );

  runApp(MyApp());
}

A key compiled into a mobile app can be extracted from the binary. See Authentication for how to limit the damage.

Display a map

Displays an interactive map centered at a specific location(initialPosition) with an initial zoom level and supports user location and tap interactions.

BaatoMap(
  initialPosition: BaatoCoordinate(
    latitude: 27.7172,
    longitude: 85.3240,
  ),
  initialZoom: 12.0,
  myLocationEnabled: true,
  onMapCreated: (BaatoMapController controller) {
    // Store controller for later use
    mapController=controller;
  },
  onTap: (point, coordinate, feature) {
   // Perform adding marker, reverse geocoding,
   // and other callbacks
  },
)

Add a marker

Adds a marker to the map at a specific coordinate with a custom label using the mapController.

mapController.markerManager.addMarker(
  BaatoSymbolOption(
    geometry: BaatoCoordinate(
      latitude: 27.7172,
      longitude: 85.3240,
    ),
    textField: "My Location",
    iconImage: //Can add your own marker image [optional]
  ),
);

Enables place auto-suggestions and retrieves detailed place information based on the user’s input and current location.

BaatoPlaceAutoSuggestion(
  onPlaceSelected: (place) {
    print('Selected place: ${place.name}');
  },
  onPlaceDetailsRetrieved: (placeDetails) {
    print('Place details: ${placeDetails.name}');
  },
  currentCoordinate: BaatoCoordinate(
    latitude: 27.7172,
    longitude: 85.3240,
  ),
)

Draw shapes

Draw a Shape on the map with customizable center, radius, color, and opacity for visual emphasis or area representation.

// Add a circle
mapController.shapeManager.addCircle(
  BaatoCircleOptions(
    center: BaatoCoordinate(
      latitude: 27.7172,
      longitude: 85.3240,
    ),
    circleRadius: 100,
    circleColor: "#FF0000",
    circleOpacity: 0.5,
  ),
);

Camera management

Provides methods to control the map camera, including moving to specific locations, retrieving camera position, and adjusting zoom levels programmatically.

Move to the user’s location

Moves the camera to the user’s current location with animation.

mapController.cameraManager.moveToMyLocation();

Move to a coordinate

Moves the camera to the specified geographic coordinate with optional zoom level and animation control.

mapController.cameraManager
            .moveTo(coordinate,//[Required] geographic coordinates of location
            zoom: //[Optional] Zoom the map on that location
            animate: //[default true]
            );

Read the camera position

Returns a CameraPosition containing the current camera coordinates and zoom level. If the camera position is not available, returns default values (0,0) with zoom 0.

BaatoCameraPosition cameraPosition= mapController.cameraManager.getCameraPosition();

Zoom in

Increases the map zoom level by 1. Animates the camera to zoom in and updates the last camera position.

mapController.cameraManager.zoomIn();

Zoom out

Decreases the map zoom level by 1. Animates the camera to zoom out and updates the last camera position.

mapController.cameraManager.zoomOut();

Map styles

Built-in styles are constants on BaatoMapStyle, so you get them without building a URL:

Constant	Look
`BaatoMapStyle.breeze`	Light and airy, with subtle colours and clear typography
`BaatoMapStyle.dark`	High-contrast dark theme
`BaatoMapStyle.monochrome`	Greyscale — black, white and shades of grey
`BaatoMapStyle.retro`	Vintage-inspired, classic cartographic look

BaatoMap(
  style: BaatoMapStyle.breeze,
  initialPosition: BaatoCoordinate(latitude: 27.7172, longitude: 85.3240),
)

For a custom style built in the My Styles section of your account dashboard, pass its style URL instead. The full catalogue of style names is on the Map Styles API page.

Advanced features

Custom layers and sources

Enables the addition of custom vector tile sources and layers to the map, allowing advanced styling and data visualization using external tile sets.

mapController.sourceAndLayerManager.addSource(
  "custom-source",
  BaatoVectorSourceProperties(
    url: "your-tileset-url",
  ),
);

mapController.sourceAndLayerManager.addLayer(
  "custom-source",
  "custom-layer",
  // Layer properties
);

Calling the Baato APIs

Provides programmatic access to core services such as place search, reverse geocoding, and route generation for building rich map-based applications.

Place search

Searches for places matching a query string with optional filters like type, location, radius, and result limit.

 BaatoSearchPlaceResponse response = await Baato.api.
  place.search(query, //[Required] search query text
  limit: //[Optional] Maximum number of results to return
  type: // [Optional] Filter for place types
  radius: // [Optional] Search radius in meters
  currentCoordinate: // [Optional] Current location coordinates
  );

Reverse geocoding

Retrieves nearby place information based on geographic coordinates, with optional search radius and result limit.

BaatoPlaceResponse response = await Baato.api.
    place.reverseGeocode(baatoCoordinate,//[Required] geographic coordinates to search around
    limit: //[Optional] maximum number of results to return
    radius: //[Optional] search radius in meters
    );

Routing

Fetches route directions between two coordinates with customizable travel modes and optional instructions, then renders the route on the map using customizable line styling.

    BaatoRouteResponse route = await Baato.api.
      direction.getRoutes(
        startCoordinate: //[Required] Start Position Coordinate
        endCoordinate: // [Required] End Position Coordinate,
        mode: BaatoDirectionMode.foot, // [Optional] [car,bike,foot]
        decodePolyline: // [Optional]
        alternatives:  //[Optional] Provides alternative routes to reach destination
        instructions: // [Optional] Provides Instructions to reach destination
        );

//Draw Route on the map
    mapController.routeManager.drawRouteFromResponse(
      route,
      lineLayerProperties: BaatoLineLayerProperties() //Customize line property
    );

Display a map

A complete widget with attribution.

Autocomplete

The place suggestion widget in context.

Reverse search

Tap the map to resolve an address.

Routing

Fetch a route and draw it.

Get started

Guides by platform

Server SDKs

Resources

pub.dev

Runnable examples

Installation

Configuration

The map widget

Display a map

Add a marker

Place search widget

Draw shapes

Camera management

Move to the user’s location

Move to a coordinate

Read the camera position

Zoom in

Zoom out

Map styles

Advanced features

Custom layers and sources

Calling the Baato APIs

Place search

Reverse geocoding

Routing

Next

Display a map

Autocomplete

Reverse search

Routing

pub.dev

Runnable examples

​Installation

​Configuration

​The map widget

​Display a map

​Add a marker

​Place search widget

​Draw shapes

​Camera management

​Move to the user’s location

​Move to a coordinate

​Read the camera position

​Zoom in

​Zoom out

​Map styles

​Advanced features

​Custom layers and sources

​Calling the Baato APIs

​Place search

​Reverse geocoding

​Routing

​Next

Display a map

Autocomplete

Reverse search

Routing

Installation

Configuration

The map widget

Display a map

Add a marker

Place search widget

Draw shapes

Camera management

Move to the user’s location

Move to a coordinate

Read the camera position

Zoom in

Zoom out

Map styles

Advanced features

Custom layers and sources

Calling the Baato APIs

Place search

Reverse geocoding

Routing

Next