Now let’s take a closer look at this method for a minute. The Bing Maps geocoder returns about 5 locations on average per request. When doing auto suggest using the Bing Maps geocoder it can sometimes take a lot of characters before the option your user is looking for is returned. This means that for each character the user has to add to their query there are more suggestions that aren’t relevant to the user. This is a bit of a waste and not the ideal user experience.
In this blog post we are going to create a customer ranked auto suggest service. Initially no suggestions will be provided to the user as the database will be empty. Many of the searches will need to be passed to the Bing Maps geocoder and the results presented to the user so they can select the best option. From there the selection can be added to the auto suggest database for future use. Once there are some suggestions in the database the user will see the auto suggestions appear. If they select one of the suggestions the rank value of that suggestion will increase so that it shows up higher in the results of future suggestions.
There are a number of different ways we could develop this. We could create a custom web service that connects to a database. By using a web service we can reuse this auto suggest feature not only in web apps but in mobile apps as well. If we are building an app we could embed a SQLite database and store the suggestions locally for the individual user. In this blog post we are going to use the Azure Mobile Services. By using the Azure Mobile Services we can leverage a web service that is connected to a database in a fraction of the time it would take to create a custom web service. The client app that shows how to use the mobile service will be a simple web page to keep things simple.
Full source code for the client app can be downloaded from the MSDN Code Gallery here.
Setting up the Azure Mobile Service
The Windows Azure Mobile Services you to quickly create connected apps that can make use of cloud based storage, authenticate users, and send push notifications. With SDKs for Windows, Android, iOS, and HTML as well as a powerful and flexible REST API. One of the great benefits of it being a cloud based service is that it has on-demand scaling allowing you to easily support more users as your app grows with just a few clicks of a button. The Windows Azure Mobile services has a free tier that allows you to create up to 10 services running across 500 devices and 500,000 API calls per month. As your application grows in popularity you can upgraded to increase these limits.
To get started go to http://azure.com and sign-in or create a free trial account. This site also has some great tutorials that you might want to refer to if you want to extend this application. Once you are logged into your account you will see a number of different services listed on the left side panel, select Mobile Services, and then select the option to create a new mobile service.
The next step is to configure the database. Create a new SQL database and give it a name. Also specify a login name and password. Select the same region as before. This will ensure that your database and service will be able to communicate with the best performance. When you are done click the check button.
You will now see your new mobile service listed in a table. While you are here copy the URL for later use. Also click on the Manage Keys button at the bottom of the page. This will open up a dialog that has an application and a master key. Copy the application key for later use.
Now click on the name of your new mobile service. This will bring you into the dashboard for the service. On the first page you will see an option to choose a platform. This will provide you with different options for getting started. Ignore this for now and Data tab at the top of the page. On the page that opens select the option to create a new table. Call the table SearchRankings and set the permissions as I have in the screenshot below. Click on the check mark button when you are done.
Now back on the Data tab you should see your table listed, click on the tables name to open it up. Click on the Columns tab and use the add column button at the bottom of the page to add the following columns.
|name||string||We will store the suggestion location name in this field.|
|latitude||number||The latitude coordinate for the location.|
|longitude||number||The longitude coordinate for the location.|
|rank||number||A number used to rank the suggestion. Each time a suggestion is reused its rank will be increased by 1. Suggestions will be sorted by rank.|
|zoom||number||A zoom level to use to display the suggestion on the map. We could store best map view bounding box for the location but that would requiring a lot more information. A simple zoom level will suffice. Countries will be more zoomed out than cities, cities will be more zoomed out than addresses.|
A zoom level to use to display the suggestion on the map. We could store best map view bounding box for the location but that would requiring a lot more information. A simple zoom level will suffice. Countries will be more zoomed out than cities, cities will be more zoomed out than addresses.
We will leave the delete and read operations as they are. At this point our mobile service is as complete as we need to do our development. However, if you decide to use this service from a web application that is hosted online you will need to add the host name of the web app to the mobile service configuration. You can do this by clicking on the Configure tab from the main dashboard for your mobile service. Add the host name to the Cross-Origin Resource Sharing section of the configuration.
Creating a Client Web App
On the main dashboard of our mobile service you can choose the platform you can to develop the client app for and download a sample application to get started. We are not going to use these in this section but they may be useful if you want to create a client app for a different platform. To get started open up Visual Studios and create a new ASP.NET Web Application project called CustomerRankedAutoSuggest.
Next select the Empty template. We will be creating a basic web app to keep things simple.
Next open the page.cssfile and update it with the following styles.
Open the AutoSuggest.js file. In here we will add code that wraps our mobile service and exposes some functions for easily retrieving, inserting and incrementing the rank of suggestions. Update this file with the following code. Note that you will need to update it with the URL to your mobile service and the application key needed to access it.
We will put all our application logic in the page.js file. In here we will need to load the map and the Bing Maps Search module. We then need to add the autocomplete widget from jQuery UI to our search textbox and set it up so that it pulls the suggestions from our mobile service. When a selection is made the autocomplete widget will increment the rank value of the selected suggestion in our database and zoom the map into the selected location. Next we will add a keypress listener to the search textbox so that when the user presses the enter button it geocodes the users query. We will also add a click event to the search button. We will create a function that uses the Bing Maps Search module to geocode the users query. The results will be displayed in a dialog box above the map. When the user selects one of the results it will be added to the suggestion database and the map will zoom into that location. To do all this open the page.js file and update it with the following code. Note, you will need to provide your Bing Maps key for this code to work correctly.
At this point the application is complete. Right click on the page.html file and select Set As Start Page. Press F5 or the debug button to test. Initially when you do a query you will not see any suggestions and when you press the search button a list of results from the geocoder will be displayed like so.
After you have some locations in your database your application will start to provide suggestions as the user types in the search box like the screenshot below.
If over time more users select Seattle as a suggestion its rank will increase until eventually it will be listed as the first suggestion like this.
You can download the full source code for the web app in this blog from the MSDN Code Samples here.