Developing a .NET UWP application using Azure Maps, IoT hub and Bot service
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@example.com:azure-samples/azure-maps-dotnet-webgl-uwp-iot-remote-control.git
Setup device connection string
- Register a device named
map-displayand obtain device connection string by following steps from the Device Control Quickstart.
- Open AzureIoTHub.cs and find the following section:
CSharp // // Note: this connection string is specific to the device "map-display". To configure other devices, // see information on iothub-explorer at http://aka.ms/iothubgetstartedVSCS // const string deviceConnectionString = "<replace with your Azure IoT hub device connection string>";
deviceConnectionStringwith connection string obtained from IoT hub in the previous step.
- Register a device named
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:
subscriptionKeyvalue with your Azure Maps account key.
Running the app
- 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.
Setting up bot service
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.
Build and debug
- Clone repository or download source code and extract in local folder
MapBot\Microsoft.Azure.Maps.Sample.LuisBot.slnin Visual Studio
- Build and run the bot
- Download and run botframework-emulator
- Connect the emulator to http://localhost:3987
Publish to Azure
- In Visual Studio, right click on
Mapbot\Microsoft.Azure.Maps.Sample.LuisBot.slnand select 'Publish'
- Follow dialog steps to create App service instance and upload the code