• About Us
  • Blog
  • Basket
  • Account
  • Sign In


Published on Friday, February 17, 2012

Implement Store Finder in 6 simple steps and 10 minutes


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.


  1. Visual Studio 2008 or 2010
  2. .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 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">



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.BottomRightLatitude, MapStores.BottomRightLongitude);

            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),

                // 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)

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.

Access the application from a real mobile device and traditional web browser. Download this sample application from here, remember to place the license file in the bin and download the GeoLiteCity.data file into App_Data folder before executing.

Output: Nokia X6 & iPhone 4

Comments (0)

Author: Products Team

Categories: Development

Tags: ASP.NET , C#

Murali Setty

Products Team

Other posts by Products Team
Contact author



.NET 4G 51Degrees 5G Acer Adform Adtech Advertising Afilias Alcatel Amazon AMP Analysis Analytics Android Apache API Apple Asian Market ASP.NET Asus Blackberry Browser C C# Centro Chrome chromium Client hints Cloud CMS CPU CSS3 Data Data Blog Data File Daydream Design Detection Developers Device Device Data Device Detection Device Intelligence Device Models Device property DeviceAtlas Disney dmexco DotNetNuke Download ebay Ericsson Event Facebook Firefox Foundation Framework Galaxy git repositories Google Google Analytics Google Daydream GPU GSMA Guess HAProxy Hash Trie HTC HTML5 HTTP HTTP Headers Huawei Infinix Ingeniux Internet usage iOS iOS 13 ipad iPadOS iPhone iPhone 11 Java Javascript Kentico LG Liferay LTE m.dot Memory Memory leak Meta Data Microsoft Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Motorola Mozilla MWC MWC 2017 MWC16 Native Apps NET New Release News Nexus NFC NGINX Nokia OnePlus 5 Opera Operating System Oppo Optimisation OS Patent Performance PHP Press Release Price Band programmatic Publishers Python Redirection Research Responsive Images Responsive web design RESS Review RTB RWD Safari Samsung Scala ScientiaMobile SEO Server Server-side optimisation Seznam.cz Sitecore Smart TV Smartphone Smartwatches Sony Swedish Beers Tablet Tencent Testing Tips Tutorial Umbraco Update User Agent User-Agent Valgrind Varnish Varnish Cache Video Vodafone VoLTE Web Web Apps Web content management Webtrekk White Paper Widgets WiFi Windows WURFL Xiaomi Xperia ZTE