Azure maps from Flutter/Dart?

Question

Is it possible to use Azure maps in a Flutter mobile/web app?

Answer 1

A good option for flutter is the open source Flutter Map: https://github.com/fleaflet/flutter_map You can add Azure Maps road or imagery as a tile layer. https://docs.fleaflet.dev/layers/tile-layer Here is a code sample that I've expanded so that you can easily change options to get different map styles and languages.

new TileLayerOptions(
  urlTemplate: "https://atlas.microsoft.com/map/tile?api-version=2022-08-01&tilesetId={tilesetId}&zoom={z}&x={x}&y={y}&tileSize={tileSize}&language={language}&view={view}&subscription-key={subscriptionKey}",
  additionalOptions: {
	tilesetId: "microsoft.base.road",  //List of possible tilesets and tile sizes: https://learn.microsoft.com/en-us/rest/api/maps/render/get-map-tile?view=rest-maps-2023-06-01&tabs=HTTP#tilesetid
	tileSize: 512,
	language: "en-US",
	view: "Auto",	
	subscriptionKey: '<YOUR_AZURE_MAPS_SUBSCRIPTON_KEY>'
  },
)