Search code examples
geolocationazure-maps

How can I use the Azure Map service to get a thumbnail?

How can I use the Azure Map service to return to me a bitmap that is:

  1. A specified size (256 x 256 pixels for my use case)
  2. A specified extent, for example 100 miles x 100 miles
  3. Centered on a specified Lat/Long
  4. With a pin on that Lat/Long.
Solution

  • The static map service for Azure Maps and many other map platforms (Big Maps, Google Maps, Mapbox...) use integer zoom levels for scaling based on the quadtree tiling schema as documented here: https://learn.microsoft.com/en-us/azure/azure-maps/zoom-levels-and-tile-grid?tabs=csharp So using these services won't let you get an image that represents an area of exactly 100 miles x 100 miles, but you can get a similar scale based on the zoom level scale. A 100 miles is 160934.4 meters and given a 256 pixel image size, that would work out to 628.65 meters per pixel. Based on the documentation provided above, zoom level 8 would likely be the closest (its 611 meters per pixel at the equator, you could try zoom level 7 if you want to show more area).

    Now that you have a zoom level to work with, you can take your center point and use the service to easily create your image with a pin on it as per the docs:

    https://learn.microsoft.com/en-us/rest/api/maps/render-v2/get-map-static-image?view=rest-maps-2022-08-01&tabs=HTTP

    The image format returned by the service is PNG, there is no BMP option, but that shouldn't be a big deal as you can easily convert to that format via code if you really need BMP.

    For centering you would use the center query parameter. which takes in a "Longitude,Latitude" value.

    To add a pin to the center, you would use the same coordinate and using the pins query parameter. There are a lot of options for customizing how the pin appears on the map, so you will need to look at the docs to customize to the way you want.

    Here is a simple example that creates a map over Seattle (Lat: 47.612965, Lon: -122.338000) at zoom level 8, and adds the default pin icon to the center. The width/height is set to 256 pixels. Additionally, I've set the

    https://atlas.microsoft.com/map/static/png?api-version=2022-08-01&layer=basic&style=main&zoom=8&center=-122.338000,47.612965&height=256&width=256&pins=default||-122.338000%2047.612965&subscription-key=<Your Azure Maps Key>

    Here is what the generated image looks like:

    enter image description here

    Now, with all that said, if you are going to display this on a webpage, I highly recommend considering using the interactive Web SDK instead as that will use map tiles that get cached in the users browser and would generate significantly less transactions over time. A small interactive map using tiles would generate a fraction of a transactions the first time it is loaded and no transactions for a period of time due to the tiles being cached (even if the user closes the browser and comes back days later). While using the static map service, would generate a transaction with each request (every time the image is loaded/displayed) and is not allowed to be cached as per the terms of service. You also have a lot more styling options when using the interactive map control and also have access to satellite imagery if desired.