Microsoft’s new Azure map service continues to add new features for developers and improve existing APIs
When you add your own data source to a map, Azure Maps is now much more flexible about what you can do with that data. If you want to render it on the map in different ways – maybe clustering points of interest that are close together and showing them with a combined icon, or combining images and symbols to put an icon in the centre of a circle on the map, or even just drawing a polygon with a fill and an outline and adding pushpins for specific locations inside the polygon – you used to need another copy of the data for each layer.
Now, Azure Maps separates the data source from any layers, so a single copy of the data is used for as many rendering layers as you want to use with the map – and modifying data in a layer no longer requires overwriting the entire layer. All the rendering is done in WebGL and the logic for any calculations (like sizing a bubble on the map) happens at render time; that means one fewer iteration over the data, speeding up processing and reducing memory usage. One data source can contain the details for multiple layers.
As well as GeoJSON vector spatial data, you can use the new VectorTileSource class to add vector tile services that can be bubbles scaled on the map, filled polygons, lines and polygon outlines, or symbols (text, icons or both). If you want to superimpose raster tiled images on a map, you can specify a TileLayer.
Alternatively, you can use HTML and CSS to render data on a map, making it much easier to have the map annotations fit in with the style of your application or website (although that can be slow for a very large number of shapes).
If GeoJSON data on the map needs to be updated – to show the position of travelling vehicles or changing figures like temperature or other readings from IoT devices – that used to require removing and replacing the object. Now developers can wrap data points with the new Shape class; update the GeoJSON data and the data source will reflect the changes automatically. This is ideal for real-time dashboards using maps, like the map interface in Azure IoT Central.
Azure Maps now includes a new spatial math library with many of the common calculations developers need when working with maps: the distance or heading between two points, the length of a path, distance conversions, cardinal splines to generate smooth curved paths and geodesign paths between points that take account of the curvature of the earth. For more advanced spatial calculations, developers can use the open source, modular Turf.js library but it’s not automatically included because of its size.
As the GeoJSON schema still doesn’t include a standard way to define a geospatially accurate circle that scales as users zoom in and out on the map and that faithfully follows the curvature of the earth rather than the naïve geometry of a map, Azure Maps has backwardly compatible extensions to do this. Set the centre point and radius using JSON and the web control or new helper classes in the atlas.data namespaces, and Azure Maps generates a circular polygon that can be used with different rendering layers.
If you’re using existing Azure Maps APIs, you’ll find them rather better organised instead of scattered rather haphazardly through the 30 functions on the Maps class; now they’re grouped logically and many of the default map settings can be created in the root ‘atlas’ namespace where they will apply to all the maps you work with. You can put your Azure Maps API key there too, instead of having to pass it in to your application multiple times. These changes are backwardly compatible so existing applications don’t need to be updated, but you need to make sure that your map code uses an event listener to make sure that the next line of code isn’t called until the map control has loaded its WebGL canvas and other resources. Developers can find sample code for that in the Azure Maps blog.
The Azure Maps code sample site has been updated to cover all the new styling options in the latest release, plus the new dark mode and satellite imagery added earlier in the summer. There are more than twice as many ways to style maps and you can try them all out interactively and then copy out the code to generate that styling in your own app.
The code sample site covers other recent additions to Azure Maps like the Route Matrix tool in the Azure Maps Routing Service for pre-set and real-time routing from multiple origins to multiple destinations, with up to 700 cells in the matrix.
The Routing Service also includes a preview of Route Range, a service for calculating isochrones; that can show how far you can travel in a certain time or with a certain amount of fuel (including electric vehicle charge). Combine that with the Azure Maps Search API to add points of interest to the range polygon, to show gas stations, charging points or parking that’s in range. You can also filter searches by administrative areas – countries, states, regions, cities, municipalities, sub-divisions, neighbourhoods, postal codes or counties. That gives you another option for filtering search results down by range, time, type or administrative location – like finding parking locations covered by parking permits issued by a local council that are in driving range.
Batch routing can now calculate up to 1,000 routes at once to compare options, and batch geocoding (including reverse geocoding), now handles up to 10,000 requests in only a few minutes.
Even though Azure Maps is developing fast, if the mapping APIs you need aren’t in the service yet, you’re not restricted to using Azure Maps data with the Azure Maps control; if you prefer, you can use that data in third party map controls. If you’re working with ESRI products, you can use it with ArcGIS, or use it with CesiumJS to create 3D globes, with Leaflet for mobile friendly maps or in OpenLayers. This makes it a very flexible option.
The Grey Matter cloud location services team can answer any questions you have about Azure Maps and your use case. Contact them: +44 (0)1364 655 133 or email@example.com