|  Register

Instructions

Objectives

  • Create a map using both Bing and Google maps.
  • Add navigation controls to the map.
  • Add selectable markers to the map.
  • Link the map control to the location control used in the Location tutorial

Prerequisites

Step 1 - Displaying a Map

51Degrees.mobi got it's name from the Northern latitude of the town their based in, Reading in the United Kingdom. Pasting the following ASP.NET code in an empty mobile web from will produce a static map centred on Reading.

<mob:Map ID="Map1" runat="server" Latitude="51 27 17 N" Longitude="0 58 8 W" ControlsVisible="false">
</mob:Map>

You should see a Google map similar to the following screen shot when the page is displayed on the Android emulator.



We've not done anything so far that you couldn't do using a static image. Now change the ASP.NET code added to the page earlier to remove the ControlsVisbile="false" property. When viewed on the Android emulator you should find the map is surrounded by icons that enable intuitive navigation. A screen similar to the following should be displayed.



Press the icons to navigate around the map. Notice how they've default to finder sized buttons which are easy to select.

Now try displaying the same page in the Nokia S40 5th Edition emulator. A screen similar to the following should be displayed.



The map controls are located underneath the map to enable easier selection using the more common joystick user interface of Nokia S40 devices.

Step 2 - Using Bing Maps

Google maps used by default in Step 1 do not require a key for use within a development environment. Bing maps requires the developer registers for a key at the Bing Maps Account Centre. To obtain a bing maps key click on this link and copy the key provided.

Open the web.config file for your mobile web application and locate the following line.

<maps googleKey="Your_Google_Key_Here" bingMapsKey="Your_BingMaps_Key_Here"/>

Replace the Your_BingMaps_Key_Here value for the bingMapsKey attribute with the value obtained from the Bing Maps Account Centre and save the web.config file.

Open the ASP.NET code from Step 1 and change the map control to include the additional property Provider="BingMaps". Your ASP.NET code should look as follows.

<mob:Map ID="Map1" runat="server" Latitude="51 27 17 N" Longitude="0 58 8 W" Provider="BingMaps">
</mob:Map>

Now open the web form in the Android emulator. You will see a map very similar to the screen shot below.



The Google map from Step 1 is replaced with an equivalent Bing map. The map can be navigated using the same controls and supports all the same features. The rest of this tutorial will use Bing maps.

Step 3 - Adding Markers

We can extend the map created in Step 2 to include markers for specific points of interest. As we know Reading very well and work with Microsoft we'll add markers for Microsoft HQ, Taxi Ranks and Bus Stops.

Paste the following ASP.NET code which contains marker positions and descriptions between the opening and closing mob:Map elements from Step 2.

<Markers>
    <mob:MapMarker Text="Local route bus stops" Longitude="0 58 17 W" Latitude="51 27 48 N" />
    <mob:MapMarker Text="Taxi Rank" Longitude="0 58 22 W" Latitude="51 27 31 N" />
    <mob:MapMarker Text="Gerrard Street NCP car park" Longitude="0 58 24 W" Latitude="51 27 28 N" />
    <mob:MapMarker Text="TVP Shuttle bus stop (stop SY)" Longitude="0 58 20 W" Latitude="51 27 29 N" />
    <mob:MapMarker Text="TVP shuttle bus stop (Stop MC)" Longitude="0 58 13 W" Latitude="51 27 27 N" />
    <mob:MapMarker Text="Taxi Rank" Longitude="0 58 18 W" Latitude="51 27 7 N" />
    <mob:MapMarker Text="TVP shuttle bus alternative bus stop" Longitude="0 57 2 W" Latitude="51 27 11 N" />
    <mob:MapMarker Text="TVP Shuttle bus drop off point" Longitude="0 55 40 W" Latitude="51 27 42 N" />
    <mob:MapMarker Text="Microsoft Campus" Longitude="0 55 33 W" Latitude="51 27 42 N" />
</Markers>

Open the page on the Android emulator. A screen similar to the following should appear.



If you scroll East, or to the right, you should notice the list of visible markers changes. This is because the map will only display markers that are within the area being viewed.

Use the MaxMarkers property of the Map control to determine the maximum number of markers visible at any one time. A Pager control is used to switch between pages of markers. This approach prevents the map becoming too cluttered when there are a lot of markers present.

