Forum Widgets
Latest Discussions
Azure Maps computeBestOrder=true returns wrong originalWaypointIndexAtEndOfLeg values
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
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 youUsing Azure Maps in ArcGIS and QGIS
Azure Maps allows you to create location-aware web and mobile applications using simple and secure geospatial services, APIs, and SDKs in Azure. It includes services for maps, traffic, search, routing, spatial operations, mobility, weather, etc. See here for more information. With that said, moving to the cloud can be a huge shift. You have to learn how Microsoft Azure works, learn dozens of new services, change how an organization budgets, build cloud apps, etc. It’s a daunting task so in this article I’m going to show how you can bring the cloud to your existing GIS using a few very simple steps. I’m going to show how to display the Azure Maps base maps in ArcGIS Online, ArcGIS Pro and QGIS. Obtain your Azure Maps account key The first thing you need to do is get your Azure subscription. Follow the steps here for a $200 credit or buy a subscription. Once you have a subscription, you can now create an Azure Maps account by following these instructions. Once you have your Azure Maps account, get your Primary Key from the Azure Portal as described here. Note it because you’ll need it in later steps. You now have an account and a key to start using Azure Maps in ArcGIS or QGIS. Using Azure Maps in ArcGIS Online You are now ready to use the Azure Maps base maps in ArcGIS Online but first let’s review what kind of base maps are available. Azure Maps has several map styles which are referred to as basemaps in ArcGIS. See this document for a description of each one. However, to use an Azure Maps map you will need to refer to it via a URL when adding a tiled layer. The Azure Maps Render API is described here. The URL will look like this and please make sure you are using the latest version of the API as the version date in bold will change as new versions are released: https://atlas.microsoft.com/map/tile?api-version=2024-04-01&tilesetId=microsoft.imagery&zoom={z}&x={x}&y={y}&subscription-key=xxxxxxxxxxx In order to actually use the map, you’ll need to provide a TilesetId and also a subscription key (Primary Key). The TilesetID list is located near the bottom of this page and listed here for reference but be sure to look at our latest documentation as these options may change: Name Type Description microsoft.base string A base map is a standard map that displays roads, natural and artificial features along with the labels for those features in a vector tile. Supports zoom levels 0 through 22. Format: vector (pbf). microsoft.base.darkgrey string All layers with our dark grey style. Supports zoom levels 0 through 18. Format: raster (png). microsoft.base.hybrid string Displays road, boundary and label data in a vector tile. Supports zoom levels 0 through 22. Format: vector (pbf). microsoft.base.hybrid.road string Road, boundary and label data in our main style. Supports zoom levels 0 through 18. Format: raster (png). microsoft.base.labels string Displays labels for roads, natural and artificial features in a vector tile. Supports zoom levels 0 through 22. Format: vector (pbf). microsoft.base.labels.road string Label data in our main style. Supports zoom levels 0 through 18. Format: raster (png). microsoft.base.road string All layers with our main style. Supports zoom levels 0 through 18. Format: raster (png). microsoft.imagery string A combination of satellite and aerial imagery. Only available in S1 pricing SKU. Supports zoom levels 1 through 19. Format: raster (jpeg). microsoft.terra.main string Shaded relief and terra layers. Supports zoom levels 0 through 6. Format: raster (png). microsoft.weather.infrared.main string Weather infrared tiles. Latest Infrared Satellite images shows clouds by their temperature. Please see coverage information for Azure Maps Weather service. To learn more about the returned Satellite data, please see Weather concepts. Supports zoom levels 0 through 15. Format: raster (png). microsoft.weather.radar.main string Weather radar tiles. Latest weather radar images including areas of rain, snow, ice and mixed conditions. Please see coverage information for Azure Maps Weather service. To learn more about the Radar data, please see Weather concepts. Supports zoom levels 0 through 15. Format: raster (png). To use one of these styles you’ll need to pass in the TilesetID and your Primary Key as shown here: https://atlas.microsoft.com/map/tile?zoom={z}&x={x}&y={y}&tilesetId=microsoft.imagery&api-version=<date>&subscription-key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Be sure to replace those Xs with your Azure Maps account Primary Key you noted earlier. To use one of the styles you will need to create a new map in ArcGIS Online. See here. From ArcGIS Online click the Add button and then click Add Layer from Web. Select A Tile Layer from the dropdown option. Paste in the URL we just created. Click Use as Basemap (optional). Enter a title such as “Azure Maps Imagery” and the credits would be “© TomTom, Microsoft”. See here: The imagery should appear on the map. You can now add other layers and other content to your map. For example, to use the weather data add another layer and pass in the following URL: https://atlas.microsoft.com/map/tile?zoom={z}&x={x}&y={y}&tilesetId=microsoft.weather.radar.main&api-version=<date>&subscription-key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX To use this map in ArcGIS Pro, be sure to save the map. Use the imagery in ArcGIS Pro Now that you have a map with an Azure Maps map, you can now use it in ArcGIS Pro. See the section called Add a web map or web scene to the project here. Use Azure Maps in QGIS Another option is to use Azure Maps in Quantum GIS (QGIS). This too is a very easy task. Open QGIS and under the Browser window right-click on XYZ Tile and click New Connection… and enter in a Name such as Imagery and pass in any one of the previous URLs. Click OK. Double-click the layer to add it to the Layers Panel. Re-order the layers as necessary. The results will be added to the map as shown here: Happy mapping. Please provide any feedback below.
Azure Maps does not zoom out completely
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: Comparion with the Bing Maps similar size: 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
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
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
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 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.
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 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?
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!
