Overview Of Azure Maps

In this article let’s take an overview of Azure Maps. The Azure Maps provides the geospatial capability for mapping the data. Since the Azure Maps are available for both Mobile and Web they are packed with the freshest mapping of data, and in addition to that the Azure maps offers the search, maps, routing, traffic and mobility, weather, etc. Before getting started on working with Azure maps, lets create an account.

Prerequisites

Azure Subscription

Step 1

Step 2

From the Azure portal menu, or from the Home page, select Create a resource. In the Search box, enter Maps. From the results list, choose Maps. Choose Create.

For creating the map account, we need to provide the following basic required values,

Provide a name for the account.
Select the resource group if you have any existing or you can create a new resource group.
Select the subscription and select the pricing tier for the account.

Finally, click on Create button for creating the Azure map account.

Step 3

Now we can see that we have successfully created the maps account and now we have to retrieve the primary key, the primary key is for enabling the querying of the map API’s. For retrieval of the primary keys Select >> Authentication.

Copy the primary key to your clipboard so that we can use it later.

Step 4

Here comes the main part, now we have to create a new map. For that, just create an html file in your local PC and place the following code inside of the html file.

What happens here is the MAP control API is a convenient library in which the API allows us to integrate maps into the web application, since the productivity will be increased due to the hidden complexity of the bare REST service calls. Now let’s get back to the process.

Let’s add some of the code inside the GetMap function in the html file. Make sure you have placed the primary key inside of the <your azure map key> tag.

Now if we run the html file in the browser, we can see the map is displayed in the browser by calling atlas.map using the account key.

Step 5

Let’s keep on proceeding to the next step, now add the following code in the GetMap (), after initializing the map

//Wait until the map resources are ready.
map.events.add('ready', function() {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a layer for rendering point data.
var resultLayer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'pin-round-darkblue',
anchor: 'center',
allowOverlap: true
},
textOptions: {
anchor: "top"
}
});
map.layers.add(resultLayer);
});

Since the ready event has been added to the map, it will be executed when the resources have been loaded and the map is ready to be accessed. It’s now time for adding the search capabilities. Let’s keep on proceeding to the next step, which is to use the Search API for finding a point of interest on the map for searching for address and point of interest.

I have provided a location of Coimbatore and my point of interest is for searching for a petrol-bunk in the geographical area. The search API searches for the address points by using the latitude and longitude information to a specified address. Add the following code inside of the map ready event handler.

// Use SubscriptionKeyCredential with a subscription key
var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());
// Use subscriptionKeyCredential to create a pipeline
var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);
// Construct the SearchURL object
var searchURL = new atlas.service.SearchURL(pipeline);

Step 6

The following script provides the search query for both latitude and longitude by using the Fuzzy Search Service which is based on Search API. The Fuzzy Search handles the inputs like address, pin-points and places. Now add the following JavaScript code to the search module.

var query = 'petrol-bunk';
var radius = 9000;
var lat = 11.004556;
var lon = 76.961632;
searchURL.searchPOI(atlas.service.Aborter.timeout(10000), query, {
limit: 10,
lat: lat,
lon: lon,
radius: radius
}).then((results) => {
// Extract GeoJSON feature collection from the response and add it to the datasource
var data = results.geojson.getFeatures();
datasource.add(data);
// set camera to bounds to show the results
map.setCamera({
bounds: data.bbox,
zoom: 10
});
});

Now save the html file and refresh the browser, we can see that the given latitude and longitude have been mapped, and it’s time for adding interactive data so that the pin-point will be more effective and user friendly.

Step 7

For more interactive usage of the maps, add the following code inside of the map ready event handler and this code will create popup and a mouseover event.

//Create a popup but leave it closed so we can update it and display it later.
popup = new atlas.Popup();
//Add a mouse over event to the result layer and display a popup when this event fires.
map.events.add('mouseover', resultLayer, showPopup);

Again, add the following code inside the GetMap function so that the mouseover result will pop-up

function showPopup(e) {
//Get the properties and coordinates of the first shape that the event occurred on.
var p = e.shapes[0].getProperties();
var position = e.shapes[0].getCoordinates();
//Create HTML from properties of the selected result.
var html = `
<div style="padding:5px">
<div><b>${p.poi.name}</b></div>
<div>${p.address.freeformAddress}</div>
<div>${position[1]}, ${position[0]}</div>
</div>`;
//Update the content and position of the popup.
popup.setPopupOptions({
content: html,
position: position
});
//Open the popup.
popup.open(map);
}

Now again save the html file and just refresh the browser so that maps will pop-ups with pin-point locations and for your kind reference I have provided the entire source code in a sequential manner.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Search for points of interest - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This tutorial shows how to search for points of interest and display them on the map." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, services, module, tutorials, search" />
<meta name="author" content="Microsoft Azure Maps" />
<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>
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
<script>
function GetMap() {
// Instantiate a map object
var map = new atlas.Map('myMap', {
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a layer for rendering point data.
var resultLayer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'pin-round-darkblue',
anchor: 'center',
allowOverlap: true
},
textOptions: {
anchor: "top"
}
});
map.layers.add(resultLayer);
// Use SubscriptionKeyCredential with a subscription key
var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());
// Use subscriptionKeyCredential to create a pipeline
var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);
// Construct the SearchURL object
var searchURL = new atlas.service.SearchURL(pipeline);
var query = 'petrol-bunk';
var radius = 9000;
var lat = 11.004556;
var lon = 76.961632;
searchURL.searchPOI(atlas.service.Aborter.timeout(10000), query, {
limit: 10,
lat: lat,
lon: lon,
radius: radius,
view: 'Auto'
}).then((results) => {
// Extract GeoJSON feature collection from the response and add it to the datasource
var data = results.geojson.getFeatures();
datasource.add(data);
// set camera to bounds to show the results
map.setCamera({
bounds: data.bbox,
zoom: 10,
padding: 15
});
});
//Create a popup but leave it closed so we can update it and display it later.
popup = new atlas.Popup();
//Add a mouse over event to the result layer and display a popup when this event fires.
map.events.add('mouseover', resultLayer, showPopup);
function showPopup(e) {
//Get the properties and coordinates of the first shape that the event occurred on.
var p = e.shapes[0].getProperties();
var position = e.shapes[0].getCoordinates();
//Create HTML from properties of the selected result.
var html = ['<div style="padding:5px"><div><b>', p.poi.name,
'</b></div><div>', p.address.freeformAddress,
'</div><div>', position[1], ', ', position[0], '</div></div>'];
//Update the content and position of the popup.
popup.setPopupOptions({
content: html.join(''),
position: position
});
//Open the popup.
popup.open(map);
}
});
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#myMap {
width: 100%;
height: 100%;
}
</style>
</head>
<body onload="GetMap()">
<div id="myMap"></div>
</body>
</html>

I hope this article will be useful to you and thanks for reading.

2 Comments

Join the conversation! Your thoughts help the community grow.

KarkuvelRaja ThangaMariappan6y ago
HI Nagaraj, Good Evening. Excellent Post. Can you please tell me, how to pin multiple locations in Azure map? Example: I am having table with the data (Latitude & Longitude of states in INDIA). I want to show up all the states in one shot in azure map. Can you please help me on this?
Sundaram Subramanian6y ago
Worth to know more about Azure Maps. Thanks for Sharing.