Step 4 - Selecting Markers

By default the SelectionEnabled property of the map control is set to true. When a marker is selected the MarkerSelected event will fire and a CommandEventArgs object will be passed containing the value of the marker selected in the CommandArguement property.

Change the ASP.NET code to include an event handler for the OnMarkerSelected attribute of the map control, provide a value attribute for each of the markers, and set the maximum number of markers to display on a map to 5 using the MaxMarkers property. The following ASP.NET code could be used.

<mob:Map runat="server" ID="MapControl" MaxMarkers="5" Latitude="51 27 17 N" Longitude="0 58 8 W" OnMarkerSelected="MarkerSelected">
    <Markers>
        <mob:MapMarker Text="Local route bus stops" Longitude="0 58 17 W" Latitude="51 27 48 N" />
        <mob:MapMarker Text="Taxi Rank" Longitude="0 58 22 W" Latitude="51 27 31 N" />
        <mob:MapMarker Text="Gerrard Street NCP car park" Longitude="0 58 24 W" Latitude="51 27 28 N" />
        <mob:MapMarker Text="TVP Shuttle bus stop (stop SY)" Longitude="0 58 20 W" Latitude="51 27 29 N" />
        <mob:MapMarker Text="TVP shuttle bus stop (Stop MC)" Longitude="0 58 13 W" Latitude="51 27 27 N" />
        <mob:MapMarker Text="Taxi Rank" Longitude="0 58 18 W" Latitude="51 27 7 N" />
        <mob:MapMarker Text="TVP shuttle bus alternative bus stop" Longitude="0 57 2 W" Latitude="51 27 11 N" />
        <mob:MapMarker Text="TVP Shuttle bus drop off point" Longitude="0 55 40 W" Latitude="51 27 42 N" />
        <mob:MapMarker Text="Microsoft Campus" Longitude="0 55 33 W" Latitude="51 27 42 N" />
    </Markers>
</mob:Map>

An event handler called MarkerSelected also needs to be added to the codebehind page. The following C# could be added to handle the event.

protected void MarkerSelected(object sender, CommandEventArgs e)
{
    Label labelValue = new Label();
    labelValue.Text = String.Format("You Selected Marker '{0}'.", e.CommandArgument);
    Controls.Add(labelValue);
}

When the page is displayed and a marker selected a label will be added to the bottom of the page containing the value of the marker selected. If more markers are visible on the map than the value of MaxMarkers a pager appears at the bottom of the list of markers to enable navigation to additional maps which will include the additional markers. This enables a large number of markers to be viewed on a very map image when the a low zoom factor is used.

Licensing

Bing and/or Google maps are used with the Map control and are subject to separate license and usage agreements. See the following links:
Purchase of a 51Degrees.mobi - .Net Mobile Framework does not include a licence to use these services. In many situations Bing and Google provide the necessary services to use the Map control without charge.

Conclusion

The map control enables a usable map to be displayed containing selectable markers and navigation controls within the mobile web application. There is no need to jump out of the web browser environment to use the native mapping application provided by the mobile handset. As a result a consistent user experience is created that will work reliably on all mobile devices.

Please contact us to discuss options for the use of mapping providers other than Bing and Google, or premium map services.

Tutorials

NumberSorted By Number In Ascending OrderTutorialSummary
1InstallationInstall 51Degrees - .Net Mobile Framework and confirm the installation is successful.
2EmulatorsConfigure IIS to work with mobile device emulators improving development productivity.
3Hello WorldAdd a mobile label control to a mobile page and understand major differences compared to standard ASP.NET.
4Mobile ProfileUse a simple database to gain additional insight into the mobile device performance, optimise view state and persist data.
5Clever ImagesOptimise images to consume the bare minimum amount of data for the display on the requesting mobile device without compromising image quality.
6Entering TextMake it easier for your users to enter text by remembering previous values and providing common options.
7DatesCaptures dates quickly and easily using all the capabilities of the requesting mobile device.
8LocationFind out where the requesting mobile device is or get location information from users.
9MapsDisplay maps from Google or Bing, move around and show multiple markers.
10Data Lists and PagersDisplay lists of items and page between them.
11Styling Mobile ControlsStyle mobile web applications using different common characteristics of mobile devices such as screen size or input method.
12DeploymentDeploy the Framework onto a production server and configure IIS and SQL.