Forum Widgets
Latest Discussions
Create tilelayer using a GDAL Tiler tilematrix set
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
Could not load image because of out of range source coordinates for image copy.
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, }, }),
Address Search vs Geocode API 2025-01-01?
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
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 https://azure.microsoft.com/en-us/services/azure-maps/#azuremaps-features 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 https://azure.microsoft.com/en-us/free/search/?&OCID=AID2100131_SEM_XRYtNgAAFXXL0OvR:20201002121441:s&msclkid=912ef0d9cee91438098fafaed74e7efc&ef_id=XRYtNgAAFXXL0OvR:20201002121441:s&dclid=COzesZ7xlewCFVpVDQodnSkLIA for a $200 credit or buy a subscription. Once you have a subscription, you can now create an Azure Maps account by following these https://docs.microsoft.com/en-us/azure/azure-maps/how-to-manage-account-keys. Once you have your Azure Maps account, get your Primary Key from the Azure Portal as described https://docs.microsoft.com/en-us/azure/azure-maps/quick-demo-map-app#get-the-primary-key-for-your-account. 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 https://docs.microsoft.com/en-us/azure/azure-maps/supported-map-styles 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 https://docs.microsoft.com/en-us/rest/api/maps/renderv2/getmaptilepreview. 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://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fatlas.microsoft.com%2Fmap%2Ftile%3Fapi-version%3D2024-04-01%26tilesetId%3Dmicrosoft.imagery%26zoom%3D%257bz%257d%26x%3D%257bx%257d%26y%3D%257by%257d%26subscription-key%3Dxxxxxxxxxxx&data=05%7C02%7CJustine.Coates%40microsoft.com%7C0a3185b32f0c40bc136108dd3a344ad8%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C638730718468737706%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=Uf285P0z%2B5%2BMjRVM%2FSc1I8Ckn3ij3H%2BPN15y%2B4EtK6Q%3D&reserved=0&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 https://docs.microsoft.com/en-us/rest/api/maps/renderv2/getmaptilepreview#tilesetidis 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 https://aka.ms/AzureMapsWeatherCoverage for Azure Maps Weather service. To learn more about the returned Satellite data, please see https://aka.ms/AzureMapsWeatherConcepts. 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 https://aka.ms/AzureMapsWeatherCoverage for Azure Maps Weather service. To learn more about the Radar data, please see https://aka.ms/AzureMapsWeatherConcepts. 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 https://doc.arcgis.com/en/arcgis-online/get-started/get-started-with-maps.htm. 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 https://pro.arcgis.com/en/pro-app/help/projects/add-maps-to-a-project.htm. 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.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 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 http://Power%20Bi%20community%20forum and similar but probably not correctly described in here: https://learn.microsoft.com/en-us/answers/questions/1463153/the-new-azure-maps-seems-to-zoom-in-too-far Is there a solution to this problem or I missed something?Preview of new Azure Maps Elevation service REST APIs
This blog post was authored by Igor Vodov, Principal Program Manager, Azure Maps. We're excited to announce that new geospatial features are coming to Microsoft Azure Maps. With these new features, developers will be able to add elevation data to their applications and start supporting scenarios that require ground truth terrain information. Read on to learn more about the latest elevation features and integrations with Airbus digital elevation model for Azure Maps. As urbanization continues to grow, cities must adapt their urban planning and infrastructure operation strategies to address physical and economic challenges. To unlock their full economic potential, cities can use digital technologies to transform and interconnect key areas of their ecosystem, such as roads, buildings, energy grids, and water networks. The ground truth elevation data can be used to build the digital twins to validate the predictions against the underlying physical-based models. For example, when a water department of a city creates a water network and must determine where to lay out the water pipelines, they can use elevation data to understand the layout and health of water pipelines in the event of a flood. By using elevation data in their flood analysis, city engineers can correct the water pipeline layout to minimize impact in the event of a rupture. Also, it will be possible for them to predict the impact to local businesses when a water pipe breaks down. If they are able to translate the downtime of a business to actual economic losses, they can develop strategies to make cities around the world more livable, sustainable, and economically viable. Similarly, energy companies can use elevation data to analyze where to place their power-generating equipment. Also, construction companies can use elevation data to determine where to build roads or bridges. The ability retrieve elevation data at a global scale is powered by Azure Maps. Azure Maps uses the 24-meter WorldDEM4Ortho dataset from https://www.intelligence-airbusds.com/elevation-models/#worlddemWorldDEM portfolio, which covers the Earth’s entire land surface. The dataset represents a consistent 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 and land-use such as urban areas. You can use the new elevation features in your development environment through easy-to-use https://docs.microsoft.com/rest/api/maps/elevation. You can pass in latitude and longitude pairs 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 data as a bounding box for a region on the Earth’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 shows how to use the map control to display elevation data at a coordinate point. You can also use https://docs.microsoft.com/rest/api/maps/renderv2 to retrieve elevation data 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: Provide the end-user with elevation information at specific points Visualize the elevation profile along a pre-computed route line Provide end-user with a 3D experience by generating hill-shades Here is an example of API call to look up elevation for two latitude 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 are now in Public Preview, with many more features to follow soon. To start experimenting with these new capabilities in your organization, see our https://docs.microsoft.com/en-us/azure/azure-maps/how-to-request-elevation-data. 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 https://samples.azuremaps.com/?sample=animate-along-a-route-path, 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 https://github.com/Azure-Samples/azure-maps-animations/releases/tag/252490. (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'); } }
