> ## 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.
# Flutter
> Integrate Baato maps and APIs into Flutter projects with the official Dart package.
`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.
`baato_maps`
Map display, search, reverse and routing.
## Installation
```bash CLI theme={null}
flutter pub add baato_maps
flutter pub get
```
```yaml pubspec.yaml theme={null}
dependencies:
baato_maps: ^1.0.2 # check pub.dev for the latest version
```
Then import it:
```dart theme={null}
import 'package:baato_maps/baato_maps.dart';
```
## Configuration
Configure the SDK once, before `runApp`:
```dart theme={null}
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](/about/authentication) for how to limit the damage.
## The map widget
### 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.
```dart theme={null}
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.
```dart theme={null}
mapController.markerManager.addMarker(
BaatoSymbolOption(
geometry: BaatoCoordinate(
latitude: 27.7172,
longitude: 85.3240,
),
textField: "My Location",
iconImage: //Can add your own marker image [optional]
),
);
```
### Place search widget
Enables place auto-suggestions and retrieves detailed place information based on the user's input and current location.
```dart theme={null}
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.
```dart theme={null}
// 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.
```dart theme={null}
mapController.cameraManager.moveToMyLocation();
```
### Move to a coordinate
Moves the camera to the specified geographic coordinate with optional zoom level and animation control.
```dart theme={null}
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.
```dart theme={null}
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.
```dart theme={null}
mapController.cameraManager.zoomIn();
```
### Zoom out
Decreases the map zoom level by 1.
Animates the camera to zoom out and updates the last camera position.
```dart theme={null}
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 |
```dart theme={null}
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](https://baato.io/account), pass its style URL instead. The full
catalogue of style names is on the [Map Styles API](/services/styles) 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.
```dart theme={null}
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.
```dart theme={null}
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.
```dart theme={null}
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.
```dart theme={null}
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
);
```
## Next
A complete widget with attribution.
The place suggestion widget in context.
Tap the map to resolve an address.
Fetch a route and draw it.