[UWP] Display a map on Cortana Canvas through UWP voice command

This article focuses on how to get map info from bingmap service and response to Cortana via UWP Voice Command.

Subscribe Azure Bing Map Service

Create Bing Map Api on Azure portal.
Save your QueryKey, you have to use this key to get map info later.

Voice Command

	<Command Name="whereIsRepairCenter">
	<Example> Show me repair center </Example>
	<ListenFor RequireAppName="BeforeOrAfterPhrase"> Show [me] repair center in {location}</ListenFor>
	<ListenFor RequireAppName="ExplicitlySpecified"> Show [me] {builtin:AppName} repair center {location}</ListenFor>
	<Feedback> Looking for the repaire center in ...</Feedback>
	<VoiceCommandService Target="BackgroundService"/>
	</Command>
	<PhraseList Label="location">
	<Item>New York</Item>
	<Item>Tokyo</Item>
	<Item>Hong Kong</Item>
	</PhraseList>

view raw MyVoiceCommand.xml hosted with ❤ by GitHub

Background app service

1. Create a helper class for bingmap service: Since Cortana only accept text and local image file responds from our UWP,  we have to store the online map information as a local file and pass to Cortana.

	// In Windows Runtime component, we have to make this class sealed
	public sealed class BingmapService
	{
	private static readonly string _subsciptionKey = "Your QueryKey";
	public static string GetMapUri(double lat, double lon)
	{
	return $"http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/{lat},{lon}/15?mapSize=400,200&pp={lat},{lon}&key={_subsciptionKey}";
	}
	// We can not expose public method that return Task
	private static async Task<StorageFile> GetOffineMapImgHelper(double lat, double lon)
	{
	Uri uri = new Uri(GetMapUri(lat, lon));
	//UWP doesn;t have WebClient, altertively, we use HttpClient
	var client = new HttpClient();
	var streamImg = await client.GetStreamAsync(uri);
	//Create a temp file
	StorageFolder folder = ApplicationData.Current.LocalFolder;
	StorageFile file = await folder.CreateFileAsync("tmp.jpg", CreationCollisionOption.ReplaceExisting);
	// open a file stream to write the image
	using (Stream outputFileStream = await file.OpenStreamForWriteAsync())
	{
	await streamImg.CopyToAsync(outputFileStream);
	}
	return file;
	}
	//IAsyncOperation is a valid Windows Runtime return type that represents asynchronous operation
	public static IAsyncOperation<StorageFile> GetOffineMapImgAsync(double lat, double lon)
	{
	return GetOffineMapImgHelper(lat, lon).AsAsyncOperation();
	}
	}

view raw BingmapService.cs hosted with ❤ by GitHub
2. Response VoiceCommandContentTile to Cortana

	VoiceCommandContentTile contentTile = new VoiceCommandContentTile()
	{
	ContentTileType = VoiceCommandContentTileType.TitleWith280x140Icon,
	Title = "Store",
	Image = await BingmapService.GetOffineMapImgAsync(25.044097, 121.521561)
	};
	VoiceCommandUserMessage usrMessage = new VoiceCommandUserMessage()
	{
	DisplayMessage = "The nearest Store is in ShinHe Road. Open hour is 9 AM to 5 PM",
	SpokenMessage = "The nearest Store is in ShinHe Road. Open hour is 9 AM to 5 PM"
	};
	var response = VoiceCommandResponse.CreateResponse(usrMessage, new List<VoiceCommandContentTile>() { contentTile });
	await voiceServiceConnection.ReportSuccessAsync(response);

view raw BackgroundAppService.cs hosted with ❤ by GitHub