Introduction
This is a guide explaining how to create a mobile web page that contains the nearest 'real world' retail stores to a user's mobile device, based on the current position. There are just 6 simple steps. A completed project containing the results of these steps is available to download later on in this article. You will need to add a Framework licence key to the bin folder for the project to operate.
Prerequisites
- Visual Studio 2008 or 2010
- .Net Mobile Toolkit – Framework from 51Degrees.mobi. Download and install the latest version from here, remember to register and get the 7 days trial license key.
Step 1 – Create Mobile Web Application
Create a mobile version of an ASP.Net web application by choosing the Framework template – Mobile Web application which is available under the category Mobile as shown in the screen shot.
Step 2 – Create Data File
Add a new xml file with the name ‘Stores.xml' under folder App_Data and define the stores list as a database. Ensure the stores list has the double type fields latitude and longitude as part of the schema.
Step 3 – Create the User Interface
Add a new web page from the template Mobile->Mobile Web Form called StoreFinder.aspx. Drag and drop Location and Map controls on to the web page from the toolbox or copy and paste the following html snippet as page content.
About the Controls
Location control: This control detects the position of the device requesting the page using the specific API type which is configurable using the property ‘Mode'. The supported location detection modes use either the W3C Geo location api, Google Gears, Geocoding or Maxmind.
In this example the Mode is set to “All” so that it finds the location of the device using any of the available location service. For more information on this please refer the section 9.20.
Map control: Displays the geographical image of the location based on the latitude and longitude specified. The providers can be either Google Maps or Bing Maps. For more information on the control please refer the section 9.24.
The html of the StoreFinder.aspx page should look like the following code.
<mob:Panel runat="server" ID="PanelLocation">
<mob:Location ID="Location1" runat="server"
GeoCodeMaxItems="3" Mode="All"
;DisplayLocation="true" RequestAddress="true" AutoPostBack="false"
CurrentLocationText="here" AutoFoundPrefixText="Stores near "
EnterLocationLabelText= "Enter the name of the town or city you'd like to find stores in or near to:"
FindLocationButtonText="Find Stores"
GeoSearchCountryMode="Auto" GeoSearchFoundPrefixText="Find:"
HighAccuracy="false" MultipleLocationFoundLabelText="Choose a location:"
OnLocationFound="LocationFound" />
mob:Panel>
<mob:Panel runat="server" ID="PanelMap" Visible="false">
<mob:Panel ID="Panel1" runat="server" SkinID="InnerPanel">
<mob:Label ID="Label2" runat="server" Text="Use the arrows to view stores in nearby locations." />
>
<mob:Map runat="server" ID="MapStores" MaxMarkers="5" Width="400px">
:Map>
Panel>
Step 4 – Creating the Code
Cut and paste the following logic in the StoreFinder page's codebehind class
-
Load the stores.xml file content to DataSet object in static constructor of the class.
// Static constructor, loads Stores list from XML to dataset object for querying.
static StoreFinder()
{
_stores.ReadXml(AppDomain.CurrentDomain.BaseDirectory + "App_Data/stores.xml");
}
- Define LocationFound event handler of Location control, which will get fired when location of the device is found.
// Event handler to handle the location detection event from Location control.
protected void LocationFound(object sender, LocationFoundEventArgs e)
{
if (e.IsAvailable)
{
if (e.LocationInfo.Circle.Accuracy == 0)
e.LocationInfo.Circle.Accuracy = 1000;
var location = new Rectangle(e.LocationInfo.Circle);
// Set TopLeft and BottomRight properties of Map to display the found location
MapStores.TopLeftLatitude = location.TopLeft.Latitude.Value;
MapStores.TopLeftLongitude = location.TopLeft.Longitude.Value;
MapStores.BottomRightLatitude = location.BottomRight.Latitude.Value;
MapStores.BottomRightLongitude = location.BottomRight.Longitude.Value;
PanelMap.Visible = true;
((Location)sender).Visible = false;
// Add Markers list to Map control to display the list of stores near
// to the location found.
while(MapStores.Markers.Count < 1)
{ AddMarkers(); }
}
}
- Add map markers to list the stores near the found location by calculating the distance between the each store location in the database and the device location.
// Iterates throught each store's latitude/longitue and compares with the
// current location's latitude/longitude to find the store(s) near.
private void AddMarkers()
{
var markers = new SortedList<decimal, MapMarker>();
// Define the rectangulare area to look for the stores
var mapViewPort = new Rectangle(
MapStores.TopLeftLatitude, MapStores.TopLeftLongitude,
MapStores.BottomRightLatitude, MapStores.BottomRightLongitude);
mapViewPort.SetDouble();
MapStores.TopLeftLatitude = mapViewPort.TopLeft.Latitude.Value;
MapStores.TopLeftLongitude = mapViewPort.TopLeft.Longitude.Value;
MapStores.BottomRightLatitude = mapViewPort.BottomRight.Latitude.Value;
MapStores.BottomRightLongitude = mapViewPort.BottomRight.Longitude.Value;
// Iterate through each Store row from Stores dataset
DataRowCollection rows = _stores.Tables.Rows;
for (int i = 0; i < rows.Count; i++) {
DataRow row = rows[i];
Position storePosition = new Position(double.Parse((string)row), double.Parse((string)row));
// if the current sotre is within the viewport add store details as Map marker
if (mapViewPort.Contains(storePosition))
{
MapMarker marker = new MapMarker(storePosition.Latitude, storePosition.Longitude);
marker.Text = string.Concat(row.ToString(), ",", row.ToString());
decimal distance = (decimal)Position.Distance(mapViewPort.Center, marker);
if (markers.Keys.Contains(distance) == false)
markers.Add(distance, marker);
}
}
foreach (MapMarker marker in markers.Values)
MapStores.Markers.Add(marker);
}
Step 5 – External Data Sources
Before running the application please download and include GeoLiteCity.dat file under App_data folder of the project. By downloading the file you are accepting the terms and conditions of MaxMind Inc. This database file is required for location control to find location based on Maxmind api. This file may already be present depending on the install options you choose when installing Framework.
Step 6 – Publish & Test
Now publish your Store finder web application to IIS so that it can be accessed on the real devices over the internet.
Output: Nokia X6 & iPhone 4
