Azure

Overview Of Azure Maps

On this article let’s take an outline of Azure Maps. The Azure Maps offers the geospatial functionality for mapping the information. Because the Azure Maps can be found for each Cell and Internet they’re filled with the freshest mapping of knowledge, and along with that the Azure maps presents the search, maps, routing, visitors and mobility, climate, and so forth. Earlier than getting began on working with Azure maps, lets create an account.

 

Stipulations

Step 1

 

 

Step 2

 

From the Azure portal menu, or from the Residence web page, choose Create a useful resource. Within the Search field, enter Maps. From the outcomes record, select Maps. Select Create.

 

 

For creating the map account, we have to present the next fundamental required values,

  • Present a reputation for the account.
  • Choose the useful resource group if in case you have any current or you may create a brand new useful resource group.
  • Choose the subscription and choose the pricing tier for the account.

 

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

 

Step 3

 

Now we are able to see that we have now efficiently created the maps account and now we have now to retrieve the first key, the first secret is for enabling the querying of the map API’s. For retrieval of the first keys Choose >> Authentication.

 

Copy the first key to your clipboard in order that we are able to use it later.

 

 

Step 4

 

Right here comes the primary half, now we have now to create a brand new map. For that, simply create an html file in your native PC and place the next code inside the html file.

 

What occurs right here is the MAP management API is a handy library through which the API permits us to combine maps into the online software, for the reason that productiveness will likely be elevated as a result of hidden complexity of the naked REST service calls. Now let’s get again to the method.

 

Let’s add a few of the code contained in the GetMap operate within the html file. Ensure you have positioned the first key inside the <your azure map key> tag.

 

Now if we run the html file within the browser, we are able to see the map is displayed within the browser by calling atlas.map utilizing the account key.

 

Step 5

 

Let’s carry on continuing to the subsequent step, now add the next code within the GetMap (), after initializing the map 

  1.   
  2. map.occasions.add(‘prepared’operate() {  
  3.   
  4.       
  5.     datasource = new atlas.supply.DataSource();  
  6.     map.sources.add(datasource);  
  7.   
  8.       
  9.     var resultLayer = new atlas.layer.SymbolLayer(datasource, null, {  
  10.         iconOptions: {  
  11.             picture: ‘pin-round-darkblue’,  
  12.             anchor: ‘middle’,  
  13.             allowOverlap: true  
  14.         },  
  15.         textOptions: {  
  16.             anchor: “high”  
  17.         }  
  18.     });  
  19.   
  20.     map.layers.add(resultLayer);  
  21. });  

Because the prepared occasion has been added to the map, will probably be executed when the assets have been loaded and the map is able to be accessed. It’s now time for including the search capabilities. Let’s carry on continuing to the subsequent step, which is to make use of the Search API for locating a focal point on the map for looking for  deal with and focal point.

 

I’ve offered a location of Coimbatore and my focal point is for looking for a  petrol-bunk within the geographical space. The search API searches for the deal with factors by utilizing the latitude and longitude info to a specified deal with. Add the next code inside the map prepared occasion handler. 

  1.   
  2. var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());  
  3.   
  4.   
  5. var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);  
  6.   
  7.   
  8. var searchURL = new atlas.service.SearchURL(pipeline);  

Step 6

 

The next script offers the search question for each latitude and longitude by utilizing the Fuzzy Search Service which is predicated on Search API. The Fuzzy Search handles the inputs like deal with, pin-points and locations. Now add the next JavaScript code to the search module.

  1. var question =  ‘petrol-bunk’;  
  2. var radius = 9000;  
  3. var lat = 11.004556;  
  4. var lon = 76.961632;  
  5.   
  6. searchURL.searchPOI(atlas.service.Aborter.timeout(10000), question, {  
  7.     restrict: 10,  
  8.     lat: lat,  
  9.     lon: lon,  
  10.     radius: radius  
  11. }).then((outcomes) => {  
  12.   
  13.       
  14.     var knowledge = outcomes.geojson.getFeatures();  
  15.     datasource.add(knowledge);  
  16.   
  17.       
  18.     map.setCamera({  
  19.         bounds: knowledge.bbox,  
  20.         zoom: 10  
  21.     });  
  22. });  

Now save the html file and refresh the browser, we are able to see that the given latitude and longitude have been mapped, and it’s time for including interactive knowledge in order that the pin-point will likely be more practical and consumer pleasant.

 

 

 

Step 7

 

For extra interactive utilization of the maps, add the next code inside the map prepared occasion handler and this code will create popup and a mouseover occasion. 

  1.   
  2. popup = new atlas.Popup();  
  3.   
  4.   
  5. map.occasions.add(‘mouseover’, resultLayer, showPopup);  

Once more, add the next code contained in the GetMap operate in order that the mouseover outcome will pop-up 

  1. operate showPopup(e) {  
  2.       
  3.   
  4.     var p = e.shapes[0].getProperties();  
  5.     var place = e.shapes[0].getCoordinates();  
  6.   
  7.       
  8.     var html = `  
  9.       <div type=“padding:5px”>  
  10.         <div><b>${p.poi.identify}</b></div>  
  11.         <div>${p.deal with.freeformAddress}</div>  
  12.         <div>${place[1]}, ${place[0]}</div>  
  13.       </div>`;  
  14.   
  15.       
  16.     popup.setPopupOptions({  
  17.         content material: html,  
  18.         place: place  
  19.     });  
  20.   
  21.       
  22.     popup.open(map);  
  23. }  

 

