How to visualize the Bing Maps using Flutter Maps?

In Syncfusion® Flutter Maps,   you can easily visualize and customize Bing Maps. This guide walks you through the process of adding Bing Maps to your Flutter application.

To add Bing Maps, you need to set the urlTemplate property of MapTileLayer in SfMaps as mentioned below.

Step 1: For Bing Maps, subscription key is required to request tiles. Create your own Bing Maps key by following the steps mentioned in this link and replace “YOUR_KEY” in the below code snippet with actual key.

Step 2: Convert the above URL into the required Bing Maps URL format using the top-level getBingUrlTemplate method and set the URL returned from this method to the urlTemplate property.

@override
Widget build(BuildContext context) {
   return Scaffold(
      body: FutureBuilder(
        future: getBingUrlTemplate( 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'),
        builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
          if (snapshot.hasData) {
             return SfMaps(
               layers: [
                 MapTileLayer(
                   urlTemplate: snapshot.data as String,
                 ),
              ],
           );
         }
         return CircularProgressIndicator();
       }
     ),
  );
}

Screenshot:

Check the below links for more features in tile layer.

• https://www.syncfusion.com/flutter-widgets/flutter-maps
• https://help.syncfusion.com/flutter/maps/tile-layer

Live samples,

• https://flutter.syncfusion.com/#/maps/tile-layer/bing-maps
• https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples
• https://apps.apple.com/us/app/syncfusion-flutter-ui-widgets/id1475231341

Package reference,

• https://pub.dev/packages/syncfusion_flutter_maps