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

 

Sign in to the online Microsoft Azure Portal.

 

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" />

        <!-- 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 a reference to the Azure Maps Services Module JavaScript file. -->
        <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.