Now once more save the html file and simply refresh the browser in order that maps will pop-ups with pin-point areas and in your sort reference I’ve offered all the supply code in a  sequential method. 

  1. <!DOCTYPE html>    
  2.     <html lang=“en”>    
  3.     <head>    
  4.         <title>Search for factors of curiosity – Azure Maps Internet SDK Samples</title>    
  5.         <meta charset=“utf-8” />    
  6.         <meta http-equiv=“x-ua-compatible” content material=“IE=Edge” />    
  7.         <meta identify=“viewport” content material=“width=device-width, initial-scale=1, shrink-to-fit=no” />    
  8.         <meta identify=“description” content material=“This tutorial reveals how to search for factors of curiosity and show them on the map.” />    
  9.         <meta identify=“key phrases” content material=“Microsoft maps, map, gis, API, SDK, providers, module, tutorials, search” />    
  10.         <meta identify=“creator” content material=“Microsoft Azure Maps” />    
  11.         
  12.         <!– Add references to the Azure Maps Map management JavaScript and CSS recordsdata. –>    
  13.         <hyperlink rel=“stylesheet” href=“https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css” sort=“textual content/css” />    
  14.         <script src=“https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js”></script>    
  15.     
  16.         <!– Add a reference to the Azure Maps Companies Module JavaScript file. –>    
  17.         <script src=“https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js”></script>    
  18.         
  19.         <script>    
  20.             operate GetMap() {    
  21.                     
  22.                   
  23.                 var map = new atlas.Map(‘myMap’, {    
  24.                     view: ‘Auto’,    
  25.                         
  26.                       
  27.                     authOptions: {    
  28.                         authType: ‘subscriptionKey’,    
  29.                         subscriptionKey: ‘<Your Azure Maps Key>’    
  30.                     }    
  31.                 });    
  32.         
  33.     
  34.                   
  35.                 map.occasions.add(‘prepared’operate () {    
  36.         
  37.     
  38.                       
  39.                     datasource = new atlas.supply.DataSource();    
  40.                     map.sources.add(datasource);    
  41.         
  42.     
  43.                       
  44.                     var resultLayer = new atlas.layer.SymbolLayer(datasource, null, {    
  45.                         iconOptions: {    
  46.                             picture: ‘pin-round-darkblue’,    
  47.                             anchor: ‘middle’,    
  48.                             allowOverlap: true    
  49.                         },    
  50.                         textOptions: {    
  51.                             anchor: “high”    
  52.                         }    
  53.                     });    
  54.         
  55.     
  56.                     map.layers.add(resultLayer);    
  57.         
  58.     
  59.                       
  60.                     var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());    
  61.         
  62.     
  63.                       
  64.                     var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);    
  65.         
  66.     
  67.                       
  68.                     var searchURL = new atlas.service.SearchURL(pipeline);    
  69.         
  70.     
  71.                     var question = ‘petrol-bunk’;    
  72.                     var radius = 9000;    
  73.                     var lat = 11.004556;    
  74.                     var lon = 76.961632;    
  75.         
  76.     
  77.                     searchURL.searchPOI(atlas.service.Aborter.timeout(10000), question, {    
  78.                         restrict: 10,    
  79.                         lat: lat,    
  80.                         lon: lon,    
  81.                         radius: radius,    
  82.                         view: ‘Auto’    
  83.                     }).then((outcomes) => {    
  84.         
  85.     
  86.                           
  87.                         var knowledge = outcomes.geojson.getFeatures();    
  88.                         datasource.add(knowledge);    
  89.         
  90.     
  91.                           
  92.                         map.setCamera({    
  93.                             bounds: knowledge.bbox,    
  94.                             zoom: 10,    
  95.                             padding: 15    
  96.                         });    
  97.                     });    
  98.         
  99.     
  100.                       
  101.                     popup = new atlas.Popup();    
  102.         
  103.     
  104.                       
  105.                     map.occasions.add(‘mouseover’, resultLayer, showPopup);    
  106.         
  107.     
  108.                     operate showPopup(e) {    
  109.                           
  110.         
  111.     
  112.                         var p = e.shapes[0].getProperties();    
  113.                         var place = e.shapes[0].getCoordinates();    
  114.         
  115.     
  116.                           
  117.                         var html = [‘<div style=”padding:5px”><div><b>’, p.poi.name,    
  118.                             ‘</b></div><div>’, p.address.freeformAddress,    
  119.                             ‘</div><div>’, position[1], ‘, ‘, place[0], ‘</div></div>’];    
  120.         
  121.     
  122.                           
  123.                         popup.setPopupOptions({    
  124.                             content material: html.be part of(),    
  125.                             place: place    
  126.                         });    
  127.         
  128.     
  129.                           
  130.                         popup.open(map);    
  131.                     }    
  132.                 });    
  133.             }    
  134.         </script>    
  135.         
  136.     
  137.         <type>    
  138.             html,    
  139.             physique {    
  140.                 width: 100%;    
  141.                 top: 100%;    
  142.                 padding: 0;    
  143.                 margin: 0;    
  144.             }    
  145.        
  146.    
  147.             #myMap {    
  148.                 width: 100%;    
  149.                 top: 100%;    
  150.             }    
  151.         </type>    
  152.     </head>    
  153.         
  154.     <physique onload=“GetMap()”>    
  155.         <div id=“myMap”></div>    
  156.     </physique>    
  157.         
  158.     </html>     

I hope this text will likely be helpful to you and thanks for studying.

Tags
Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Close