Forum Widgets
Latest Discussions
Migrate Bing Maps Distance Matrix to Azure Maps Route Matrix
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?Preview of new Azure Maps Elevation service REST APIs
This blog post was authored by Igor Vodov, Principal Program Manager, Azure Maps. We'reexcited toannouncethat new geospatial features are coming to Microsoft Azure Maps.With these new features, developers will be able toaddelevation datatotheirapplicationsand start supporting scenariosthatrequire ground truth terrain information.Read on to learn more about the latestelevationfeatures and integrationswith Airbus digital elevation model forAzure Maps. As urbanization continuestogrow,citiesmustadapttheirurban planningandinfrastructureoperation strategies toaddressphysical andeconomicchallenges.To unlock their full economicpotential, citiescanuse digital technologies to transform and interconnect key areas of their ecosystem, such asroads, buildings, energy grids, and water networks.The ground truth elevation data can be used to build the digital twinstovalidate the predictionsagainstthe underlying physical-based models.For example, when a water department of a citycreates a water network andmustdeterminewhere to lay outthe water pipelines,theycanuse elevation data to understand the layout and health of waterpipelinesintheevent of a flood.By using elevation data intheirflood analysis,cityengineerscan correctthewater pipeline layoutto minimize impact in the event of arupture.Also, it will be possible for them topredict the impact tolocalbusinesses when a water pipe breaks down.If theyare able totranslate the downtime of a business to actual economic losses, they can develop strategiestomake cities around the world more livable, sustainable, and economically viable. Similarly, energy companies can use elevation data to analyze where toplace theirpower-generating equipment.Also, constructioncompanies canuse elevation datatodeterminewhere to build roads or bridges.The abilityretrieveelevation data at a global scale is powered by Azure Maps. Azure Maps usesthe24-meterWorldDEM4Ortho dataset fromAirbusWorldDEMportfolio,which covers the Earth’s entire land surface.The dataset representsaconsistent and accurate elevation model at a global scale, meaning that regardless of the area you’d like to query, the dataset features 4-meter vertical accuracy in a 24-meter raster.Identified disturbing terrain artifacts are removed,and bodies of water like lakes or seas are flattened.Rivers are stepped with a flow that follows the surrounding shorelines.Adaptive smoothing processes are also applied to different landscapes andland-use such as urban areas. You can use the newelevationfeatures in your development environment through easy-to-useAzure Maps APIs.You can pass inlatitudeandlongitudepairs into the APIs or define a polyline described by latitude and longitude pairs.One of the interesting features of this API is the ability to provide elevation dataas a bounding box fora region on theEarth’s surface.The elevation values are calculated using the geoid sea level Earth model.The geoid sea level mode uses the Earth Gravitational Model 2008 (EGM2008)and computes a sea level based on the local value of gravity.This screenshot showshow to use the map control to display elevationdata at a coordinate point. You can also useAzure Maps Render v2 APIto retrieveelevationdata in tile format.With terrain tiles, you have the power to customize the visual appearance of your map on the fly and perform complicated analysis on the client. Some example use cases for this API are: Providethe end-user with elevation information at specific points Visualizethe elevation profile along a pre-computed route line Provideend-user with a 3D experience by generating hill-shades Here is an example of API call to look up elevation fortwolatitude and longitude pairs: https://atlas.microsoft.com/elevation/point/json?subscription-key={Azure-Maps-Primary-Subscription-key}&api-version=1.0&points=-73.998672,40.714728|150.644,-34.397 { "data": [ { "coordinate": { "latitude": 40.714728, "longitude": -73.998672 }, "elevationInMeter": 12.142355447638208 }, { "coordinate": { "latitude": -34.397, "longitude": 150.644 }, "elevationInMeter": 384.47041445517846 } ] } These capabilities arenowin Public Preview,with many more features to follow soon.Tostart experimenting with these new capabilities in your organization, see ourHow to Request Elevation Data in Azure Maps.We can’t wait to see what you build with these APIs.
azure-maps-animations wont animate marker in Angular 17
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 lastofficial 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'); } }
Azure geocoding vs bing maps
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.
Bing Maps "Birds eye View" Alternative
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 maps - embedding iframe
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
How to remove highlight on previously selected feature in geojson data on Azure Map polygon layer
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 }); }); });
Migrating from “Bing Maps” to “Azure Maps”.
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 usethe 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-AAndroid SDK BoundingBox padding works different than the padding from web sdk?
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 appliesin absolute directions,regardless of the map's bearing. Has anyone encountered this or anyone know any tips for this? Thanks!
