Azure Maps in PCF Controls

In this blog, we will bring in an Azure map to the PCF control framework. If you want to understand how to create a PCF control check the blog, Step by Step process to create PCF Controls which has details on how to create a PCF control in general. This is a blog to just introduction of Azure Maps APIs and how we can bring in the same to our PCF control and we are not diving deep into different other available APIs. Hope you will enjoy this blog.

As a prerequisite for this activity, we need to have a subscription to Azure and specifically get a primary subscription. To start an azure maps account use this link and to get the primary subscription through this documentation. Assume that you now have a valid primary key for using in our PCF Control.

Now, if you are aware, while we are creating the PCF control as soon as the init command is executed we use the npm install command to install all the references to our created project. Just after that step, we have to run the below command to include “azure-maps-control” to our package. This will be used in our “index.ts” file where we call our map control.

npm install azure-maps-control

Now, once we open our project and start making changes to our manifest file and index files, make sure we are adding the below line of code to the top of index.ts file just below already existing import line. This line is something similar to our using statement in C# and #include in C++ languages.

import * as atlas from "azure-maps-control"

Now we are getting into the last steps where we are calling the map control. Wherever we want to call the map control we can call the below line of code. Normally, we will be using the same in the init method, but its upto us based on our business requirement, where the map needs to be loaded.

var map = new atlas.Map("myMap", {
			style:'satellite',
			language: "en-US",
			authOptions: {
				authType: atlas.AuthenticationType.subscriptionKey,
				subscriptionKey: "<place your subscription code here>"
			}
		});
		map.events.add('ready',function(){
			map.controls.add([
				new atlas.control.ZoomControl(),
				new atlas.control.CompassControl(),
				new atlas.control.PitchControl(),
				new atlas.control.StyleControl()
			], {
				position: atlas.ControlPosition.TopRight
			});
		});	

In the first line, we are setting the atlas.map object where “myMap” is a div HTML element where our map will get loaded. You can replace that with the id of your div element. Copy and paste your subscription key in the place holder. This line should be sufficient to make sure the map is loaded into the div element and thus to our control. Next line of code is to make sure we are bringing in all other controls to the map. If we don’t want to show any of these controls like the one to zoom, compass, style and so on to our map, may be you can ignore the second line.

After this run the build command then then start the component to test the same in the browser. As soon as you are loading the page, you can see that the map control also gets loaded to the browser. Will come up with more blogs with more features added as I continue exploring the same. Hope this blog helped you and thanks for your time reading my blog.