how to implementing the Azure Maps API on flutter

Question

how to use the Azure Maps API with flutter. I read the Android SDK document, but I have no idea to use on flutter.

Answer 1

I m using flutter_map for pin clustering features. I use BingMapTile with api key, Here is the steps.

1. Create an api key following instructions at this link
2. copy and paste the code below to your project

     enum BingMapsImagerySet {
          road('RoadOnDemand', zoomBounds: (min: 0, max: 21)),
          aerial('Aerial', zoomBounds: (min: 0, max: 20)),
          aerialLabels('AerialWithLabelsOnDemand', zoomBounds: (min: 0, max: 20)),
          canvasDark('CanvasDark', zoomBounds: (min: 0, max: 21)),
          canvasLight('CanvasLight', zoomBounds: (min: 0, max: 21)),
          canvasGray('CanvasGray', zoomBounds: (min: 0, max: 21)),
          ordnanceSurvey('OrdnanceSurvey', zoomBounds: (min: 12, max: 17));
        
          final String urlValue;
          final ({int min, int max}) zoomBounds;
        
          const BingMapsImagerySet(this.urlValue, {required this.zoomBounds});
        }
        
        // Custom tile provider that contains the quadkeys logic
        // Note that you can also extend from the CancellableNetworkTileProvider
        class BingMapsTileProvider extends NetworkTileProvider {
          BingMapsTileProvider({super.headers});
        
          String _getQuadKey(int x, int y, int z) {
            final quadKey = StringBuffer();
            for (int i = z; i > 0; i--) {
              int digit = 0;
              final int mask = 1 << (i - 1);
              if ((x & mask) != 0) digit++;
              if ((y & mask) != 0) digit += 2;
              quadKey.write(digit);
            }
            return quadKey.toString();
          }
        
          @override
          Map<String, String> generateReplacementMap(
            String urlTemplate,
            TileCoordinates coordinates,
            TileLayer options,
          ) =>
              super.generateReplacementMap(urlTemplate, coordinates, options)
                ..addAll(
                  {
                    'culture': 'en-GB', // Or your culture value of choice
                    'subdomain': options.subdomains[
                        (coordinates.x + coordinates.y) % options.subdomains.length],
                    'quadkey': _getQuadKey(coordinates.x, coordinates.y, coordinates.z),
                  },
                );
        }
        
        // Custom `TileLayer` wrapper that can be inserted into a `FlutterMap`
        class BingMapsTileLayer extends StatelessWidget {
          const BingMapsTileLayer({
            super.key,
            required this.apiKey,
            required this.imagerySet,
          });
        
          final String apiKey;
          final BingMapsImagerySet imagerySet;
        
          @override
          Widget build(BuildContext context) {
            return FutureBuilder(
              future: http.get(
                Uri.parse(
                  'http://dev.virtualearth.net/REST/V1/Imagery/Metadata/${imagerySet.urlValue}?output=json&include=ImageryProviders&key=$apiKey',
                ),
              ),
              builder: (context, response) {
                if (response.data == null) return const Placeholder();
        
                return TileLayer(
                  urlTemplate: (((((jsonDecode(response.data!.body)
                                  as Map<String, dynamic>)['resourceSets']
                              as List<dynamic>)[0] as Map<String, dynamic>)['resources']
                          as List<dynamic>)[0] as Map<String, dynamic>)['imageUrl']
                      as String,
                  tileProvider: BingMapsTileProvider(),
                  subdomains: const ['t0', 't1', 't2', 't3'],
                  minNativeZoom: imagerySet.zoomBounds.min,
                  maxNativeZoom: imagerySet.zoomBounds.max,
                );
              },
            );
          }
        }

reference for the code

use it in your map widget

 Card(
        child: SizedBox.expand(
            child:
             FlutterMap(
              options: MapOptions(
                initialRotation:90 ,
              initialCameraFit: CameraFit.bounds(bounds:  LatLngBounds(LatLng(41, 26.2), LatLng(36.77,47.0)),
        
        
            ),
        
        
                initialZoom:5,
                maxZoom: 15,
              ),
              children: <Widget>[

              BingMapsTileLayer(apiKey: bingMapKey,imagerySet: BingMapsImagerySet.aerial,),

                MarkerClusterLayerWidget(
                  options: MarkerClusterLayerOptions(
                    maxClusterRadius: 45,
                    size: const Size(40, 40),
                    alignment: Alignment.center,
                    padding: const EdgeInsets.all(50),
                    maxZoom: 15,        
                    markers: getMarkers(),
                    builder: (context, markers) {
                      return Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            color: Colors.blue),
                        child: Center(
                          child: Text(
                            markers.length.toString(),
                            style: const TextStyle(color: Colors.white),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ],
            )
          ),
      ).p(20),

    );

Answer 2

In Syncfusion Flutter Maps, you can visualize the Azure maps and customize it easily. To add Azure Maps, you need to add a MapTileLayer to the list of layers in SfMaps. In the MapTileLayer.urlTemplate property, the URL of the provider must be set.

To request tiles from the Azure, you need an API key. Replace the word 'Your-Key' with the actual api-key in the code snippet below.

@override
Widget build(BuildContext context) {
       return SfMaps(
              layers: [
                      MapTileLayer(urlTemplate: 'https://atlas.microsoft.com/map/imagery/png?subscription-key=Your-Key&api-version=1.0&style=satellite&zoom={z}&x={x}&y={y} '),
              ],
      );
}