Trying to get a map from URL in Flutter

Question

I am trying to integrate Azure Maps into a Flutter application. I am using the flutter_map package from pub.dev. I do not think this is a Flutter issue or an issue with the plugin. I can provide this URL along with my key and a location and it will display just fine:

'https://atlas.microsoft.com/map/tile/png?api-version=1&layer=basic&style=dark&tileSize=256&view=Auto&zoom={z}&x={x}&y={y}&subscription-key={subscriptionKey}'

But if I pass this as the URL I get the same map as the previous URL, no pins??

'https://atlas.microsoft.com/map/tile/png?api-version=1&layer=basic&style=dark&tileSize=256&view=Auto&zoom={z}&x={x}&y={y}&subscription-key={subscriptionKey}&pins=default%7C%7C47.57486513608924+-122.31074501155426'

and yes, the pin is on the map in the area I am showing to start with, so I should see it. Any idea how I can fix this? I would also love to understand if I can further customize the map, like changing the color of the background and such, similar to how Google Maps lets you create your own "style" to show.

Answer 1

The first URL it appears you are using a URL to retrieve map tiles from Azure Maps. The second URL you appear to be mixing options from the tile service API with the static map image API which are not supported. There is not pins parameter available on the tile service API, that API servers map tiles from Azure Maps, it does not generate map images with pins drawn on it. Here are the docs:

Map tile service: https://learn.microsoft.com/en-us/rest/api/maps/render/get-map-tile?tabs=HTTP

Static map service: https://learn.microsoft.com/en-us/rest/api/maps/render/get-map-image?tabs=HTTP

The static map service can be used to retrieve a map with pins drawn on it, but note that is an image of a specific map for a specific location and not map tiles that can be used in a dynamic map control such as flutter maps.