Azure Maps topics

Could not load image because of out of range source coordinates for image copy.

JeroenBooij — Fri, 08 Aug 2025 10:20:30 GMT

I use the azure-maps-control SDK version 2.3.7 for my Angular app. When I Initialise the Map it intermittently fires the error event. So sometimes it fires when the map loads and sometimes it does not. The error fires before I add any markers to the map, but Also if I remove all my code to add markers to the map and simply initialise the map. So if the error event fires the message I receive is: "Could not load image because of out of range source coordinates for image copy. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported."

I use the Angular ngAfterViewInit lifecycle hook to initialise the map and the AzureMapsModule.forRoot to set the authOptions

ngAfterViewInit(): void { this._initMap(); } private _initMap() { this._map = new atlas.Map(this.mapId, { language: 'en-us', style: 'satellite', showFeedbackLink: false, }); this._map.events.add('ready', (event) => { this._map$.next(event.map); this.map.emit(this._map$.asObservable()); }); this._map.events.add('error', (e) => { console.error(e); this._sharedService.showMessage( 'Error occurred while loading the map', SnackBarClasses.error, ); }); this._map$.next(this._map); }

AzureMapsModule.forRoot({ authOptions: { authType: AuthenticationType.subscriptionKey, subscriptionKey: environment.azureMapsSubscriptionKey, }, }),

Create tilelayer using a GDAL Tiler tilematrix set

steve-smith — Mon, 04 Aug 2025 07:59:20 GMT

I'm porting an application from Bing maps which used many tilesets generated using the GDAL tiler.

In the Bing Maps API these layers needed a custom url which modified the y component.

So where Azure Maps uses the the option tileUrl:url I need something like ...

This works in Bing .....

uriConstructor:function(coord){ // coord is a PyramidTileId with : z,y,zoom,pixwidth,pixheight.

var ymax=1<<coord.zoom;

var y=ymax-coord.y-1;

return url.replace('{x}',coord.x).replace('{y}',y).replace('{z}',coord.zoom);

}

I do so hope there is someone out there with some cool code to get me out of a very tight spot.

Thanks

Steve

Address Search vs Geocode API 2025-01-01?

HSBHSB — Wed, 02 Jul 2025 19:59:08 GMT

What's the difference between the following?

Address Search:
https://atlas.microsoft.com/search/address/json?&subscription-key={Your-Azure-Maps-Subscription-key}&api-version=1.0&language=en-US&query=400 Broad St, Seattle, WA 98109

Geocode using API 2025-01-01

https://atlas.microsoft.com/geocode?api-version=2025-01-01&subscription-key={Your-Azure-Maps-Subscription-key}&query=400 Broad St, Seattle, WA 98109

Both give you the latitude and longitude. What's the preferred one to use? I'm using the 2025-01-01 API for Route Matrix to get distance and time between points already.

Azure Maps computeBestOrder=true returns wrong originalWaypointIndexAtEndOfLeg values

PanosT — Tue, 04 Mar 2025 12:40:53 GMT

Hi.

I am trying to create a module where clients can optimize their routes using the Azure Maps service using DevExpress Map Control v24.2.5

Unfortunately when parsing to Azure Maps service computeBestOrder=true (regardless the RouteType) the JSON back has errors when sets the values for originalWaypointIndexAtEndOfLeg which DevExpress translates, which means cannot keep actual track of the changes in the route.

Example.

computeBestOrder=true

routetype=shortest

query=

while the list of the Legs is correct, the originalWaypointIndexAtEndOfLeg property is not.

So according to the JSON results from the API

(the system ignores Origin and Final Destination so is 0 based list of Waypoints)

0 -> 3 (Is true)
1 -> 2 (Is false, is actually 1 -> 4)
2 -> 0 (Is false, is actually 2 -> 2) - example bellow

3 -> 1 (Is true)
4 -> 4 (Is false, is actually 4 -> 5)

That could have been an non issue if at the same time Azure wasn't truncating the Lat/Lon values, which the rounding is not simple Math.Round 5, so cannot get a meaningful way to build back the changes to the route and apply the correct location labels.

Is there something wrong with the service or the interpretation by myself and DevExpress is not correct when reading the originalWaypointIndexAtEndOfLeg values?

If you have any queries, ορ requiring more information please let me know.

Thank you.

Azure Distance Matrix API - Limiting miles

