Azure Maps is an easy to integrate service for applications that need to access mapping features including weather details, fastest route, location search, etc. So either you’re building an application with delivery service or you just need to inform users about weather and current events; Azure Maps can be a one stop solution for it. In this article, we will learn more about Azure Maps and also we will build a demo application with Azure Maps.
What are Azure Maps?
Microsoft Azure Maps is a powerful geospatial tool with the freshest mapping data in the industry. It is available for both mobile and web applications through a Web and Android sdk. It enables developers to add accurate mapping data in their applications.
● It offers time zone and geolocation services around the world.
● You can insert a real time traffic flow view in your application.
● It also offers location intelligence and search options to locate a particular address, place or point of interest.
● It has several routing options like a commercial vehicle, multipoint, point-to-point, electric vehicle, matrix and multipoint optimization routing.
What are the major services offered by Azure Maps?
You can not say that Azure Maps is just a usual mapping service as it provides several other services to developers such as:
● Render Service: You can request and access different Azure maps tiles such as weather, road or tiles created by Azure Maps creators.
● Geolocation Service: With the help of geolocation service, you can retrieve two letter region/country code for an IP address to improve user experience.
● Data Service: You can upload and store geospatial data and it helps in increasing productivity and reducing latency by bringing customer data closer.
● Route Service: Route service API uses information like usual speed on road, real time traffic information, etc to calculate the estimated arrival time(ETA) for a particular route. Moreover it returns the shortest and fastest path to reach at a given location. This service offers route ETA calculation across different modes such as walking, bicycle, bike, car, and electric vehicle.
● Search Service: It enables you to search for places, addresses and other geographic information.
● Timezone Service: You can query current, previous and future time zone information.
● Spatial Service: This quickly analyzes present information about a location to inform you about ongoing events.
● Weather Service: Developers can retrieve weather information using weather service API.
● Traffic Service: If you need traffic information in your application then Traffic Service can help you.
Supported regions by Azure Maps
Azure Maps is available across the globe except China and South Korea.
Pricing of Azure Maps
Azure Maps has two pricing tiers — Gen 1 and Gen 2. You are charged based on the services and type of map that you are using. You can visit here for detailed pricing of Azure Maps.
How to integrate Azure Maps in a website?
Here we will use the Azure Maps Web SDK to create a map with interactive search experience. We will first create the Azure Maps account using Azure Portal and then integrate it with a demo application using primary key.
Create an Azure Maps Account
- Login to your Azure portal and navigate to Azure Maps Account.
- Click on the Create Azure Maps Account button and enter the required information.
● Subscription: Azure Subscription that you want to use for Azure Maps
● Name: Enter a name for Maps account
● Region: Select a region for resource deployment
● Pricing Tier: Select a pricing tier(For now select Gen2)
3. Click on Review + Create and then on Create. This will take a few minutes and your Azure Maps account will be created.
Get the primary key for the Azure Maps account
We have created the Azure Maps account and now we need the primary key for that account to query the Maps APIs. Here we are using the shared key authentication method but we would recommend to you to use Azure Active Directory authentication if you are working with real-time applications with sensitive information.
- Navigate to Azure Maps account.
- From the left pane, under the settings section select Authentication.
- Here you will see a Client ID, Primary Key and Secondary Key. Copy and save the primary key locally to use it further.
Add the primary key in our demo application
Here we are using a sample application which shows an animated path. Copy the following code and save it locally on your system. Replace <Azure Maps primary key> with your primary key and try to run it.
<!DOCTYPE html><html lang="en"><head><title>Animate a path in Azure Maps</title><meta charset="utf-8" /><link rel="shortcut icon" href="/favicon.ico"/><meta http-equiv="x-ua-compatible" content="IE=Edge" /><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><!-- Add references to the Azure Maps Map control JavaScript and CSS files. --><link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" /><script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script><!-- Add reference to the animation module. --><script src="../Common/scripts/azure-maps-animations.min.js"></script><script type='text/javascript'>var map, pin, lineSource, pinSource;var animationTime = 15000;var animation;//Create an array of points to define a path to animate along.var path = [[-122.34758, 47.62155],[-122.34764, 47.61859],[-122.33787, 47.61295],[-122.34217, 47.60964]];function GetMap() {//Initialize a map instance.map = new atlas.Map('myMap', {center: [-122.345, 47.615],zoom: 14,view: 'Auto',//Add authentication details for connecting to Azure Maps.authOptions: {authType: 'subscriptionKey',subscriptionKey: 'Azure Maps Primary key'}});//Wait until the map resources are ready.map.events.add('ready', function () {//Load a custom image icon into the map resources.map.imageSprite.createFromTemplate('arrow-icon', 'marker-arrow', 'teal', '#fff').then(function () {//Create data sources and add them to the map.lineSource = new atlas.source.DataSource();pinSource = new atlas.source.DataSource();map.sources.add([lineSource, pinSource]);//Create a layer to render the path.map.layers.add(new atlas.layer.LineLayer(lineSource, null, {strokeColor: 'DodgerBlue',strokeWidth: 3}));//Create a line for the path and add it to the data source.lineSource.add(new atlas.data.LineString(path));//Create a layer to render a symbol which we will animate.map.layers.add(new atlas.layer.SymbolLayer(pinSource, null, {iconOptions: {//Pass in the id of the custom icon that was loaded into the map resources.image: 'arrow-icon',//Anchor the icon to the center of the image.anchor: 'center',//Rotate the icon based on the rotation property on the point data.//The arrow icon being used in this case points down, so we have to rotate it 180 degrees.rotation: ['+', 180, ['get', 'heading']],//Have the rotation align with the map.rotationAlignment: 'map',//For smoother animation, ignore the placement of the icon. This skips the label collision calculations and allows the icon to overlap map labels.ignorePlacement: true,//For smoother animation, allow symbol to overlap all other symbols on the map.allowOverlap: true},textOptions: {//For smoother animation, ignore the placement of the text. This skips the label collision calculations and allows the text to overlap map labels.ignorePlacement: true,//For smoother animation, allow text to overlap all other symbols on the map.allowOverlap: true}}));//Create a pin and wrap with the shape class and add to data source.pin = new atlas.Shape(new atlas.data.Feature(new atlas.data.Point(path[0])));pinSource.add(pin);//Create the animation.animation = atlas.animations.moveAlongPath(path, pin, {//Capture metadata so that data driven styling can be done.captureMetadata: true,duration: 4000,loop: document.getElementById('loopAnimation').checked,reverse: document.getElementById('reverseAnimation').checked,rotationOffset: (document.getElementById('reverseAnimation').checked)? 90: 0,//If following enabled, add a map to the animation.map: (document.getElementById('followSymbol').checked)? map: null,//Camera options to use when following.zoom: 15,pitch: 45,rotate: true});});});}function toggleFollow(){animation.setOptions({map: (animation.getOptions().map)? null : map});}function toggleFollowOffset(){animation.setOptions({rotationOffset: (animation.getOptions().rotationOffset === 0)? 90 : 0});}function toggleLooping(){animation.setOptions({loop: !animation.getOptions().loop});}function toggleReverse(){animation.setOptions({reverse: !animation.getOptions().reverse});}</script></head><body onload="GetMap()"><div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div></body></html>
When you open this demo application, you will see an animated path highlighted. You can view more web sdk samples of Azure maps here.
Wrapping Up
Azure Maps is an easy to use and secure service when you want to integrate geographical capabilities in your application. It offers support for both web and mobile, so you can start with any platform.
