App Mashup Demo: Azure Cognitive Services and Azure Maps

Somewhat recently, Azure came out with Bing Local Search, an API under the Cognitive Services umbrella of  services.  Bing Local Search, as you would expect, allows you to search local businesses from your app using a REST API.  I was interested in trying it out, and started thinking of a way to incorporate it into an app.  Then I thought, hey, why not make a web app mashup using ASP.NET Core?  I could use Azure Maps to plot the results on a map.  So that’s what I did.  I built an  An app mashup using Azure Cognitive Services and Bing Local Search, and I’d like to share it with you!

This app is only a demo, so don’t expect it to be highly engineered.   I posted the code on GitHub so you can run it yourself with your own API Keys.  I even hosted the app here so you can try it out.  The hosted version has fake data and does not call an API.   It is there just to let you test drive the UI.   Let’s dive in to the details.  Here’s a screenshot followed by a walk-through.

The Bing Local Search/Azure Maps Mashup

The UI

I built the UI from a really neat free template by 3rdWaveMedia

What Does it Do?

It searches restaurants in the Chicago area.

Services Used and How

Search restaurants by keyword description, such as ‘Chinese’ or ‘Mexican’.  This calls out to the Bing Local Search API.   Since the theme of the app is Chicago restaurants, I pass in the location of Chicago in the app code behind the scenes.  The results are then shown on the list as well as plotted on a map.  Here’s where the mashup part kicks in. To plot the results on a map, I use Azure Maps.  First, the map itself on the page is an Azure Maps map control .  To plot the search results on the map, I use the client-side Javascript library. Each result from Bing Local Search contains a Latitude and Longitude, so I simply loop through the results and add a map marker to the map at the business location. I throw a pop up on the marker for good measure. You can get pretty fancy with pop ups, and Azure Maps in general.  I will probably do some more posts as I try out more features.

Service Setup

To set up the Azure services you’ll need to go to the Azure portal and set up a new Bing Local Search Cognitive Services instance.  It looks like the only pricing tier that supports Bing Local Search is S10, so make sure to select that one. Once you create your instance, you’ll get an API endpoint and Key.

For the Azure Maps account, I set one up using the free tier.  Once created, you’ll also get an API key for that service.

To use the keys in the app, I take advantage of the User Secrets feature of ASP.NET Core.  It keeps the code free of API Keys.  If you download the code and want to run it with your own keys, right click the project and select ‘Manage User Secrets’.    Copy the snippet below and paste it in the file.  Replace the placeholders with your keys and Bing API endpoint.

So there you have it.  I might built on this in the future, adding features like making the pop ups fancier.   Feel free to try out the online demo, and download the code.  Make sure to come back for more blog posts like this if you like Azure and the Microsoft stack in general.