lvaness — Thu, 13 Feb 2025 21:02:34 GMT

We have a software vendor replacing our bing maps API with Azure Distance Matrix API. We are currently running into an issue where it is not returning any distances that are more than 248 miles. I'm guessing there is some sort of change that needs to be made to extend that to unlimited. Can anyone assist. Thank you

Azure Maps does not zoom out completely

PawelB — Sun, 29 Dec 2024 13:52:31 GMT

I'm working on a WordPress plugin and I needed to migrate from Bing Maps API to Azure Maps.

I noticed that it is not possible to zoom out to the maximum on a map created with the Azure maps API when it is restricted to a smaller portion of a screen. The more noticeable it is, the smaller the map gets.

Example:

This is the maximum zoom-out available.

Comparion with the Bing Maps similar size:

Maximum zoom-out for a Bing Map

Of course, I tested this with minZoom options like:

map = new atlas.Map( "new_map", { center: [0, 0], maxZoom: 24, minZoom: 1 // with 0 map disappears });

As you can see the maximum zoom out is drastically reduced.

This WordPress plugin allows you to show albums with photos from all over the world and smaller maps may not show all of them.

Internet search showed me only one other post about this issue

https://community.fabric.microsoft.com/t5/Issues/Azure-Maps-will-not-completely-zoom-out/idi-p/3446379#feedback-success

and similar but probably not correctly described in here:

The new Azure Maps seems to zoom in too far - Microsoft Q&A

Is there a solution to this problem or I missed something?

Migrate Bing Maps Distance Matrix to Azure Maps Route Matrix

HSBHSB — Tue, 22 Oct 2024 12:41:56 GMT

We currently use Bing Maps API to get distances between points using the distance matrix. We use the following URL:

https://dev.virtualearth.net/REST/v1/Routes/DistanceMatrix?origins={lat0,long0;lat1,lon1;latM,lonM}&destinations={lat0,lon0;lat1,lon1;latN,longN}&travelMode={travelMode}&startTime={startTime}&timeUnit={timeUnit}&key={BingMapsKey}

I've reviewed the migration document and it says to use the Route Matrix in Azure Maps, specifically the following URL:

https://atlas.microsoft.com/route/matrix/sync/json?api-version=1.0&subscription-key={subscription-key}

When I try to use this URL, I get a 405 error every time. I'm not sure of the format to add the origins and destinations like the Bing Maps example has. I'd really prefer to use this API over the SDK as I like to be in control of how I retrieve and pull data out of the results.

Is there an example of using the Route Matrix API?

Azure maps - embedding iframe

Bill_Rankin975 — Sun, 15 Sep 2024 11:52:47 GMT

Hi All,

I have a simple map (html) with pin location and is hosted in azure. Is there any way to embed the map using iframe into a web page? I am receiving a "content unavailable" message. I can defintely confirm the map is working and have tried directly using mobile and different networks.

I think the problem is with the embed. Has anyone been successful in embedding using iframe?

Thanks

Understanding of transactions

EugeneP2450 — Wed, 04 Sep 2024 14:56:31 GMT

Hi!
We are going to create a drone app, where you will fly at some height over the ground. We'd like to use Azure imagery tiles. But it's hard to understand and calculate how much can it potentially cost. Could someone explain please, what actually "transaction" means? Is it like each time you enter the app, or is it more likely tiles requests and 1 transaction == one request?
For example, how many transactions would there be if we needed the drone to fly 1km from point A to B?
Thanks!

Bing Maps "Birds eye View" Alternative

mgharpur — Wed, 28 Aug 2024 14:23:56 GMT

Hi Community,
I need to batch download high-resolution images of specific locations based on latitude and longitude. Previously, I used Bing Maps Bird’s Eye View, which provided the detail and perspective needed to identify objects like 40-yard dumpsters. With the Bing Maps API now discontinued for new users, I'm looking into Azure Maps.

My requirements:

High clarity to accurately identify objects with the zoom level that I can set.
Bird’s Eye View (like Bing Maps) to capture depth and dimensions.

Can you suggest which Azure Maps services would best match these needs? Any guidance would be helpful.

Thanks!

Azure geocoding vs bing maps

m0thman — Wed, 21 Aug 2024 20:32:36 GMT

Hi folks,

I'm using Azure geocoding in an app and I am finding occasions when it's really not working very well and returning low or medium confidence results. However, Bing maps with the same address finds the correct point on the map as do other services such as the UK Address finder app and Post Tag.

The following address highlights the issue well, although there are plenty of others:

Pentland View, Limekiln Road, Macbiehill, West Linton EH46 7BA

It's as if Bing has better map data. Any help greatly appreciated.

azure-maps-animations wont animate marker in Angular 17

victorguillen — Tue, 13 Aug 2024 11:05:38 GMT

Hello. I'm trying to replicate this Azure Maps example, and I have everything working except the marker arrow, which isn't moving. When I provide a map, the camera animates correctly, but the arrow icon remains stationary.

The Atlas library and atlas.animations are present in the browser on runtime, and I am not receiving any console errors from the libraries. Any assistance would be appreciated.

The azure-maps-animations.js used is from the last official release. (I changed azmaps to atlas, but that's beside the point because animation librari is working and present in browser console).

Here it is the HTML code:

<div #myMap style="position:relative;width:100%;min-width:290px;height:600px;"></div> <div style="position:absolute;top:15px;left:15px;border-radius:5px;padding:5px;background-color:white;"> <button (click)="play()">Play</button> <button (click)="pause()">Pause</button> <button (click)="stop()">Stop</button> <button (click)="reset()">Reset</button> <br/><br/> Follow: <input type="checkbox" (click)="toggleFollow()" title="Follow" checked/><br/> Follow offset: <input type="checkbox" (click)="toggleFollowOffset()" title="Follow offset"/><br/> Loop: <input type="checkbox" (click)="toggleLooping()" title="Loop"/><br/> Reverse: <input type="checkbox" (click)="toggleReverse()" title="Reverse"/> </div> <fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;"> <legend>Animate along a route path</legend> This sample shows how to smoothly animate a symbol along a route path taking into consideration timestamps for each point in the route path. This sample also includes controls and options for the animation. This sample uses the open source <a href="https://github.com/Azure-Samples/azure-maps-animations" target="_blank" title="Azure Maps Animation module">Azure Maps Animation module</a> </fieldset>

And the typescript code (it's an angular component):

import { Component, ElementRef, ViewChild } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import atlas from 'azure-maps-control'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.scss', }) export class AppComponent { @ViewChild('myMap', { static: true }) myMap!: ElementRef; map!: atlas.Map; pin!: atlas.Shape; lineSource!: atlas.source.DataSource; pinSource!: atlas.source.DataSource; animation!: any; routePoints = [ new atlas.data.Feature(new atlas.data.Point([-122.34758, 47.62155]), { _timestamp: new Date('Tue, 18 Aug 2020 00:53:53 GMT').getTime() }), new atlas.data.Feature(new atlas.data.Point([-122.34764, 47.61859]), { _timestamp: new Date('Tue, 18 Aug 2020 00:54:53 GMT').getTime() }), new atlas.data.Feature(new atlas.data.Point([-122.33787, 47.61295]), { _timestamp: new Date('Tue, 18 Aug 2020 00:56:53 GMT').getTime() }), new atlas.data.Feature(new atlas.data.Point([-122.34217, 47.60964]), { _timestamp: new Date('Tue, 18 Aug 2020 00:59:53 GMT').getTime() }) ]; constructor() { } ngOnInit() { this.initializeMap(); } initializeMap() { this.map = new atlas.Map(this.myMap.nativeElement, { center: [-122.345, 47.615], zoom: 14, view: 'Auto', authOptions: { authType: atlas.AuthenticationType.subscriptionKey, subscriptionKey: 'API_KEY', }, }); this.map.events.add('ready', () => this.onMapReady()); } onMapReady() { this.map.imageSprite.createFromTemplate('arrow-icon', 'marker-arrow', 'teal', '#fff').then(() => { this.initializeSourcesAndLayers(); this.initializePin(); this.initializeAnimation(); }); } initializeSourcesAndLayers() { this.lineSource = new atlas.source.DataSource(); this.pinSource = new atlas.source.DataSource(); this.map.sources.add([this.lineSource, this.pinSource]); const path = this.routePoints.map(f => f.geometry.coordinates); this.lineSource.add(new atlas.data.LineString(path)); this.map.layers.add(new atlas.layer.LineLayer(this.lineSource, null, { strokeColor: 'DodgerBlue', strokeWidth: 3 })); this.map.layers.add(new atlas.layer.SymbolLayer(this.pinSource, null, { iconOptions: { image: 'arrow-icon', anchor: 'center', rotation: ['+', 180, ['get', 'heading']], rotationAlignment: 'map', ignorePlacement: true, allowOverlap: true }, textOptions: { ignorePlacement: true, allowOverlap: true } })); } initializePin() { this.pin = new atlas.Shape(this.routePoints[0]); this.pinSource.add(this.pin); } initializeAnimation() { this.animation = (window as any).atlas.animations.moveAlongRoute(this.routePoints, this.pin, { timestampProperty: 'timestamp', captureMetadata: true, loop: false, reverse: false, rotationOffset: 0, speedMultiplier: 60, map: this.map, zoom: 15, pitch: 45, rotate: true }); } toggleAnimationOption(option: string, value?: any) { const options = this.animation.getOptions(); this.animation.setOptions({ [option]: value !== undefined ? value : !options[option] }); } play() { this.animation.play(); } pause() { this.animation.pause(); } stop() { this.animation.stop(); } reset() { this.animation.reset(); } toggleFollow() { this.toggleAnimationOption('map', this.map); } toggleFollowOffset() { this.toggleAnimationOption('rotationOffset', this.animation.getOptions().rotationOffset === 0 ? 90 : 0);} toggleLooping() { this.toggleAnimationOption('loop'); } toggleReverse() { this.toggleAnimationOption('reverse'); } }

Android SDK BoundingBox padding works different than the padding from web sdk?

adrian23135 — Wed, 03 Jul 2024 17:24:14 GMT

Hello! I'm currently working on an Android application and I have to migrate the map from native sdk to web sdk using webview. I'm our current logic we use a lot the bounding box so we can have direct visibility of 2 pins, the main issue is that when I'm trying to add bearing and padding it seems like it is applied relative to the current orientation rather than on android sdk where it applies in absolute directions, regardless of the map's bearing. Has anyone encountered this or anyone know any tips for this? Thanks!

How to remove highlight on previously selected feature in geojson data on Azure Map polygon layer

JadedBelle — Wed, 12 Jun 2024 19:04:34 GMT

I've been trying to fix the following code so that when a user clicks on a feature in the geojson data, the selected polygon is highlighted. And when user clicks on another polygon, the previously selected polygon/feature is no longer highlighted and the currently selected polygon is highlighted. Can anybody see what I'm doing wrong?

map.events.add('ready', function () { //Change the cursor of the mouse when it is over the map to be a pointer. map.getCanvasContainer().style.cursor = 'pointer'; //Create a data source and add it to the map. ds = new atlas.source.DataSource(); //Load jsonData file fetch(jsonData) .then(response => response.json()) .then(results => { if (results.features[1].properties.CNTY == county_name) { ds.add(results.features); } })//end then .catch(error => console.error('Error loading GeoJSON:', error)); //Add jsonData to sources map.sources.add(ds); //Add a layer for rendering a different color polygon when clicked var polygonLayer = new atlas.layer.PolygonLayer(ds, null, { fillColor: "rgba(176,48,96, 0.5)" //maroon }) map.layers.add(polygonLayer, 'labels'); var selectedLine = new atlas.layer.LineLayer(ds, null, { strokeColor: 'black', strokeWidth: 1 }); map.layers.add(selectedLine, 'labels'); //Add click events to polygonLayer map.events.add('click', polygonLayer, function (e) { selected = e.shapes[0]; //Add a layer for rendering a different color polygon when clicked var polygonClickedLayer = new atlas.layer.PolygonLayer(ds, null, { fillColor: 'rgb(102, 255, 0)', //green //Only polygons with a "FUID" property with a value of selectedID will be rendered. filter: ['==', ['get', 'FUID'], selected.properties.FUID] }) map.layers.add(polygonClickedLayer, 'labels'); //Add a layer for rendering a different polygon border color when clicked var selectedLineLayer = new atlas.layer.LineLayer(ds, null, { strokeColor: 'orange', strokeWidth: 2, //Only polygons with a "FUID" property with a value of selectedID will be rendered. filter: ['==', ['get', 'FUID'], selected.properties.FUID] }); map.layers.add(selectedLineLayer, 'labels'); ftrCentroid = calculateFieldCentroid(selected); map.setCamera({ zoom: 15, center: ftrCentroid }); }); });

Azure Maps not displaying on .Net Framework Web App

JadedBelle — Mon, 03 Jun 2024 16:23:21 GMT

Hi,

I just created a subscription for Azure Maps. I'm using Visual Studio 2019 for my web application using .Net Framework 4.8, MVC.

My references in the layout web page are:

<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" rel="stylesheet" type="text/css" />

<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

The function to initialize the Azure Maps is:

function GetMap() {
// Initialize a map instance.
map = new atlas.Map('divMap', {
center: [39.011902, -98.484247],
zoom: 5,
view: 'Auto',

// Add authentication details for connecting to Azure Maps.
authOptions: {
// Use an Azure Maps key.
// Get an Azure Maps key at https://azure.com/maps.
// NOTE: The primary key should be used as the key.

authType: 'subscriptionKey',
clientId: azureMapsClientId,
subscriptionKey: azureKey
}
});
}

Why is the map not showing? I just want to display a satellite imagery of the US as background map.

Appreciate any help.

Migrating from “Bing Maps” to “Azure Maps”.

COM-ADD — Thu, 23 May 2024 13:40:51 GMT

Hello,

I have just received your email announcing the end of support for “Bing Maps” on June 30, 2025. This service is being replaced by “Azure Maps”.

Currently I use the C# object: Windows.UI.Xaml.Controls.Maps.MapControl , with the associated Xaml: xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps" and <Maps:MapControl MapServiceToken="{StaticResource MapCredentials}" />.

I saw that there is an Azure.ResourceManager.Maps package but this package does not have a native component for Xaml. It looks like I need to use the WebView component ( <WebView x:Name="mapWebView" /> ) instead.

This WebView displays an HTML page with JavaScript code that calls the https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js code to perform authentication via a YOUR_AZURE_MAPS_KEY and displays a map to the screen.

Can anyone confirm this method of using "Azure Maps" with a Xaml project?

Thanks in advance,

Best regards

C-A

3D styling for indoor maps

Mark_Phillips — Sat, 18 May 2024 09:16:49 GMT

Is it possible to extrude walls for an Azure indoor map so rooms give a 3D appearance in a pitch view?

IndoorManager tilesetId configuration

Mark_Phillips — Fri, 17 May 2024 04:17:08 GMT

I've asked this question direct to a team member but thought I'd ask here too as it might benefit the community.

I am using azure-maps-indoor v0.2.3 and azure-maps-control v3.2.1 to attempt to render a tileset using manifest 2.0. The IndoorManagerOptions has a tilesetId and this is how I have traditionally applied a tileset to the IndoorManager (v0.1.x). The Azure map samples I am seeing now do not use this at all, and instead use mapConfiguration, domain and styleAPIVersion properties of the Map object instead.

Does this mean my original setup will not work and therefore requires me to add a pipeline step to create a MapConfiguration for my tileset?

Additional Info:

I should note that my pipeline is created using a global maps account and I still ingest data using the deprecated (but still available) data upload api, and then the conversion, dataset, tileset and routeset make use of Creator openapi spec 2023-03-01-preview (as this is a manifest 2.0 package).

I am still using a global maps account as my infrastructure uses Crossplane over Terraform providers and the azurerm provider does not support setting the required maps account properties for a data registry appropriate setup. Of course there is an issue with Terraform for this and living in hope that it is resolved prior to the maps account data plane data api deletion deadline.

In React (CRA) project, cannot load azure-maps-geolocation-control.js external Azure Map script

Joanne520 — Thu, 16 May 2024 02:22:43 GMT

I am working with a CRA React project. In a React component, I have tried to import and load an external Azure Map standalone script like azure-maps-geolocation-control which adds on to the Azure Map namespace (atlas). In this React component I have imported Azure Map SDK like azure-maps-control which works fine to render the map and supplies the namespace.

Under map ready event, I have tried to instantiate GeolocationControl object but seems like the script cannot read the atlas namespace. This external script is placed in public folder and dynamically placed in <head> of index.html .

How to make the script link to Azure Map SDK namespace, in a React component? Thank you

Azure Maps Click event on a map point is getting registered twice

KartheekKumbham — Mon, 11 Mar 2024 13:34:08 GMT

After reintialization of Azure Maps, when we click on any point on the Map.

The event is getting fired twice. Can you suggest a solution to supress the click event to get it fired twice or can we remove the multiple click handlers ?