> ## 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 a Baato vector map in a Flutter app.

This example shows you how to display a map using Mapbox and a Baato style URL.

<Frame caption="A Baato vector map in a Flutter app">
  <img src="https://mintcdn.com/baato/3GUKEGLT42m2snov/images/flutter/display_map.png?fit=max&auto=format&n=3GUKEGLT42m2snov&q=85&s=8265f4a9d6b50d1cf6c9eb1421e7fb9f" alt="A Baato vector map rendered in a Flutter app" width="2208" height="1242" data-path="images/flutter/display_map.png" />
</Frame>

### Display map using mapbox

With `Baato's Map Styles API` you can change the look of your maps to suit your needs. To learn more about the Baato Map Styles API [click here](/services/styles). To get a hold of map styles available to you, you can visit the "My Styles"
section in your [account dashboard](https://baato.io/account).

#### Baato Logo Attributions:

<Warning>
  We highly request you to include Baato logo in the map view while using any of our Baato map styles. You can include as mentioned in the code snippet below.
</Warning>

## Render Map

Below is a complete example demonstrating how to render the map design.

```dart theme={null}
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          BaatoMap(
            logoViewMargins: Point(-50, -50),
            onMapCreated: _onMapCreated,
            initialPosition: BaatoCoordinate(
              latitude: 27.7192873,
              longitude: 85.3238007,
            ),
            style:BaatoMapStyle.breeze,
            /* other available style[BaatoMapStyle.monochrome,
            BaatoMapStyle.retro,
            BaatoMapStyle.monochrome,
            BaatoMapStyle.baatolite,
            BaatoMapStyle.dark
            ]*/
          ),
          //add Baato logo
          Align(
            alignment: Alignment.bottomLeft,
            child: SizedBox(
              height: 35.0,
              child: Container(
                decoration: BoxDecoration(color: Colors.white70),
                child: Image.network(
                  "https://i.postimg.cc/k5DpLQKQ/baato-Logo.png",
                ),
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: Container(
              decoration: BoxDecoration(color: Colors.white70),
              padding: EdgeInsets.only(bottom: 2.0, right: 2.0),
              child: InkWell(
                child: RichText(
                  text: TextSpan(
                    text: "© ",
                    style: TextStyle(color: Colors.black),
                    children: <TextSpan>[
                      TextSpan(
                        text: "OpenStreetMap contributors",
                        style: TextStyle(
                          color: Colors.purple,
                          fontWeight: FontWeight.normal,
                          decoration: TextDecoration.underline,
                        ),
                      ),
                    ],
                  ),
                ),
                onTap: () async {
                  await launchUrlString(
                    "https://www.openstreetmap.org/copyright",
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
```

<Card title="View the full example on GitHub" icon="github" href="https://github.com/baato/Flutter-Baato-Maps-Demo/blob/main/lib/ui/baato_map_style_view.dart" horizontal />