services | platforms | author |
---|---|---|
azure-maps, iot-hub |
dotnet, uwp, javascript |
ihvo |
This is a sample application that shows how Azure Maps, IoT hub and Bot service API can work together. We will extend the Azure Maps browser application to create a remotely controlled interactive map using Azure IoT and Azure Maps services.
MapApplication contains source code for the sample UWP application that uses Azure Maps to display map control and connects to Azure IoT hub as a device to receive commands.
MapBot contains source for the sample ASP.NET application using Bot framework and LUIS service to accept user input and connects to Azure IoT as a service to send commands to UWP application.
Before you can run this sample, you must have the following prerequisites:
- An active Azure account. If you don't have one, you can sign up for a free account.
- Windows 10 Creators Update (Build 15063)
- Visual Studio 2017
- Universal Windows Platform tools for VS2017
- ASP.NET and web development tools for VS2017
-
Clone this repository using
git clone [email protected]:azure-samples/azure-maps-dotnet-webgl-uwp-iot-remote-control.git
-
Open
MapApplication\MapApplication.sln
in VS2017. -
Setup device connection string
- Make sure you have IoT Hub connected service extension for VS installed.
- Right click MapApplication project in solution explorer and select Add > Connected service menu item
- In the dialog that opens choose Azure IoT hub
- Sign in with account that has access to Azure subscription, select Hardcode shared access key got to the next step.
- On the IoT hub tab select existing or provision new IoT hub instance.
- On Device tab create new device named
map-display
and select Finish. - This extension will have requied nuget package installed and
deviceConnectionString
property in AzureIoTHub.cs populated with a connection string formap-display
. - Open AzureIoTHub.cs and add the following method at the end of the class definition:
public static async Task RegisterDirectMethodAsync(string methodName, Func<string, Task> action) { CreateClient(); System.Diagnostics.Debug.WriteLine($"Registering a callback for {methodName}"); await deviceClient.SetMethodHandlerAsync(methodName, async delegate (MethodRequest methodRequest, object userContext) { System.Diagnostics.Debug.WriteLine($"{methodName} has been called"); try { await action(methodRequest.DataAsJson); return new MethodResponse(200); } catch (Exception ex) { return new MethodResponse(Encoding.UTF8.GetBytes(ex.ToString()), 500); } }, null); }
- Property
deviceConnectionString
in AzureIoTHub.cs will contain a connection string populated with SAS for devicemap-display
.
-
Setup Azure Maps web control
- Get your Azure Maps account key. If you don't have one, please follow instructions in demo app quickstart to create account and obtain the account key.
- Open AzureMapDemo.html and find the following section:
var subscriptionKey = "<replace with your Azure Maps account key>"; var map = new atlas.Map("map", { "subscription-key": subscriptionKey, center: [-118.270293, 34.039737], zoom: 14 });
- Replace
subscriptionKey
value with your Azure Maps account key.
- Select build platform x64 for the project MapApplication.
- Build the MapApplication and click Run.
Your main window should display map and a search box:
Try sending direct commands from your IoT hub instance. Implemented commands are "SearchFuzzy" (expects search term as body text), "ZoomIn" and "ZoomOut".
At this point you have built a functioning UWP application which displays the map and responds to remote commands from IoT hub.
You can following steps from Creating MapBot service with LUIS to setup your instance of bot service that communicates with MapApplication via IoT hub.
Alternatively, you could build and deploy bot service using source code available in the MapBot subfolder.
- Clone repository or download source code and extract in local folder
- Open
MapBot\Microsoft.Azure.Maps.Sample.LuisBot.sln
in Visual Studio - Build and run the bot
- Download and run botframework-emulator
- Connect the emulator to http://localhost:3987
- In Visual Studio, right click on
Mapbot\Microsoft.Azure.Maps.Sample.LuisBot.sln
and select 'Publish' - Follow dialog steps to create App service instance and upload the code