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

Blog

Published on Friday, February 17, 2012

Implement Store Finder in 6 simple steps and 10 minutes

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

  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>

<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["store"].Rows;

            for (int i = 0; i < rows.Count; i++) {
                DataRow row = rows[i];
                
Position storePosition = new Position(double.Parse((string)row["latitude"]),
                                                     
double.Parse((string)row["longitude"]));

                // 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["name"].ToString(), ","row["address"].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.

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#, Location, Map

Murali Setty
>

Products Team

Other posts by Products Team
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Affiliate Marketing Alcatel Amazon AMP Analysis Analytics Android Android 5.0 Lollipop Android Kitkat Android Lollipop Android Media Stick Apache API Apple Apple TV Archos Asha Asian Market ASP.NET Asus Australia Big Data Black Friday Blackberry Blink Browser C C# Case Study CeBIT CES Chrome Cloud CMS combinations Comparison Competition CoolPad COTW Cron CSS3 Data Data Blog Data File Data Model Daydream Denver Design Desire Eye Desktop Detection Device Device Data Device Detection Device Intelligence Device Popularity Device property Device Types Device Use Display DoCoMo Doogee DotNetNuke Download Drupal Email EReader E-Reader Ericsson Evaluation Event Examples EXPLAY Rio Facebook feature Firefox Firefox OS Fly Foundation Framework France Galaxy S3 Galaxy S5 Galaxy Tab A Galaxy Tab A 8.0 Galaxy Tab A 9.7 Germany Global Google Google Daydream GSMA HAProxy Hardware Hisense HTC HTC ONE MAX HTC OS HTML5 HTTP Huawei HUAWEI. UPDATE HUDL Huwaei IBC Icemobile Prime 4.0 IE IFA IIS Image Optimiser Image Optimizer India Infographic Ingeniux Internet usage iOS iOS 7 iOS 8 ipad iPhone iPhone 6 IsEmailBrowser IsWebApp Italy Japan Java Javascript Jolla Kentico Keynote Kindle Kindle Fire Kindle Fire HD Leagoo Lenovo LG Location Log File Analysis LTE Lumia Map Memory Meta Data Mi 4S Micromax Microsoft Miia Style Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Module Motorola MVC4 MWC MWC 2017 MWC16 MyPhone Native NET New Release News News Letter Nexus Nexus 6 Nexus 9 NFC NGINX Nokia Non-Mobile NVIDIA Omate On7 Opera Opera Mini Operating System Optimisation OS OSX 10.10 OTA Panasonic Patent PC Pebble Performance phablet phone PHP Poland Presentation Press Release Price Band PRIV PS4 Python QMobile QR Codes Redirection Research Reseller Responsive Images RESS Review reviews RIM Ringmark RWD Samsung Scala Screen Screen resolution Screen Size SEO Server Set Box Set Top Box Sharepoint Shark 1 SHIFT phones Sitecore SLUSH Smart TV Smartphone Smartphones Smartwatches Snapdragon Sony Sony Xperia Spain Swedish Beers Symbian Tablet Tablets Tesco Testing Top 5 TOTW TV UDS UK Umbraco Update updates US User Agent UserAgent User-Agent Vendors Version 3 VoLTE VR Wearable Web WebKit WebMatrix White Paper Widgets Widnows WiFi Wiko Wileyfox Windows Windows Phone Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE