Display a map - Baato.io

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

A Baato vector map rendered in a Flutter app — A Baato vector map in a Flutter app

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. To get a hold of map styles available to you, you can visit the “My Styles” section in your account dashboard.

Baato Logo Attributions:

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.

Render Map

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

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

View the full example on GitHub